Merge pull request #2 from Tencent/master

merge master

Android/PlayerProj/animplayer/src/main/java/com/tencent/qgame/animplayer/AnimPlayer.kt

@@ -47,6 +47,8 @@ class AnimPlayer(val animView: AnimView) {
     var isDetachedFromWindow = false
     var isSurfaceAvailable = false
     var startRunnable: Runnable? = null
+    var isStartRunning = false // 启动时运行状态
+
     val configManager = AnimConfigManager(this)
     val pluginManager = AnimPluginManager(this)
 
@@ -68,14 +70,11 @@ class AnimPlayer(val animView: AnimView) {
     }
 
     fun startPlay(fileContainer: FileContainer) {
+        isStartRunning = true
         prepareDecoder()
-        if (isRunning()) {
-            ALog.i(TAG, "is running can not start")
-            return
-        }
-
         if (decoder?.prepareThread() == false) {
             decoder?.onFailed(Constant.REPORT_ERROR_TYPE_CREATE_THREAD, Constant.ERROR_MSG_CREATE_THREAD)
+            isStartRunning = false
             return
         }
         // 在线程中解析配置
@@ -83,6 +82,7 @@ class AnimPlayer(val animView: AnimView) {
             val result = configManager.parseConfig(fileContainer, videoMode, fps)
             if (result != Constant.OK) {
                 decoder?.onFailed(result, Constant.getErrorMsg(result))
+                isStartRunning = false
                 return@post
             }
             ALog.i(TAG, "parse ${configManager.config}")
@@ -99,10 +99,11 @@ class AnimPlayer(val animView: AnimView) {
     private fun innerStartPlay(fileContainer: FileContainer) {
         synchronized(AnimPlayer::class.java) {
             if (isSurfaceAvailable) {
+                isStartRunning = false
                 decoder?.start(fileContainer)
                 audioPlayer?.start(fileContainer)
             } else {
-                 startRunnable = Runnable {
+                startRunnable = Runnable {
                     innerStartPlay(fileContainer)
                 }
                 animView.prepareTextureView()
@@ -116,7 +117,9 @@ class AnimPlayer(val animView: AnimView) {
     }
 
     fun isRunning(): Boolean {
-        return (decoder?.isRunning ?: false) || configManager.isParsingConfig
+        return isStartRunning // 启动过程运行状态
+                || (decoder?.isRunning ?: false) // 解码过程运行状态
+
     }
 
     private fun prepareDecoder() {

Android/PlayerProj/animplayer/src/main/java/com/tencent/qgame/animplayer/AnimView.kt

@@ -223,8 +223,8 @@ open class AnimView @JvmOverloads constructor(context: Context, attrs: Attribute
                 ALog.e(TAG, "AnimView is GONE, can't play")
                 return@ui
             }
-            lastFile = fileContainer
             if (player?.isRunning() == false) {
+                lastFile = fileContainer
                 player?.startPlay(fileContainer)
             } else {
                 ALog.i(TAG, "is running can not start")

Android/PlayerProj/animplayer/src/main/java/com/tencent/qgame/animplayer/HardDecoder.kt

@@ -183,6 +183,7 @@ class HardDecoder(player: AnimPlayer) : Decoder(player), SurfaceTexture.OnFrameA
                         var loop = 0
                         if (bufferInfo.flags and MediaCodec.BUFFER_FLAG_END_OF_STREAM != 0) {
                             loop = --playLoop
+                            player.playLoop = playLoop // 消耗loop次数 自动恢复后能有正确的loop次数
                             outputDone = playLoop <= 0
                         }
                         val doRender = !outputDone

QGVAPlayer.podspec

@@ -16,7 +16,7 @@ Pod::Spec.new do |spec|
   #
 
   spec.name         = "QGVAPlayer"
-  spec.version      = "2.2.1"
+  spec.version      = "1.0.2"
   spec.summary      = "video animation player."
   spec.platform     = :ios, "8.0"
 
@@ -27,7 +27,7 @@ Pod::Spec.new do |spec|
   #   * Finally, don't worry about the indent, CocoaPods strips it!
   spec.description  = "video animation player - 高效的特效动画播放组件."
 
-  spec.homepage     = ""
+  spec.homepage     = "https://github.com/Tencent/vap"
   # spec.screenshots  = "www.example.com/screenshots_1.gif", "www.example.com/screenshots_2.gif"
 
 
@@ -38,13 +38,14 @@ Pod::Spec.new do |spec|
   #  Popular ones are 'MIT', 'BSD' and 'Apache License, Version 2.0'.
   #
 
-  spec.license      = {
-        :type => 'Copyright',
-        :text => <<-LICENSE
-              © 1998-2019 Tencent. All rights reserved.
-        LICENSE
-    }
-  # spec.license      = { :type => "MIT", :file => "FILE_LICENSE" }
+  #spec.license      = {
+        #:type => 'Copyright',
+        #:text => <<-LICENSE
+              #© 1998-2019 Tencent. All rights reserved.
+        #LICENSE
+    #}
+  #spec.license      = { :type => "MIT", :file => "FILE_LICENSE" }
+  spec.license       = 'MIT'
 
 # 集成源码
     puts "Pod Install #{spec.name} Source"
@@ -59,10 +60,8 @@ Pod::Spec.new do |spec|
   #  profile URL.
   #
 
-  spec.author             = { "chanceguo" => "chanceguo@tencent.com" }
-  # Or just: spec.author    = "chanceguo"
-  # spec.authors            = { "chanceguo" => "chanceguo@tencent.com" }
-  # spec.social_media_url   = "https://twitter.com/chanceguo"
+  spec.author             = { "mlzhangyu" => "mlzhangyu@gmail.com" }
+  # Or just: spec.author    = "mlzhangyu"
 
   # ――― Platform Specifics ――――――――――――――――――――――――――――――――――――――――――――――――――――――― #
   #
@@ -86,7 +85,7 @@ Pod::Spec.new do |spec|
   #  Supports git, hg, bzr, svn and HTTP.
   #
 
-  spec.source       = { :git => "", :tag => "#{spec.version}"}
+  spec.source       = { :git => "https://github.com/Tencent/vap.git", :tag => "#{spec.version}"}
 
 
   # ――― Source Code ―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――― #
@@ -97,33 +96,35 @@ Pod::Spec.new do |spec|
   #  Not including the public_header_files will make all headers public.
   #
 
-  spec.subspec 'Shaders' do |ss|
-    ss.source_files = 'iOS/QGVAPlayer/QGVAPlayer/Shaders/**/*'
-  end
-
-  spec.subspec 'Classes' do |ss|
-    ss.source_files  = 'iOS/QGVAPlayer/QGVAPlayer/Classes/*.{h,m}'
-      ss.subspec 'Models' do |sss|
-        sss.source_files = 'iOS/QGVAPlayer/QGVAPlayer/Classes/Models/**/*'
-      end
-      ss.subspec 'Views' do |sss|
-        sss.source_files = 'iOS/QGVAPlayer/QGVAPlayer/Classes/Views/**/*'
-      end
-      ss.subspec 'Controllers' do |sss|
-        sss.source_files = 'iOS/QGVAPlayer/QGVAPlayer/Classes/Controllers/**/*'
-      end
-      ss.subspec 'MP4Parser' do |sss|
-        sss.source_files = 'iOS/QGVAPlayer/QGVAPlayer/Classes/MP4Parser/**/*'
-      end
-      ss.subspec 'Utils' do |sss|
-        sss.source_files = 'iOS/QGVAPlayer/QGVAPlayer/Classes/Utils/**/*'
-      end
-  end
+  spec.source_files = 'iOS/QGVAPlayer/QGVAPlayer/**/*.{h,m}'
+
+  # spec.subspec 'Shaders' do |ss|
+  #   ss.source_files = 'iOS/QGVAPlayer/QGVAPlayer/Shaders/**/*.{h,m}'
+  # end
+
+  # spec.subspec 'Classes' do |ss|
+  #   ss.source_files  = 'iOS/QGVAPlayer/QGVAPlayer/Classes/*.{h,m}'
+  #     ss.subspec 'Models' do |sss|
+  #       sss.source_files = 'iOS/QGVAPlayer/QGVAPlayer/Classes/Models/**/*.{h,m}'
+  #     end
+  #     ss.subspec 'Views' do |sss|
+  #       sss.source_files = 'iOS/QGVAPlayer/QGVAPlayer/Classes/Views/**/*.{h,m}'
+  #     end
+  #     ss.subspec 'Controllers' do |sss|
+  #       sss.source_files = 'iOS/QGVAPlayer/QGVAPlayer/Classes/Controllers/**/*.{h,m}'
+  #     end
+  #     ss.subspec 'MP4Parser' do |sss|
+  #       sss.source_files = 'iOS/QGVAPlayer/QGVAPlayer/Classes/MP4Parser/**/*.{h,m}'
+  #     end
+  #     ss.subspec 'Utils' do |sss|
+  #       sss.source_files = 'iOS/QGVAPlayer/QGVAPlayer/Classes/Utils/**/*.{h,m}'
+  #     end
+  # end
 
 
   # spec.exclude_files = "Classes/Exclude"
 
-  spec.public_header_files = "iOS/QGVAPlayer/QGVAPlayer/**/*.h"
+  #spec.public_header_files = "iOS/QGVAPlayer/QGVAPlayer/**/*.h"
 
 
   # ――― Resources ―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――― #
@@ -158,7 +159,7 @@ Pod::Spec.new do |spec|
   #  If your library depends on compiler flags you can set them in the xcconfig hash
   #  where they will only apply to your library. If you depend on other Podspecs
   #  you can include multiple dependencies to ensure it works.
-  spec.user_target_xcconfig  = { 'OTHER_LDFLAGS' => "-force_load ${BUILT_PRODUCTS_DIR}/#{spec.name}/lib#{spec.name}.a" }
+  #spec.user_target_xcconfig  = { 'OTHER_LDFLAGS' => "-force_load ${BUILT_PRODUCTS_DIR}/#{spec.name}/lib#{spec.name}.a" }
 
   spec.requires_arc = true
 

web/demo/package.json

@@ -5,7 +5,7 @@
   "author": "hujinliang <1617451312@qq.com>",
   "private": true,
   "scripts": {
-    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "dev": "webpack-dev-server --inline --progress --disable-host-check --config build/webpack.dev.conf.js",
     "start": "npm run dev",
     "lint": "eslint --ext .js,.vue src",
     "build": "node build/build.js"

web/demo/src/components/HelloWorld.vue

@@ -38,8 +38,9 @@ export default {
         imgUser: '//shp.qlogo.cn/pghead/Q3auHgzwzM6TmnCKHzBcyxVPEJ5t4Ria7H18tYJyM40c/0',
         imgAnchor: '//shp.qlogo.cn/pghead/PiajxSqBRaEKRa1v87G8wh37GibiaosmfU334GBWgk7aC8/140',
         textUser: 'user1',
-        textAnchor: 'user2'
-      } : {}))
+        textAnchor: 'user2',
+        type: 2
+      } : {type: 1}))
         .on('playing', () => {
           that.access = false
           console.log('playing')

web/dist/gl-util.d.ts

@@ -0,0 +1,4 @@
+export declare function createShader(gl: any, type: any, source: any): any;
+export declare function createProgram(gl: any, vertexShader: any, fragmentShader: any): any;
+export declare function createTexture(gl: any, index: number, imgData?: TexImageSource): any;
+export declare function cleanWebGL(gl: any, shaders: any, program: any, textures: any, buffers: any): void;

web/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { VapConfig } from "./type";
+import WebglRenderVap from './webgl-render-vap';
+/**
+ * @param options
+ * @constructor
+ * @return {null}
+ */
+export default function (options: VapConfig): WebglRenderVap;

web/dist/type.d.ts

@@ -0,0 +1,13 @@
+export interface VapConfig {
+    container: HTMLElement;
+    src: string;
+    config: string | {
+        [key: string]: any;
+    };
+    width: number;
+    height: number;
+    fps?: number;
+    mute?: boolean;
+    precache?: boolean;
+    [key: string]: any;
+}

web/dist/vap-frame-parser.d.ts

@@ -0,0 +1,32 @@
+export default class FrameParser {
+    constructor(source: any, headData: any);
+    private config;
+    private headData;
+    private frame;
+    private textureMap;
+    private canvas;
+    private ctx;
+    private srcData;
+    init(): Promise<this>;
+    initCanvas(): void;
+    loadImg(url: string): Promise<unknown>;
+    parseSrc(dataJson: any): Promise<[unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown, unknown]>;
+    /**
+     * 下载json文件
+     * @param jsonUrl json外链
+     * @returns {Promise}
+     */
+    getConfigBySrc(jsonUrl: string): Promise<unknown>;
+    /**
+     * 文字转换图片
+     * @param {*} param0
+     */
+    makeTextImg({ textStr, w, h, color, style }: {
+        textStr: any;
+        w: any;
+        h: any;
+        color: any;
+        style: any;
+    }): ImageData;
+    getFrame(frame: any): any;
+}

web/dist/vap.js

@@ -828,7 +828,7 @@
   }
   });
 
-  var regenerator = runtime_1;
+  var D__project_vapSource_web_node_modules__babel_runtime_regenerator = runtime_1;
 
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
@@ -972,45 +972,56 @@
 
   var possibleConstructorReturn = _possibleConstructorReturn;
 
-  /*! *****************************************************************************
-  Copyright (c) Microsoft Corporation.
-
-  Permission to use, copy, modify, and/or distribute this software for any
-  purpose with or without fee is hereby granted.
-
-  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-  PERFORMANCE OF THIS SOFTWARE.
-  ***************************************************************************** */
-
-  function __awaiter(thisArg, _arguments, P, generator) {
-      function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-      return new (P || (P = Promise))(function (resolve, reject) {
-          function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-          function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-          function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-          step((generator = generator.apply(thisArg, _arguments || [])).next());
-      });
+  var getPrototypeOf$1 = createCommonjsModule(function (module) {
+  function _getPrototypeOf(o) {
+    module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+      return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _getPrototypeOf(o);
+  }
+
+  module.exports = _getPrototypeOf;
+  });
+
+  /*! *****************************************************************************
+  Copyright (c) Microsoft Corporation.
+
+  Permission to use, copy, modify, and/or distribute this software for any
+  purpose with or without fee is hereby granted.
+
+  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+  PERFORMANCE OF THIS SOFTWARE.
+  ***************************************************************************** */
+
+  function __awaiter(thisArg, _arguments, P, generator) {
+      function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+      return new (P || (P = Promise))(function (resolve, reject) {
+          function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+          function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+          function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+          step((generator = generator.apply(thisArg, _arguments || [])).next());
+      });
   }
 
-  /*
-   * Tencent is pleased to support the open source community by making vap available.
-   *
-   * Copyright (C) 2020 THL A29 Limited, a Tencent company.  All rights reserved.
-   *
-   * Licensed under the MIT License (the "License"); you may not use this file except in
-   * compliance with the License. You may obtain a copy of the License at
-   *
-   * http://opensource.org/licenses/MIT
-   *
-   * Unless required by applicable law or agreed to in writing, software distributed under the License is
-   * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
-   * either express or implied. See the License for the specific language governing permissions and
-   * limitations under the License.
+  /*
+   * Tencent is pleased to support the open source community by making vap available.
+   *
+   * Copyright (C) 2020 THL A29 Limited, a Tencent company.  All rights reserved.
+   *
+   * Licensed under the MIT License (the "License"); you may not use this file except in
+   * compliance with the License. You may obtain a copy of the License at
+   *
+   * http://opensource.org/licenses/MIT
+   *
+   * Unless required by applicable law or agreed to in writing, software distributed under the License is
+   * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+   * either express or implied. See the License for the specific language governing permissions and
+   * limitations under the License.
    */
 
   var FrameParser = /*#__PURE__*/function () {
@@ -1026,8 +1037,8 @@
     createClass(FrameParser, [{
       key: "init",
       value: function init() {
-        return __awaiter(this, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee() {
-          return regenerator.wrap(function _callee$(_context) {
+        return __awaiter(this, void 0, void 0, /*#__PURE__*/D__project_vapSource_web_node_modules__babel_runtime_regenerator.mark(function _callee() {
+          return D__project_vapSource_web_node_modules__babel_runtime_regenerator.wrap(function _callee$(_context) {
             while (1) {
               switch (_context.prev = _context.next) {
                 case 0:
@@ -1098,10 +1109,10 @@
 
         var src = this.srcData = {};
         return Promise.all((dataJson.src || []).map(function (item) {
-          return __awaiter(_this, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee2() {
+          return __awaiter(_this, void 0, void 0, /*#__PURE__*/D__project_vapSource_web_node_modules__babel_runtime_regenerator.mark(function _callee2() {
             var _this2 = this;
 
-            return regenerator.wrap(function _callee2$(_context2) {
+            return D__project_vapSource_web_node_modules__babel_runtime_regenerator.wrap(function _callee2$(_context2) {
               while (1) {
                 switch (_context2.prev = _context2.next) {
                   case 0:
@@ -1165,10 +1176,10 @@
           }));
         }));
       }
-      /**
-       * 下载json文件
-       * @param jsonUrl json外链
-       * @returns {Promise}
+      /**
+       * 下载json文件
+       * @param jsonUrl json外链
+       * @returns {Promise}
        */
 
     }, {
@@ -1191,9 +1202,9 @@
           xhr.send();
         });
       }
-      /**
-       * 文字转换图片
-       * @param {*} param0
+      /**
+       * 文字转换图片
+       * @param {*} param0
        */
 
     }, {
@@ -1236,20 +1247,20 @@
     return FrameParser;
   }();
 
-  /*
-   * Tencent is pleased to support the open source community by making vap available.
-   *
-   * Copyright (C) 2020 THL A29 Limited, a Tencent company.  All rights reserved.
-   *
-   * Licensed under the MIT License (the "License"); you may not use this file except in
-   * compliance with the License. You may obtain a copy of the License at
-   *
-   * http://opensource.org/licenses/MIT
-   *
-   * Unless required by applicable law or agreed to in writing, software distributed under the License is
-   * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
-   * either express or implied. See the License for the specific language governing permissions and
-   * limitations under the License.
+  /*
+   * Tencent is pleased to support the open source community by making vap available.
+   *
+   * Copyright (C) 2020 THL A29 Limited, a Tencent company.  All rights reserved.
+   *
+   * Licensed under the MIT License (the "License"); you may not use this file except in
+   * compliance with the License. You may obtain a copy of the License at
+   *
+   * http://opensource.org/licenses/MIT
+   *
+   * Unless required by applicable law or agreed to in writing, software distributed under the License is
+   * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+   * either express or implied. See the License for the specific language governing permissions and
+   * limitations under the License.
    */
   function createShader(gl, type, source) {
     var shader = gl.createShader(type);
@@ -1382,6 +1393,8 @@
         video.crossOrigin = 'anonymous';
         video.autoplay = false;
         video.preload = 'auto';
+        video.setAttribute('playsinline', '');
+        video.setAttribute('webkit-playsinline', '');
 
         if (options.mute) {
           video.muted = true;
@@ -1525,7 +1538,7 @@
     return VapVideo;
   }();
 
-  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
+  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = getPrototypeOf$1(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf$1(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
 
   function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
   var clearTimer = null;
@@ -1568,8 +1581,8 @@
     createClass(WebglRenderVap, [{
       key: "init",
       value: function init() {
-        return __awaiter(this, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee() {
-          return regenerator.wrap(function _callee$(_context) {
+        return __awaiter(this, void 0, void 0, /*#__PURE__*/D__project_vapSource_web_node_modules__babel_runtime_regenerator.mark(function _callee() {
+          return D__project_vapSource_web_node_modules__babel_runtime_regenerator.wrap(function _callee$(_context) {
             while (1) {
               switch (_context.prev = _context.next) {
                 case 0:
@@ -1666,8 +1679,8 @@
           return gl;
         }
       }
-      /**
-       * 顶点着色器
+      /**
+       * 顶点着色器
        */
 
     }, {
@@ -1676,8 +1689,8 @@
         var gl = this.instance.gl;
         return createShader(gl, gl.VERTEX_SHADER, "attribute vec2 a_position; // \u63A5\u53D7\u9876\u70B9\u5750\u6807\n             attribute vec2 a_texCoord; // \u63A5\u53D7\u7EB9\u7406\u5750\u6807\n             attribute vec2 a_alpha_texCoord; // \u63A5\u53D7\u7EB9\u7406\u5750\u6807\n             varying vec2 v_alpha_texCoord; // \u63A5\u53D7\u7EB9\u7406\u5750\u6807\n             varying   vec2 v_texcoord; // \u4F20\u9012\u7EB9\u7406\u5750\u6807\u7ED9\u7247\u5143\u7740\u8272\u5668\n             void main(void){\n                gl_Position = vec4(a_position, 0.0, 1.0); // \u8BBE\u7F6E\u5750\u6807\n                v_texcoord = a_texCoord; // \u8BBE\u7F6E\u7EB9\u7406\u5750\u6807\n                v_alpha_texCoord = a_alpha_texCoord; // \u8BBE\u7F6E\u7EB9\u7406\u5750\u6807\n             }");
       }
-      /**
-       * 片元着色器
+      /**
+       * 片元着色器
        */
 
     }, {
@@ -1692,13 +1705,15 @@
 
         if (textureSize > 0) {
           var imgColor = [];
+          var samplers = [];
 
           for (var i = 0; i < textureSize; i++) {
-            imgColor.push("if(ndx == ".concat(i, "){\n                        color = texture2D(textures[").concat(i, "],uv);\n                    }"));
+            imgColor.push("if(ndx == ".concat(i + 1, "){\n                        color = texture2D(u_image").concat(i + 1, ",uv);\n                    }"));
+            samplers.push("uniform sampler2D u_image".concat(i + 1, ";"));
           }
 
-          sourceUniform = "\n            uniform sampler2D u_image[".concat(textureSize, "];\n            uniform float image_pos[").concat(textureSize * PER_SIZE, "];\n            vec4 getSampleFromArray(sampler2D textures[").concat(textureSize, "], int ndx, vec2 uv) {\n                vec4 color;\n                ").concat(imgColor.join(' else '), "\n                return color;\n            }\n            ");
-          sourceTexure = "\n            vec4 srcColor,maskColor;\n            vec2 srcTexcoord,maskTexcoord;\n            int srcIndex;\n            float x1,x2,y1,y2,mx1,mx2,my1,my2; //\u663E\u793A\u7684\u533A\u57DF\n\n            for(int i=0;i<".concat(textureSize * PER_SIZE, ";i+= ").concat(PER_SIZE, "){\n                if ((int(image_pos[i]) > 0)) {\n                  srcIndex = int(image_pos[i]);\n    \n                    x1 = image_pos[i+1];\n                    x2 = image_pos[i+2];\n                    y1 = image_pos[i+3];\n                    y2 = image_pos[i+4];\n                    \n                    mx1 = image_pos[i+5];\n                    mx2 = image_pos[i+6];\n                    my1 = image_pos[i+7];\n                    my2 = image_pos[i+8];\n    \n    \n                    if (v_texcoord.s>x1 && v_texcoord.s<x2 && v_texcoord.t>y1 && v_texcoord.t<y2) {\n                        srcTexcoord = vec2((v_texcoord.s-x1)/(x2-x1),(v_texcoord.t-y1)/(y2-y1));\n                         maskTexcoord = vec2(mx1+srcTexcoord.s*(mx2-mx1),my1+srcTexcoord.t*(my2-my1));\n                         srcColor = getSampleFromArray(u_image,srcIndex,srcTexcoord);\n                         maskColor = texture2D(u_image_video, maskTexcoord);\n                         srcColor.a = srcColor.a*(maskColor.r);\n                      \n                         bgColor = vec4(srcColor.rgb*srcColor.a,srcColor.a) + (1.0-srcColor.a)*bgColor;\n                      \n                    }   \n                }\n            }\n            ");
+          sourceUniform = "\n            ".concat(samplers.join('\n'), "\n            uniform float image_pos[").concat(textureSize * PER_SIZE, "];\n            vec4 getSampleFromArray(int ndx, vec2 uv) {\n                vec4 color;\n                ").concat(imgColor.join(' else '), "\n                return color;\n            }\n            ");
+          sourceTexure = "\n            vec4 srcColor,maskColor;\n            vec2 srcTexcoord,maskTexcoord;\n            int srcIndex;\n            float x1,x2,y1,y2,mx1,mx2,my1,my2; //\u663E\u793A\u7684\u533A\u57DF\n\n            for(int i=0;i<".concat(textureSize * PER_SIZE, ";i+= ").concat(PER_SIZE, "){\n                if ((int(image_pos[i]) > 0)) {\n                  srcIndex = int(image_pos[i]);\n    \n                    x1 = image_pos[i+1];\n                    x2 = image_pos[i+2];\n                    y1 = image_pos[i+3];\n                    y2 = image_pos[i+4];\n                    \n                    mx1 = image_pos[i+5];\n                    mx2 = image_pos[i+6];\n                    my1 = image_pos[i+7];\n                    my2 = image_pos[i+8];\n    \n    \n                    if (v_texcoord.s>x1 && v_texcoord.s<x2 && v_texcoord.t>y1 && v_texcoord.t<y2) {\n                        srcTexcoord = vec2((v_texcoord.s-x1)/(x2-x1),(v_texcoord.t-y1)/(y2-y1));\n                         maskTexcoord = vec2(mx1+srcTexcoord.s*(mx2-mx1),my1+srcTexcoord.t*(my2-my1));\n                         srcColor = getSampleFromArray(srcIndex,srcTexcoord);\n                         maskColor = texture2D(u_image_video, maskTexcoord);\n                         srcColor.a = srcColor.a*(maskColor.r);\n                      \n                         bgColor = vec4(srcColor.rgb*srcColor.a,srcColor.a) + (1.0-srcColor.a)*bgColor;\n                      \n                    }   \n                }\n            }\n            ");
         }
 
         var fragmentSharder = "\n        precision lowp float;\n        varying vec2 v_texcoord;\n        varying vec2 v_alpha_texCoord;\n        uniform sampler2D u_image_video;\n        ".concat(sourceUniform, "\n        \n        void main(void) {\n            vec4 bgColor = ").concat(bgColor, "\n            ").concat(sourceTexure, "\n            // bgColor = texture2D(u_image[0], v_texcoord);\n            gl_FragColor = bgColor;\n        }\n        ");
@@ -1720,7 +1735,7 @@
           var resource = resources[key];
           this.textures.push(createTexture(gl, i, resource.img));
 
-          var _sampler = gl.getUniformLocation(this.program, "u_image[".concat(i, "]"));
+          var _sampler = gl.getUniformLocation(this.program, "u_image".concat(i));
 
           gl.uniform1i(_sampler, i);
           this.vapFrameParser.textureMap[resource.srcId] = i++;
@@ -1793,7 +1808,7 @@
         var gl = this.instance.gl;
 
         if (!gl) {
-          get(getPrototypeOf(WebglRenderVap.prototype), "drawFrame", this).call(this);
+          get(getPrototypeOf$1(WebglRenderVap.prototype), "drawFrame", this).call(this);
 
           return;
         }
@@ -1841,7 +1856,7 @@
 
         gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 
-        get(getPrototypeOf(WebglRenderVap.prototype), "drawFrame", this).call(this);
+        get(getPrototypeOf$1(WebglRenderVap.prototype), "drawFrame", this).call(this);
       }
     }, {
       key: "destroy",
@@ -1861,7 +1876,7 @@
         } // glUtil.cleanWebGL(gl, this.shaders, this.program, this.textures, this.buffers)
 
 
-        get(getPrototypeOf(WebglRenderVap.prototype), "destroy", this).call(this);
+        get(getPrototypeOf$1(WebglRenderVap.prototype), "destroy", this).call(this);
 
         this.clearMemoryCache();
       }
@@ -1882,10 +1897,10 @@
   }(VapVideo);
 
   var isCanWebGL;
-  /**
-   * @param options
-   * @constructor
-   * @return {null}
+  /**
+   * @param options
+   * @constructor
+   * @return {null}
    */
 
   function index (options) {

web/dist/video.d.ts

@@ -0,0 +1,27 @@
+/// <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;
+}

web/dist/webgl-render-vap.d.ts

@@ -0,0 +1,34 @@
+import { VapConfig } from "./type";
+import VapVideo from './video';
+export default class WebglRenderVap extends VapVideo {
+    constructor(options: VapConfig);
+    private insType;
+    private textures;
+    private buffers;
+    private shaders;
+    private vapFrameParser;
+    private resources;
+    private instance;
+    private program;
+    private videoTexture;
+    private aPosition;
+    private aTexCoord;
+    private aAlphaTexCoord;
+    private _imagePos;
+    init(): Promise<void>;
+    setCanvas(): void;
+    initWebGL(): any;
+    /**
+     * 顶点着色器
+     */
+    initVertexShader(): any;
+    /**
+     * 片元着色器
+     */
+    initFragmentShader(): any;
+    initTexture(): void;
+    initVideoTexture(): void;
+    drawFrame(): void;
+    destroy(): void;
+    clearMemoryCache(): void;
+}

web/package.json

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

web/src/video.ts

@@ -107,6 +107,8 @@ export default class VapVideo {
     video.crossOrigin = 'anonymous';
     video.autoplay = false;
     video.preload = 'auto';
+    video.setAttribute('playsinline','')
+    video.setAttribute('webkit-playsinline','')
     if(options.mute){
       video.muted = true;
       video.volume = 0;

web/src/webgl-render-vap.ts

@@ -144,18 +144,20 @@ export default class WebglRenderVap extends VapVideo {
     let sourceUniform = '';
     if (textureSize > 0) {
       const imgColor = [];
+      const samplers = [];
       for (let i = 0; i < textureSize; i++) {
         imgColor.push(
-          `if(ndx == ${i}){
-                        color = texture2D(textures[${i}],uv);
+          `if(ndx == ${i + 1}){
+                        color = texture2D(u_image${i + 1},uv);
                     }`
         )
+        samplers.push(`uniform sampler2D u_image${i + 1};`)
       }
 
       sourceUniform = `
-            uniform sampler2D u_image[${textureSize}];
+            ${samplers.join('\n')}
             uniform float image_pos[${textureSize * PER_SIZE}];
-            vec4 getSampleFromArray(sampler2D textures[${textureSize}], int ndx, vec2 uv) {
+            vec4 getSampleFromArray(int ndx, vec2 uv) {
                 vec4 color;
                 ${imgColor.join(' else ')}
                 return color;
@@ -185,7 +187,7 @@ export default class WebglRenderVap extends VapVideo {
                     if (v_texcoord.s>x1 && v_texcoord.s<x2 && v_texcoord.t>y1 && v_texcoord.t<y2) {
                         srcTexcoord = vec2((v_texcoord.s-x1)/(x2-x1),(v_texcoord.t-y1)/(y2-y1));
                          maskTexcoord = vec2(mx1+srcTexcoord.s*(mx2-mx1),my1+srcTexcoord.t*(my2-my1));
-                         srcColor = getSampleFromArray(u_image,srcIndex,srcTexcoord);
+                         srcColor = getSampleFromArray(srcIndex,srcTexcoord);
                          maskColor = texture2D(u_image_video, maskTexcoord);
                          srcColor.a = srcColor.a*(maskColor.r);
                       
@@ -224,7 +226,7 @@ export default class WebglRenderVap extends VapVideo {
     for (const key in resources) {
       const resource = resources[key];
       this.textures.push(glUtil.createTexture(gl, i, resource.img));
-      const sampler = gl.getUniformLocation(this.program, `u_image[${i}]`);
+      const sampler = gl.getUniformLocation(this.program, `u_image${i}`);
       gl.uniform1i(sampler, i);
       this.vapFrameParser.textureMap[resource.srcId] = i++;
     }