Merge pull request #39 from langyuxiansheng/dev_v1.2.8

Dev v1.2.8

README.md

@@ -1,5 +1,5 @@
 # vue-alipayer-v2
-## 感谢每一位开源的开发者. 这是一个基于Alipayer 开发并封装成vue组件的播放器.
+## 感谢每一位支持开源的朋友. 这是一个基于Alipayer 开发并封装成vue组件的播放器.
 ### vue中使用Alipayer,播放rtmp,m3u8,mp4视频
 #### [本项目在线演示](https://langyuxiansheng.github.io/vue-aliplayer-v2/)
 #### [阿里云播放器在线演示](https://player.alicdn.com/aliplayer/index.html)
@@ -422,7 +422,9 @@ npm run lint
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
 
-## 更新日志
+## 更新日志 
+
+> v1.2.8  更换底层默认sdk版本为2.9.3 修复options 遇到 update loop 错误 感谢"litmonw"网友的反馈与建议.
 
 > v1.2.7 更换底层默认sdk版本为2.9.1的版本. 更新线上演示demo的选项，感谢网友“Ghost23333”的demo
 

examples/App.vue

@@ -1,7 +1,7 @@
 <template>
     <div id="app">
         <template v-if="!isShowMultiple && show">
-            <vue-aliplayer-v2 :source="source" ref="VueAliplayerV2" :options="options" />
+            <vue-aliplayer-v2 :source="source" ref="VueAliplayerV2" :options="options"/>
         </template>
         <div v-if="isShowMultiple && show" class="show-multiple">
             <template v-for="x in 5">
