feat(Web): frame callback

web/src/video.ts

@@ -62,12 +62,13 @@ export default class VapVideo {
   public requestAnim:Function;
   public container:HTMLElement;
   public video:HTMLVideoElement;
-  private events;
+  protected events;
   private _drawFrame: Function;
   private animId: number;
   private useFrameCallback: boolean;
   private firstPlaying: boolean;
   private setBegin: boolean;
+  private customEvent: Array<string> = ['frame', 'percentage']
 
   precacheSource(source): Promise<string> {
     const URL = (window as any).webkitURL || window.URL;
@@ -231,11 +232,13 @@ export default class VapVideo {
     this.destroy();
   }
 
-  on(event, callback:EventListenerObject) {
+  on(event, callback:any) {
     const cbs = this.events[event] || [];
     cbs.push(callback);
     this.events[event] = cbs;
-    this.video.addEventListener(event, callback);
+    if (this.customEvent.indexOf(event) === -1) {
+      this.video.addEventListener(event, callback);
+    }
     return this
   }
 

web/src/webgl-render-vap.ts

@@ -280,6 +280,12 @@ export default class WebglRenderVap extends VapVideo {
   }
 
   drawFrame(_, info) {
+    const timePoint = (info && info.mediaTime >= 0) ? info.mediaTime : this.video.currentTime
+    const frame = Math.round(timePoint * this.options.fps) + this.options.offset;
+    const frameCbs = this.events['frame']
+    frameCbs.forEach(cb => {
+      cb(frame, timePoint)
+    })
     const gl = this.instance.gl;
     if (!gl) {
       super.drawFrame(_, info);
@@ -287,8 +293,6 @@ export default class WebglRenderVap extends VapVideo {
     }
     gl.clear(gl.COLOR_BUFFER_BIT);
     if (this.vapFrameParser) {
-      const timePoint = (info && info.mediaTime >= 0) ? info.mediaTime : this.video.currentTime
-      const frame = Math.round(timePoint * this.options.fps) + this.options.offset;
       const frameData = this.vapFrameParser.getFrame(frame);
       let posArr = [];