Video frames 功能调整

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: [
     '<p class="text-danger">另外还支持直播流， flv 和 hls 格式</p>',
     {
-      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'
     }
   ]
 };

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;
   }

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<VideoProps, VideoState> {
         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<VideoProps, VideoState> {
     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<VideoProps, VideoState> {
     const items: Array<object> = [];
     const times: Array<number> = (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<VideoProps, VideoState> {
                       this.jumpToIndex(i * (columnsCount as number) + key)
                     }
                   >
-                    <img className="w-full" alt="poster" src={item.src} />
-                    <div className={`${ns}Text--center`}>{item.time}</div>
+                    {item.src ? (
+                      <img className="w-full" alt="poster" src={item.src} />
+                    ) : null}
+                    <div className={`${ns}Video-frameLabel`}>{item.time}</div>
                   </div>
                 ))}