@@ -59,8 +59,44 @@ export default {
             options: {
                 // source:'//player.alicdn.com/video/aliyunmedia.mp4',
                 isLive: !true,   //切换为直播流的时候必填
-                useFlashPrism: false,    //指定为flash
+                skinLayout: [
-                disableSeek: true //禁用进度条的Seek，默认值为false
+                {
+                    'name': 'bigPlayButton',
+                    'align': 'blabs',
+                    'x': 30,
+                    'y': 80
+                },
+                {
+                    'name': 'infoDisplay'
+                },
+                {
+                    'name': 'controlBar',
+                    'align': 'blabs',
+                    'x': 0,
+                    'y': 0,
+                    'children': [
+                        {
+                            'name': 'liveDisplay',
+                            'align': 'tlabs',
+                            'x': 15,
+                            'y': 6
+                        },
+                        {
+                            'name': 'fullScreenButton',
+                            'align': 'tr',
+                            'x': 10,
+                            'y': 10
+                        },
+                        {
+                            'name': 'volume',
+                            'align': 'tr',
+                            'x': 5,
+                            'y': 10
+                        }
+                    ]
+                }]
+                // useFlashPrism: false,    //指定为flash
+                // disableSeek: true //禁用进度条的Seek，默认值为false
             },
             source: '//player.alicdn.com/video/aliyunmedia.mp4',
             // source: '//ivi.bupt.edu.cn/hls/cctv1.m3u8',

lib/vue-aliplayer-v2.common.js

@@ -142,18 +142,35 @@ if (typeof window !== 'undefined') {
 // EXTERNAL MODULE: ./node_modules/_core-js@2.6.10@core-js/modules/es6.function.name.js
 var es6_function_name = __webpack_require__("7cfd");
 
-// CONCATENATED MODULE: ./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"05d0d90a-vue-loader-template"}!./node_modules/_vue-loader@15.7.2@vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.7.2@vue-loader/lib??vue-loader-options!./packages/AliplayerV2/index.vue?vue&type=template&id=3905f692&
+// CONCATENATED MODULE: ./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"05d0d90a-vue-loader-template"}!./node_modules/_vue-loader@15.7.2@vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.7.2@vue-loader/lib??vue-loader-options!./packages/AliplayerV2/index.vue?vue&type=template&id=54014060&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":_vm.playerId}})}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./packages/AliplayerV2/index.vue?vue&type=template&id=3905f692&
+// CONCATENATED MODULE: ./packages/AliplayerV2/index.vue?vue&type=template&id=54014060&
 
+// CONCATENATED MODULE: ./node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/esm/typeof.js
+function _typeof2(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof2(obj); }
+
+function _typeof(obj) {
+  if (typeof Symbol === "function" && _typeof2(Symbol.iterator) === "symbol") {
+    _typeof = function _typeof(obj) {
+      return _typeof2(obj);
+    };
+  } else {
+    _typeof = function _typeof(obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : _typeof2(obj);
+    };
+  }
+
+  return _typeof(obj);
+}
 // EXTERNAL MODULE: ./node_modules/_core-js@2.6.10@core-js/modules/es6.regexp.to-string.js
 var es6_regexp_to_string = __webpack_require__("cc1d");
 
 // CONCATENATED MODULE: ./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--12-0!./node_modules/_thread-loader@2.1.3@thread-loader/dist/cjs.js!./node_modules/_babel-loader@8.0.6@babel-loader/lib!./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.7.2@vue-loader/lib??vue-loader-options!./packages/AliplayerV2/index.vue?vue&type=script&lang=js&
 
+
 //
 //
 //
@@ -178,13 +195,13 @@ var es6_regexp_to_string = __webpack_require__("cc1d");
       //css版本源
       required: false,
       type: [String],
-      default: "https://g.alicdn.com/de/prismplayer/2.9.1/skins/default/aliplayer-min.css"
+      default: "https://g.alicdn.com/de/prismplayer/2.9.3/skins/default/aliplayer-min.css"
     },
     scriptSrc: {
       //js版本源
       required: false,
       type: [String],
-      default: "https://g.alicdn.com/de/prismplayer/2.9.1/aliplayer-min.js"
+      default: "https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js"
     }
   },
   data: function data() {
@@ -196,7 +213,9 @@ var es6_regexp_to_string = __webpack_require__("cc1d");
         id: null,
         //播放器的ID
         width: '100%',
-        autoplay: true // isLive: true,
+        autoplay: true,
+        skinLayout: false,
+        progressMarkers: false // isLive: true,
         //支持播放地址播放,此播放优先级最高
         // source: 'rtmp://182.145.195.238:1935/hls/1194076936807170050',
 
@@ -362,7 +381,7 @@ var es6_regexp_to_string = __webpack_require__("cc1d");
       var _this4 = this;
 
       if (typeof window.Aliplayer != 'undefined') {
-        var options = this.options;
+        var options = this.deepCloneObject(this.options);
 
         if (options) {
           for (var key in options) {
@@ -666,6 +685,30 @@ var es6_regexp_to_string = __webpack_require__("cc1d");
      */
     off: function off(ev, handle) {
       this.player && this.player.off(ev, handle);
+    },
+
+    /**
+     * 深度拷贝
+     * @param {*} obj
+     */
+    deepCloneObject: function deepCloneObject(obj) {
+      var objClone = Array.isArray(obj) ? [] : {};
+
+      if (obj && _typeof(obj) === 'object') {
+        for (var key in obj) {
+          if (obj.hasOwnProperty(key)) {
+            //判断ojb子元素是否为对象，如果是，递归复制
+            if (obj[key] && _typeof(obj[key]) === 'object') {
+              objClone[key] = this.deepCloneObject(obj[key]);
+            } else {
+              //如果不是，简单复制
+              objClone[key] = obj[key];
+            }
+          }
+        }
+      }
+
+      return objClone;
     }
   },
   beforeDestroy: function beforeDestroy() {

lib/vue-aliplayer-v2.umd.js

@@ -151,18 +151,35 @@ if (typeof window !== 'undefined') {
 // EXTERNAL MODULE: ./node_modules/_core-js@2.6.10@core-js/modules/es6.function.name.js
 var es6_function_name = __webpack_require__("7cfd");
 
-// CONCATENATED MODULE: ./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"05d0d90a-vue-loader-template"}!./node_modules/_vue-loader@15.7.2@vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.7.2@vue-loader/lib??vue-loader-options!./packages/AliplayerV2/index.vue?vue&type=template&id=3905f692&
+// CONCATENATED MODULE: ./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"05d0d90a-vue-loader-template"}!./node_modules/_vue-loader@15.7.2@vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.7.2@vue-loader/lib??vue-loader-options!./packages/AliplayerV2/index.vue?vue&type=template&id=54014060&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":_vm.playerId}})}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./packages/AliplayerV2/index.vue?vue&type=template&id=3905f692&
+// CONCATENATED MODULE: ./packages/AliplayerV2/index.vue?vue&type=template&id=54014060&
 
+// CONCATENATED MODULE: ./node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/esm/typeof.js
+function _typeof2(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof2(obj); }
+
+function _typeof(obj) {
+  if (typeof Symbol === "function" && _typeof2(Symbol.iterator) === "symbol") {
+    _typeof = function _typeof(obj) {
+      return _typeof2(obj);
+    };
+  } else {
+    _typeof = function _typeof(obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : _typeof2(obj);
+    };
+  }
+
+  return _typeof(obj);
+}
 // EXTERNAL MODULE: ./node_modules/_core-js@2.6.10@core-js/modules/es6.regexp.to-string.js
 var es6_regexp_to_string = __webpack_require__("cc1d");
 
 // CONCATENATED MODULE: ./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--12-0!./node_modules/_thread-loader@2.1.3@thread-loader/dist/cjs.js!./node_modules/_babel-loader@8.0.6@babel-loader/lib!./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.7.2@vue-loader/lib??vue-loader-options!./packages/AliplayerV2/index.vue?vue&type=script&lang=js&
 
+
 //
 //
 //
@@ -187,13 +204,13 @@ var es6_regexp_to_string = __webpack_require__("cc1d");
       //css版本源
       required: false,
       type: [String],
-      default: "https://g.alicdn.com/de/prismplayer/2.9.1/skins/default/aliplayer-min.css"
+      default: "https://g.alicdn.com/de/prismplayer/2.9.3/skins/default/aliplayer-min.css"
     },
     scriptSrc: {
       //js版本源
       required: false,
       type: [String],
-      default: "https://g.alicdn.com/de/prismplayer/2.9.1/aliplayer-min.js"
+      default: "https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js"
     }
   },
   data: function data() {
@@ -205,7 +222,9 @@ var es6_regexp_to_string = __webpack_require__("cc1d");
         id: null,
         //播放器的ID
         width: '100%',
-        autoplay: true // isLive: true,
+        autoplay: true,
+        skinLayout: false,
+        progressMarkers: false // isLive: true,
         //支持播放地址播放,此播放优先级最高
         // source: 'rtmp://182.145.195.238:1935/hls/1194076936807170050',
 
@@ -371,7 +390,7 @@ var es6_regexp_to_string = __webpack_require__("cc1d");
       var _this4 = this;
 
       if (typeof window.Aliplayer != 'undefined') {
-        var options = this.options;
+        var options = this.deepCloneObject(this.options);
 
         if (options) {
           for (var key in options) {
@@ -675,6 +694,30 @@ var es6_regexp_to_string = __webpack_require__("cc1d");
      */
     off: function off(ev, handle) {
       this.player && this.player.off(ev, handle);
+    },
+
+    /**
+     * 深度拷贝
+     * @param {*} obj
+     */
+    deepCloneObject: function deepCloneObject(obj) {
+      var objClone = Array.isArray(obj) ? [] : {};
+
+      if (obj && _typeof(obj) === 'object') {
+        for (var key in obj) {
+          if (obj.hasOwnProperty(key)) {
+            //判断ojb子元素是否为对象，如果是，递归复制
+            if (obj[key] && _typeof(obj[key]) === 'object') {
+              objClone[key] = this.deepCloneObject(obj[key]);
+            } else {
+              //如果不是，简单复制
+              objClone[key] = obj[key];
+            }
+          }
+        }
+      }
+
+      return objClone;
     }
   },
   beforeDestroy: function beforeDestroy() {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "vue-aliplayer-v2",
-    "version": "1.2.7",
+    "version": "1.2.8",
     "author": "yxs",
     "description": "感谢每一位支持开源的朋友. 这是一个基于Alipayer 开发并封装成vue组件的集成播放器.可播放rtmp,m3u8,mp4....视频.除支持直播流与点播的基础功能外,也支持视频的加密播放、清晰度切换、直播时移等业务场景",
     "main": "lib/vue-aliplayer-v2.umd.min.js",

packages/AliplayerV2/index.vue

@@ -18,12 +18,12 @@ export default {
         cssLink:{   //css版本源
             required: false,
             type: [String],
-            default: `https://g.alicdn.com/de/prismplayer/2.9.1/skins/default/aliplayer-min.css`
+            default: `https://g.alicdn.com/de/prismplayer/2.9.3/skins/default/aliplayer-min.css`
         },
         scriptSrc:{ //js版本源
             required: false,
             type: [String],
-            default: `https://g.alicdn.com/de/prismplayer/2.9.1/aliplayer-min.js`
+            default: `https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js`
         }
     },
     data () {
@@ -34,6 +34,8 @@ export default {
                 id: null,  //播放器的ID
                 width: '100%',
                 autoplay: true,
+                skinLayout: false,
+                progressMarkers: false
                 // isLive: true,
                 //支持播放地址播放,此播放优先级最高
                 // source: 'rtmp://182.145.195.238:1935/hls/1194076936807170050',
@@ -127,9 +129,9 @@ export default {
 
         options:{   //配置项是对象,只能深度监听
             handler(){
-               this.init();
+                this.init();
             },
-            deep:true
+            deep: true
         }
     },
     mounted () {
@@ -189,10 +191,10 @@ export default {
          */
         initPlayer(){
             if(typeof window.Aliplayer != 'undefined') {
-                const options = this.options;
+                const options = this.deepCloneObject(this.options);
                 if(options){
                     for (const key in options) {
-                       this.config[key] = options[key];
+                        this.config[key] = options[key];
                     }
                 }
                 if(this.source) this.config.source = this.source; //播放源
@@ -483,7 +485,31 @@ export default {
          */
         off(ev,handle){
             this.player && this.player.off(ev,handle);
+        },
+
+
+        /**
+         * 深度拷贝
+         * @param {*} obj
+         */
+        deepCloneObject (obj) {
+            let objClone = Array.isArray(obj) ? [] : {};
+            if (obj && typeof obj === 'object') {
+                for (let key in obj) {
+                    if (obj.hasOwnProperty(key)) {
+                        //判断ojb子元素是否为对象，如果是，递归复制
+                        if (obj[key] && typeof obj[key] === 'object') {
+                            objClone[key] = this.deepCloneObject(obj[key]);
+                        } else {
+                            //如果不是，简单复制
+                            objClone[key] = obj[key];
+                        }
+                    }
+                }
+            }
+            return objClone;
         }
+
     },
     beforeDestroy(){  //防止重复创建
         this.dispose(); //销毁播放器(防止直播播放的情况下,播放器已经销毁,而后台还在继续下载资源造成卡顿的bug)