diff --git a/README.md b/README.md index c30a7c8..cdea541 100644 --- a/README.md +++ b/README.md @@ -22,29 +22,10 @@ Vue.use(VueAliplayerV2); ``` #### 局部注册 App.vue -```html - - - - - - +components:{ VueAliplayerV2: VueAliplayerV2.Player } ``` ## 2.组件中使用 @@ -53,32 +34,47 @@ export default { ```html - - 播放 - 暂停 - 重播 - 播放时刻 + + + + 播放器已销毁! + + 播放 + 暂停 + 重播 + 播放时刻 + {{ show ? '销毁' : '重载' }} + + + 选择播放源(支持动态切换): + + 播放源1 + 播放源2 + 播放源3 + + + + 输入播放源(支持动态切换): + + - + ``` ## 3.功能与配置 ```javascript props:{ - options: { //配置项 + options: { //配置项 (options.source 不支持动态切换,需要动态切换请直接使用source) + required: false, + type: [Object], + default: () => null + }, + + source: { //播放源(此属性存在则优先于options.source) 支持动态切换,目前只支持同种格式(mp4/flv/m3u8)之间切换。暂不支持直播rtmp流切换。 required: false, type: [Object], default: () => null @@ -353,3 +372,9 @@ npm run lint ### Customize configuration See [Configuration Reference](https://cli.vuejs.org/config/). + +## 更新日志 + +> v1.1.7 增加动态切换播放源(增加source属性)功能 感谢"wikimo"和"jieruian"两位网友的反馈建议. +> v1.1.6 修复部分已知bug和优化局部的引用方式 + diff --git a/examples/App.vue b/examples/App.vue index b0ada6b..fd38437 100644 --- a/examples/App.vue +++ b/examples/App.vue @@ -1,7 +1,7 @@ - + 播放器已销毁! @@ -11,6 +11,18 @@ 播放时刻 {{ show ? '销毁' : '重载' }} + + 选择播放源(支持动态切换): + + 播放源1 + 播放源2 + 播放源3 + + + + 输入播放源(支持动态切换): + + - diff --git a/package.json b/package.json index 8ba6622..baa6a36 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-aliplayer-v2", - "version": "1.1.6", + "version": "1.1.7", "author": "yxs", "description": "感谢每一位开源的开发者. 这是一个基于Alipayer 开发并封装成vue组件的播放器.", "main":"lib/vue-aliplayer-v2.umd.min.js", diff --git a/packages/AliplayerV2/src/main.vue b/packages/AliplayerV2/src/main.vue index 0e1794e..9517407 100644 --- a/packages/AliplayerV2/src/main.vue +++ b/packages/AliplayerV2/src/main.vue @@ -10,6 +10,11 @@ export default { type: [Object], default: () => null }, + source: { //播放源(此属性存在则优先于options.source) 动态切换,目前只支持同种格式(mp4/flv/m3u8)之间切换。暂不支持直播rtmp流切换。 + required: false, + type: [Object], + default: () => null + }, id:{ required: false, type: [String], @@ -119,6 +124,11 @@ export default { ], }; }, + watch:{ + source(url){ //监听播放源变化 + this.loadByUrl(url); + } + }, mounted () { this.$nextTick(()=>{ this.init(); @@ -180,6 +190,7 @@ export default { this.config[key] = options[key]; } } + if(this.source) this.config.source = this.source; //播放源 this.config.id = this.id; // this.player = new Aliplayer(this.config, function(player) { // // console.log('播放器创建好了',player);
播放器已销毁!