Merge pull request #9 from langyuxiansheng/dev_v1.2.0

修复播放源切换bug和功能升级

README.md

@@ -35,7 +35,7 @@ components:{ VueAliplayerV2: VueAliplayerV2.Player }
 <template>
     <div id="app">
         <template v-if="show">
-            <vue-aliplayer-v2 :source="source" ref="VueAliplayerV2" id="player-1194076936807170050" :options="options" />
+            <vue-aliplayer-v2 :source="source" ref="VueAliplayerV2" :options="options" />
         </template>
         <p class="remove-text" v-else>播放器已销毁!</p>
         <div class="player-btns">
@@ -44,6 +44,8 @@ components:{ VueAliplayerV2: VueAliplayerV2.Player }
             <span @click="replay()">重播</span>
             <span @click="getCurrentTime()">播放时刻</span>
             <span @click="show = !show">{{ show ? '销毁' : '重载' }}</span>
+            <span @click="options.isLive = !options.isLive">{{ options.isLive ? '切换普通模式' : '切换直播模式' }}</span>
+            <span @click="getStatus()">获取播放器状态</span>
         </div>
         <div class="source-box">
             <span class="source-label">选择播放源(支持动态切换):</span>
@@ -51,6 +53,7 @@ components:{ VueAliplayerV2: VueAliplayerV2.Player }
                 <option value="//player.alicdn.com/video/aliyunmedia.mp4">播放源1</option>
                 <option value="//yunqivedio.alicdn.com/user-upload/nXPDX8AASx.mp4">播放源2</option>
                 <option value="//tbm-auth.alicdn.com/e7qHgLdugbzzKh2eW0J/kXTgBkjvNXcERYxh2PA@@hd_hq.mp4?auth_key=1584519814-0-0-fc98b2738f331ff015f7bf5c62394888">播放源3</option>
+                <option value="//ivi.bupt.edu.cn/hls/cctv1.m3u8">直播播放源4</option>
             </select>
         </div>
         <div class="source-box">
@@ -375,6 +378,8 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 
 ## 更新日志
 
+> v1.2.0 修复播放源(MP4/m3u8)之间切换无法正常播放的bug,增加options配置项动态响应功能,优化部分播放器的逻辑, 感谢"liyoro"网友的反馈和建议.
+
 > v1.1.9 修复播放源(修复prop:source类型验证报错), 感谢"hugo2017"和“nullF”网友的反馈.
 
 > v1.1.8 修复播放源(增加source属性类型错误),修复获取播放器状态 getStatus()方法报错, 感谢"kongjigu"网友的反馈.

examples/App.vue

@@ -10,6 +10,7 @@
             <span @click="replay()">重播</span>
             <span @click="getCurrentTime()">播放时刻</span>
             <span @click="show = !show">{{ show ? '销毁' : '重载' }}</span>
+            <span @click="options.isLive = !options.isLive">{{ options.isLive ? '切换普通模式' : '切换直播模式' }}</span>
             <span @click="getStatus()">获取播放器状态</span>
         </div>
         <div class="source-box">
@@ -18,6 +19,7 @@
                 <option value="//player.alicdn.com/video/aliyunmedia.mp4">播放源1</option>
                 <option value="//yunqivedio.alicdn.com/user-upload/nXPDX8AASx.mp4">播放源2</option>
                 <option value="//tbm-auth.alicdn.com/e7qHgLdugbzzKh2eW0J/kXTgBkjvNXcERYxh2PA@@hd_hq.mp4?auth_key=1584519814-0-0-fc98b2738f331ff015f7bf5c62394888">播放源3</option>
+                <option value="//ivi.bupt.edu.cn/hls/cctv1.m3u8">直播播放源4</option>
             </select>
         </div>
         <div class="source-box">
@@ -33,9 +35,12 @@ export default {
     data(){
         return {
             options: {
-                source:'//player.alicdn.com/video/aliyunmedia.mp4'
+                // source:'//player.alicdn.com/video/aliyunmedia.mp4',
+                isLive: true,   //切换为直播流的时候必填
+                // format: 'm3u8'  //切换为直播流的时候必填
             },
             source: '//player.alicdn.com/video/aliyunmedia.mp4',
+            // source: '//ivi.bupt.edu.cn/hls/cctv1.m3u8',
             show: true
         }
     },
@@ -55,7 +60,8 @@ export default {
         },
 
         getCurrentTime(){
-            this.$refs.VueAliplayerV2.getCurrentTime();
+            // this.$refs.VueAliplayerV2.getCurrentTime();
+            this.source = 'http://ivi.bupt.edu.cn/hls/cctv1.m3u8';
         },
 
         getStatus(){

package.json

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

packages/AliplayerV2/src/main.vue

@@ -125,8 +125,15 @@ export default {
         };
     },
     watch:{
-        source(url){ //监听播放源变化
-            this.loadByUrl(url);
+        source(){ //监听播放源变化
+            this.init();
+        },
+
+        options:{   //配置项是对象,只能深度监听
+            handler(){
+               this.init();
+            },
+            deep:true
         }
     },
     mounted () {
@@ -192,21 +199,13 @@ export default {
                 }
                 if(this.source) this.config.source = this.source; //播放源
                 this.config.id = this.id;
-                // this.player = new Aliplayer(this.config, function(player) {
-                //     // console.log('播放器创建好了',player);
-                // });
-                if(!this.player){
-                    // console.log(this.config);
-                    this.player = Aliplayer(this.config);
-                    for(const ev in this.events){
-                        this.player && this.player.on(this.events[ev],(e)=>{
-                            // console.log(`object ${this.events[ev]}`,e);
-                            this.$emit(this.events[ev],e);
-                        });
-                    }
-                } else {
-                    this.player && this.player.replay();   //销毁后重播
-                    // console.log(`this.player && this.player.replay()`,'销毁后重播');
+                this.player && this.player.dispose();   //防止实例的重复
+                this.player = Aliplayer(this.config);
+                for(const ev in this.events){
+                    this.player && this.player.on(this.events[ev],(e)=>{
+                        // console.log(`object ${this.events[ev]}`,e);
+                        this.$emit(this.events[ev],e);
+                    });
                 }
                 //通过播放器实例的off方法取消订阅
                 //player.off('ready',handleReady);