feat(Web): update lib

web/README.md

@@ -6,7 +6,7 @@
 ## 简介
 VAP是企鹅电竞实现融合礼物特效的组件，将图片/文字与原始mp4视频融合在一起，支持透明度，项目详细介绍请参考 [VAP](https://github.com/Tencent/vap)
 
-### 一、使用 🔧
+### 一、使用(参考demo) 🔧
 
 1、安装
 ``` bash
@@ -23,7 +23,7 @@ let vap = new Vap(options)
 3、实例方法
 ``` bash
 # 实例方法
-1、on(): 绑定h5 video事件  如on('playering', function() {// do some thing})
+1、on(): 绑定h5 video事件或者自定义事件(frame： 接收当前帧和播放时间戳)  如on('playering', function() {// do some thing})
 2、destroy()：销毁实例，清除video、canvas等
 3、pause()：暂停播放
 4、play()：继续播放

web/dist/vap.js

@@ -856,6 +856,16 @@
 
   var createClass = _createClass;
 
+  function _assertThisInitialized(self) {
+    if (self === void 0) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+
+    return self;
+  }
+
+  var assertThisInitialized = _assertThisInitialized;
+
   var getPrototypeOf = createCommonjsModule(function (module) {
   function _getPrototypeOf(o) {
     module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
@@ -952,7 +962,7 @@
   module.exports = _typeof;
   });
 
-  function _assertThisInitialized(self) {
+  function _assertThisInitialized$1(self) {
     if (self === void 0) {
       throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
     }
@@ -960,14 +970,14 @@
     return self;
   }
 
-  var assertThisInitialized = _assertThisInitialized;
+  var assertThisInitialized$1 = _assertThisInitialized$1;
 
   function _possibleConstructorReturn(self, call) {
     if (call && (_typeof_1(call) === "object" || typeof call === "function")) {
       return call;
     }
 
-    return assertThisInitialized(self);
+    return assertThisInitialized$1(self);
   }
 
   var possibleConstructorReturn = _possibleConstructorReturn;
@@ -1347,6 +1357,8 @@
     function VapVideo(options) {
       classCallCheck(this, VapVideo);
 
+      this.customEvent = ['frame', 'percentage'];
+
       if (!options.container || !options.src) {
         console.warn('[Alpha video]: options container and src cannot be empty!');
       }
@@ -1585,7 +1597,11 @@
         var 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;
       }
     }, {
@@ -1594,10 +1610,7 @@
         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);
           }
         }
@@ -1655,6 +1668,12 @@
       classCallCheck(this, WebglRenderVap);
 
       _this = _super.call(this, options);
+
+      if (_this.useFrameCallback) {
+        // @ts-ignore
+        _this.animId = _this.video.requestVideoFrameCallback(_this.drawFrame.bind(assertThisInitialized(_this)));
+      }
+
       _this.insType = _this.options.type;
 
       if (instances[_this.insType]) {
@@ -1902,6 +1921,12 @@
       value: function drawFrame(_, info) {
         var _this2 = this;
 
+        var timePoint = info && info.mediaTime >= 0 ? info.mediaTime : this.video.currentTime;
+        var frame = Math.round(timePoint * this.options.fps) + this.options.offset;
+        var frameCbs = this.events['frame'];
+        frameCbs.forEach(function (cb) {
+          cb(frame + 1, timePoint);
+        });
         var gl = this.instance.gl;
 
         if (!gl) {
@@ -1913,8 +1938,6 @@
         gl.clear(gl.COLOR_BUFFER_BIT);
 
         if (this.vapFrameParser) {
-          var timePoint = info && info.mediaTime >= 0 ? info.mediaTime : this.video.currentTime;
-          var frame = Math.round(timePoint * this.options.fps) + this.options.offset;
           var frameData = this.vapFrameParser.getFrame(frame);
           var posArr = [];
 

web/dist/video.d.ts

@@ -7,12 +7,13 @@ export default class VapVideo {
     requestAnim: Function;
     container: HTMLElement;
     video: HTMLVideoElement;
-    private events;
+    protected events: any;
     private _drawFrame;
-    private animId;
-    private useFrameCallback;
+    protected animId: number;
+    protected useFrameCallback: boolean;
     private firstPlaying;
     private setBegin;
+    private customEvent;
     precacheSource(source: any): Promise<string>;
     initVideo(): void;
     drawFrame(_: any, info: any): void;
@@ -23,7 +24,7 @@ export default class VapVideo {
     cancelRequestAnimation(): void;
     destroy(): void;
     clear(): void;
-    on(event: any, callback: EventListenerObject): this;
+    on(event: any, callback: any): this;
     onplaying(): void;
     onpause(): void;
     onended(): void;

web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "video-animation-player",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "webgl动画特效组件",
   "main": "dist/vap.js",
   "scripts": {

web/src/webgl-render-vap.ts

@@ -30,6 +30,10 @@ function computeCoord(x:number, y:number, w:number, h:number, vw:number, vh:numb
 export default class WebglRenderVap extends VapVideo {
   constructor(options:VapConfig) {
     super(options);
+    if ( this.useFrameCallback ) {
+      // @ts-ignore
+      this.animId = this.video.requestVideoFrameCallback( this.drawFrame.bind(this) );
+    }
     this.insType = this.options.type;
     if (instances[this.insType]) {
       this.instance = instances[this.insType]
@@ -68,10 +72,6 @@ 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() {