diff --git a/examples/components/Video.jsx b/examples/components/Video.jsx index 123d1c2a..d3e33609 100644 --- a/examples/components/Video.jsx +++ b/examples/components/Video.jsx @@ -1,16 +1,23 @@ export default { - $schema: "https://houtai.baidu.com/v2/schemas/page.json#", - title: "视频播放器", + $schema: 'https://houtai.baidu.com/v2/schemas/page.json#', + title: '视频播放器', body: [ '

另外还支持直播流, flv 和 hls 格式

', { - type: "video", + type: 'video', autoPlay: false, rates: [1.0, 1.5, 2.0], + jumpFrame: true, + jumpBufferDuration: 5, + frames: { + '00:10': '', + '00:20': '', + '00:30': '' + }, src: - "https://amis.bj.bcebos.com/amis/2019-12/1577157317579/trailer_hd.mp4", + 'https://amis.bj.bcebos.com/amis/2019-12/1577157317579/trailer_hd.mp4', poster: - "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png" + 'https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png' } ] }; diff --git a/scss/components/_video.scss b/scss/components/_video.scss index a5f4fd7e..29349b78 100644 --- a/scss/components/_video.scss +++ b/scss/components/_video.scss @@ -13,6 +13,10 @@ } } + &-frameLabel { + text-align: center; + } + .video-react-paused .video-react-big-play-button.big-play-button-hide { display: block; } diff --git a/src/renderers/Video.tsx b/src/renderers/Video.tsx index 900a2630..4f97714e 100644 --- a/src/renderers/Video.tsx +++ b/src/renderers/Video.tsx @@ -22,14 +22,16 @@ import {filter} from '../utils/tpl'; import 'video-react/dist/video-react.css'; const str2seconds: (str: string) => number = str => - str - .split(':') - .reverse() - .reduce( - (seconds, value, index) => - seconds + (parseInt(value, 10) || 0) * Math.pow(60, index), - 0 - ); + str.indexOf(':') + ? str + .split(':') + .reverse() + .reduce( + (seconds, value, index) => + seconds + (parseInt(value, 10) || 0) * Math.pow(60, index), + 0 + ) + : parseInt(str, 10); export interface FlvSourceProps { src?: string; @@ -193,6 +195,7 @@ export interface VideoProps extends RendererProps { columnsCount?: number; isLive?: boolean; jumpFrame?: boolean; + jumpBufferDuration?: number; src?: string; } @@ -279,18 +282,16 @@ export default class Video extends React.Component { return; } + const jumpBufferDuration = this.props.jumpBufferDuration || 0; let index = 0; const times = this.times; const len = times.length; - while (index < len) { + while (index < len - 1) { if ( - times[index - 1] && - state.currentTime <= - times[index + 1] - (times[index + 1] - times[index]) / 2 + times[index + 1] && + state.currentTime < times[index + 1] - jumpBufferDuration ) { break; - } else if (state.currentTime <= times[index]) { - break; } index++; @@ -327,10 +328,11 @@ export default class Video extends React.Component { if (!this.times || !this.player || !this.props.jumpFrame) { return; } + const jumpBufferDuration = this.props.jumpBufferDuration || 0; const times = this.times; const player = this.player; - player.seek(times[index] - (times[index] - (times[index - 1] || 0)) / 2); + player.seek(times[index] - jumpBufferDuration); player.play(); } @@ -360,10 +362,6 @@ export default class Video extends React.Component { const items: Array = []; const times: Array = (this.times = []); Object.keys(frames).forEach(time => { - if (!frames[time]) { - return; - } - times.push(str2seconds(time)); items.push({ @@ -400,8 +398,10 @@ export default class Video extends React.Component { this.jumpToIndex(i * (columnsCount as number) + key) } > - poster -
{item.time}
+ {item.src ? ( + poster + ) : null} +
{item.time}
))}