feat(Web): frame callback event

web/demo/src/components/HelloWorld.vue

@@ -61,6 +61,13 @@ export default {
           this.vap = null
           console.log('play ended')
         })
+        .on('frame', (frame, timestamp) => {
+          // frame: 当前帧(从0开始)  timestamp: (播放时间戳)
+          if (frame === 50) {
+            // do something
+          }
+          console.log(frame, '-------', timestamp)
+        })
       window.vap = this.vap
     },
     pause () {

web/src/video.ts

@@ -64,8 +64,8 @@ export default class VapVideo {
   public video:HTMLVideoElement;
   protected events;
   private _drawFrame: Function;
-  private animId: number;
-  private useFrameCallback: boolean;
+  protected animId: number;
+  protected useFrameCallback: boolean;
   private firstPlaying: boolean;
   private setBegin: boolean;
   private customEvent: Array<string> = ['frame', 'percentage']
@@ -245,10 +245,7 @@ export default class VapVideo {
   onplaying() {
     if (!this.firstPlaying) {
       this.firstPlaying = true;
-      if ( this.useFrameCallback ) {
-        // @ts-ignore
-        this.animId = this.video.requestVideoFrameCallback( this.drawFrame.bind(this) );
-      } else {
+      if ( !this.useFrameCallback ) {
         this.drawFrame(null, null)
       }
     }

web/src/webgl-render-vap.ts

@@ -68,6 +68,10 @@ export default class WebglRenderVap extends VapVideo {
     }
     this.resources = this.resources || {};
     this.initWebGL();
+    if ( this.useFrameCallback ) {
+      // @ts-ignore
+      this.animId = this.video.requestVideoFrameCallback( this.drawFrame.bind(this) );
+    }
     this.play();
   }
   setCanvas() {
@@ -284,7 +288,7 @@ export default class WebglRenderVap extends VapVideo {
     const frame = Math.round(timePoint * this.options.fps) + this.options.offset;
     const frameCbs = this.events['frame']
     frameCbs.forEach(cb => {
-      cb(frame, timePoint)
+      cb(frame + 1, timePoint)
     })
     const gl = this.instance.gl;
     if (!gl) {