support pause & play & setTime

web/demo/src/components/HelloWorld.vue

@@ -3,18 +3,22 @@
     <div ref="anim" class="anim-container"></div>
     <button :class="[!access && 'disable']" @click.stop="play(0)">play(无融合)</button>
     <button :class="[!access && 'disable']" @click.stop="play(1)">play(有融合)</button>
+    <button v-if="vap" @click.stop="playContinue()">continue</button>
+    <button v-if="vap" @click.stop="pause()">pause</button>
   </div>
 </template>
 
 <script>
 import Vap from '../../../dist/vap.js'
 import config from './demo.json'
+
 export default {
   name: 'vap',
   data () {
     return {
       access: true,
-      url: require('./demo.mp4')
+      url: require('./demo.mp4'),
+      vap: null
     }
   },
   methods: {
@@ -23,7 +27,7 @@ export default {
         return
       }
       const that = this
-      const vap = new Vap(Object.assign({}, {
+      this.vap = new Vap(Object.assign({}, {
         container: this.$refs.anim,
         // 素材视频链接
         src: this.url,
@@ -32,7 +36,11 @@ export default {
         width: 900,
         height: 600,
         // 同素材生成工具中配置的保持一致
-        fps: 20
+        fps: 20,
+        // 是否循环
+        loop: false,
+        beginPoint: 8
+        // 播放起始时间点(秒)
       }, flag ? {
         // 融合信息（图片/文字）,同素材生成工具生成的配置文件中的srcTag所对应，比如[imgUser] => imgUser
         imgUser: '//shp.qlogo.cn/pghead/Q3auHgzwzM6TmnCKHzBcyxVPEJ5t4Ria7H18tYJyM40c/0',
@@ -47,9 +55,16 @@ export default {
         })
         .on('ended', () => {
           that.access = true
+          this.vap = null
           console.log('play ended')
         })
-      console.log(vap)
+      window.vap = this.vap
+    },
+    pause () {
+      this.vap.pause()
+    },
+    playContinue () {
+      this.vap.play()
     }
   }
 }

web/dist/vap.js

@@ -1327,6 +1327,7 @@
         config: ''
       }, options);
       this.fps = 20;
+      this.setBegin = true;
       this.requestAnim = this.requestAnimFunc();
       this.container = this.options.container;
 
@@ -1421,7 +1422,7 @@
 
 
         this.events = {};
-        ['playing', 'pause', 'ended', 'error'].forEach(function (item) {
+        ['playing', 'pause', 'ended', 'error', 'canplay'].forEach(function (item) {
           _this.on(item, _this['on' + item].bind(_this));
         });
       }
@@ -1455,6 +1456,18 @@
           });
         }
       }
+    }, {
+      key: "pause",
+      value: function pause() {
+        this.video && this.video.pause();
+      }
+    }, {
+      key: "setTime",
+      value: function setTime(t) {
+        if (this.video) {
+          this.video.currentTime = t;
+        }
+      }
     }, {
       key: "requestAnimFunc",
       value: function requestAnimFunc() {
@@ -1528,6 +1541,16 @@
       value: function onended() {
         this.destroy();
       }
+    }, {
+      key: "oncanplay",
+      value: function oncanplay() {
+        var begin = this.options.beginPoint;
+
+        if (begin && this.setBegin) {
+          this.setBegin = false;
+          this.video.currentTime = begin;
+        }
+      }
     }, {
       key: "onerror",
       value: function onerror(err) {

web/dist/video.d.ts

@@ -1,27 +1,31 @@
-/// <reference types="node" />
-import { VapConfig } from "./type";
-export default class VapVideo {
-    constructor(options: any);
-    options: VapConfig;
-    private fps;
-    requestAnim: Function;
-    container: HTMLElement;
-    video: HTMLVideoElement;
-    private events;
-    private _drawFrame;
-    private animId;
-    private firstPlaying;
-    precacheSource(source: any): Promise<string>;
-    initVideo(): void;
-    drawFrame(): void;
-    play(): void;
-    requestAnimFunc(): ((cb: any) => number) | ((cb: any) => NodeJS.Timeout);
-    cancelRequestAnimation(): void;
-    destroy(): void;
-    clear(): void;
-    on(event: any, callback: EventListenerObject): this;
-    onplaying(): void;
-    onpause(): void;
-    onended(): void;
-    onerror(err: any): void;
-}
+/// <reference types="node" />
+import { VapConfig } from "./type";
+export default class VapVideo {
+    constructor(options: any);
+    options: VapConfig;
+    private fps;
+    requestAnim: Function;
+    container: HTMLElement;
+    video: HTMLVideoElement;
+    private events;
+    private _drawFrame;
+    private animId;
+    private firstPlaying;
+    private setBegin;
+    precacheSource(source: any): Promise<string>;
+    initVideo(): void;
+    drawFrame(): void;
+    play(): void;
+    pause(): void;
+    setTime(t: any): void;
+    requestAnimFunc(): ((cb: any) => number) | ((cb: any) => NodeJS.Timeout);
+    cancelRequestAnimation(): void;
+    destroy(): void;
+    clear(): void;
+    on(event: any, callback: EventListenerObject): this;
+    onplaying(): void;
+    onpause(): void;
+    onended(): void;
+    oncanplay(): void;
+    onerror(err: any): void;
+}

web/src/video.ts

@@ -42,6 +42,7 @@ export default class VapVideo {
       options
     );
     this.fps = 20;
+    this.setBegin = true;
     this.requestAnim = this.requestAnimFunc();
     this.container = this.options.container;
     if (!this.options.src || !this.options.config || !this.options.container) {
@@ -61,6 +62,7 @@ export default class VapVideo {
   private _drawFrame: Function;
   private animId: number;
   private firstPlaying: boolean;
+  private setBegin: boolean;
 
   precacheSource(source): Promise<string> {
     const URL = (window as any).webkitURL || window.URL;
@@ -133,7 +135,7 @@ export default class VapVideo {
     }
     // 绑定事件
     this.events = {}
-    ;['playing', 'pause', 'ended', 'error'].forEach(item => {
+    ;['playing', 'pause', 'ended', 'error', 'canplay'].forEach(item => {
       this.on(item, this['on' + item].bind(this));
     })
   }
@@ -161,6 +163,16 @@ export default class VapVideo {
     }
   }
 
+  pause() {
+    this.video && this.video.pause();
+  }
+
+  setTime(t) {
+    if (this.video) {
+      this.video.currentTime = t
+    }
+  }
+
   requestAnimFunc() {
     const me = this;
     if (window.requestAnimationFrame) {
@@ -221,6 +233,14 @@ export default class VapVideo {
     this.destroy();
   }
 
+  oncanplay() {
+    const begin = this.options.beginPoint
+    if (begin && this.setBegin) {
+      this.setBegin = false
+      this.video.currentTime = begin
+    }
+  }
+
   onerror(err) {
     console.error('[Alpha video]: play error: ', err);
     this.destroy();