Merge branch 'dev_v1.2.1' of https://github.com/langyuxiansheng/vue-aliplayer-v2

README.md

@@ -378,6 +378,8 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 
 ## 更新日志
 
+> v1.2.1 修复直播播放的情况下,播放器已经销毁,而后台还在继续下载资源造成卡顿的bug,修复多个播放器只渲染1个的bug, 感谢"Jonauil"和"guangming95"两位网友的反馈和建议.
+
 > v1.2.0 修复播放源(MP4/m3u8)之间切换无法正常播放的bug,增加options配置项动态响应功能,优化部分播放器的逻辑, 感谢"liyoro"网友的反馈和建议.
 
 > v1.1.9 修复播放源(修复prop:source类型验证报错), 感谢"hugo2017"和“nullF”网友的反馈.

examples/App.vue

@@ -1,9 +1,14 @@
 <template>
     <div id="app">
-        <template v-if="show">
-            <vue-aliplayer-v2 :source="source" ref="VueAliplayerV2" :options="options" />
+        <template v-if="!isShowMultiple && show">
+            <vue-aliplayer-v2 :source="source" ref="VueAliplayerV3" :options="options" />
         </template>
-        <p class="remove-text" v-else>播放器已销毁!</p>
+        <div v-if="isShowMultiple && show" class="show-multiple">
+            <template v-for="x in 5">
+                <vue-aliplayer-v2 class="multiple-player" :key="x" :source="source" ref="VueAliplayerV2" :options="options" />
+            </template>
+        </div>
+        <p class="remove-text" v-if="!show">播放器已销毁!</p>
         <div class="player-btns">
             <span @click="play()">播放</span>
             <span @click="pause()">暂停</span>
@@ -12,6 +17,7 @@
             <span @click="show = !show">{{ show ? '销毁' : '重载' }}</span>
             <span @click="options.isLive = !options.isLive">{{ options.isLive ? '切换普通模式' : '切换直播模式' }}</span>
             <span @click="getStatus()">获取播放器状态</span>
+            <span @click="showMultiple()">{{isShowMultiple ? '显示1个播放器' : '显示多个播放器'}}</span>
         </div>
         <div class="source-box">
             <span class="source-label">选择播放源(支持动态切换):</span>
@@ -41,7 +47,8 @@ export default {
             },
             source: '//player.alicdn.com/video/aliyunmedia.mp4',
             // source: '//ivi.bupt.edu.cn/hls/cctv1.m3u8',
-            show: true
+            show: true,
+            isShowMultiple: false
         }
     },
 
@@ -68,6 +75,10 @@ export default {
            const status =  this.$refs.VueAliplayerV2.getStatus();
            console.log(`getStatus:`, status);
            alert(`getStatus:${status}`);
+        },
+
+        showMultiple(){
+            this.isShowMultiple = !this.isShowMultiple;
         }
     }
 }
@@ -82,6 +93,13 @@ export default {
     padding: 20px;
     font-size: 24px;
 }
+.show-multiple{
+    display: flex;
+    .multiple-player{
+        width: calc(100% / 4);
+        margin: 20px;
+    }
+}
 .player-btns{
     width: 100%;
     display: flex;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "vue-aliplayer-v2",
-    "version": "1.2.0",
+    "version": "1.2.1",
     "author": "yxs",
     "description": "感谢每一位开源的开发者. 这是一个基于Alipayer 开发并封装成vue组件的播放器.",
     "main":"lib/vue-aliplayer-v2.umd.min.js",

packages/AliplayerV2/src/main.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :id="id"></div>
+    <div :id="config.id"></div>
 </template>
 <script>
 export default {
@@ -18,7 +18,7 @@ export default {
         id:{
             required: false,
             type: [String],
-            default: `player-${Math.random().toString(36).substr(2).toLocaleUpperCase()}`
+            default: null
         },
         cssLink:{   //css版本源
             required: false,
@@ -35,7 +35,7 @@ export default {
         return {
             player: null,   //播放器实例
             config:{
-                id: null,  //播放器的ID
+                id: `player-${Math.random().toString(36).substr(2).toLocaleUpperCase()}`,  //播放器的ID
                 width: '100%',
                 autoplay: true,
                 // isLive: true,
@@ -180,7 +180,10 @@ export default {
                     this.initPlayer();
                 });
             } else {
-                this.initPlayer();
+                this.initPlayer();  //这样是为了兼容页面上有多个播放器
+                scriptTag.addEventListener("load", () => {
+                    this.initPlayer();
+                });
             }
         },
 
@@ -189,7 +192,6 @@ export default {
          * @description SDK文档地址:https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1084.131d1c4cJT7o5Z
          */
         initPlayer(){
-            // console.log(`this.player`,this.player);
             if(typeof window.Aliplayer != 'undefined') {
                 const options = this.options;
                 if(options){
@@ -198,7 +200,7 @@ export default {
                     }
                 }
                 if(this.source) this.config.source = this.source; //播放源
-                this.config.id = this.id;
+                if(this.id) this.config.id = this.id
                 this.player && this.player.dispose();   //防止实例的重复
                 this.player = Aliplayer(this.config);
                 for(const ev in this.events){
@@ -488,6 +490,7 @@ export default {
         }
     },
     beforeDestroy(){  //防止重复创建
+        this.dispose(); //销毁播放器(防止直播播放的情况下,播放器已经销毁,而后台还在继续下载资源造成卡顿的bug)
         const head = document.querySelector('head');    //移除所有的重复创建的标签
         const nodes = document.querySelectorAll('script[src="https://g.alicdn.com/de/prismplayer/2.8.2/hls/aliplayer-hls-min.js"]');
         head && nodes.forEach((item)=>{