JLNTV_IPD/vue-aliplayer-v2
4
0
Fork 0
mirror of https://github.com/langyuxiansheng/vue-aliplayer-v2.git synced 2025-04-06 03:57:55 +08:00
Code Issues Projects Releases Wiki Activity

增加动态播放源

Browse Source
This commit is contained in:
zhouliujun 2020-03-18 15:48:08 +08:00
parent 84b76c7e16
commit 32f9b7ddc0
4 changed files with 123 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
README.md
View File

@ -22,29 +22,10 @@ Vue.use(VueAliplayerV2);
``` ```
#### 局部注册 App.vue #### 局部注册 App.vue
```html
<template> ```javascript
<div id="app">
<vue-aliplayer-v2
@ready="handleReady"
ref="VueAliplayerV2"
id="player-1194076936807171180"
:options="options" />
</div>
</template>
<script>
import VueAliplayerV2 from 'vue-aliplayer-v2'; import VueAliplayerV2 from 'vue-aliplayer-v2';
export default { components:{ VueAliplayerV2: VueAliplayerV2.Player }
data(){
return {
options: { //配置项
source:'rtmp://182.112.15.258:1688/hls/1194076936807171180'
}
}
},
components:{ VueAliplayerV2: VueAliplayerV2.Player }
}
</script>
``` ```
## 2.组件中使用 ## 2.组件中使用
@ -53,32 +34,47 @@ export default {
```html ```html
<template> <template>
<div id="app"> <div id="app">
<vue-aliplayer-v2 <template v-if="show">
@ready="handleReady" <vue-aliplayer-v2 :source="source" ref="VueAliplayerV2" id="player-1194076936807170050" :options="options" />
ref="VueAliplayerV2" </template>
id="player-1194076936807171180" <p class="remove-text" v-else>播放器已销毁!</p>
:options="options" /> <div class="player-btns">
<button @click="play()">播放</button> <span @click="play()">播放</span>
<button @click="pause()">暂停</button> <span @click="pause()">暂停</span>
<button @click="replay()">重播</button> <span @click="replay()">重播</span>
<button @click="getCurrentTime()">播放时刻</button> <span @click="getCurrentTime()">播放时刻</span>
<span @click="show = !show">{{ show ? '销毁' : '重载' }}</span>
</div>
<div class="source-box">
<span class="source-label">选择播放源(支持动态切换):</span>
<select v-model="source" name="source" id="source">
<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>
</select>
</div>
<div class="source-box">
<span class="source-label">输入播放源(支持动态切换):</span>
<input class="source-input" type="text" v-model="source">
</div>
</div> </div>
</template> </template>
<script> <script>
// import VueAliplayerV2 from 'vue-aliplayer-v2';
export default { export default {
// components:{ VueAliplayerV2: VueAliplayerV2.Player },
data(){ data(){
return { return {
options: { //配置项 options: {
source:'rtmp://182.112.15.258:1688/hls/1194076936807171180' source:'//player.alicdn.com/video/aliyunmedia.mp4'
} },
source: '//player.alicdn.com/video/aliyunmedia.mp4',
show: true
} }
}, },
methods:{ methods:{
/**
* 在这里需要注意的是 this.$refs 可能会返回是数组,或者对象,这个在用的时候需要注意一下.且因为是异步渲染dom,所以最好是在 this.$nextTick(()=>{ //todo }); 里面调用
* 事件可以参考文档 https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1085.36fc6fc57WKZ5P#h2-u64ADu653Eu5668u4E8Bu4EF63
*/
play(){ play(){
this.$refs.VueAliplayerV2.play() this.$refs.VueAliplayerV2.play()
}, },
@ -93,27 +89,25 @@ export default {
getCurrentTime(){ getCurrentTime(){
this.$refs.VueAliplayerV2.getCurrentTime(); this.$refs.VueAliplayerV2.getCurrentTime();
},
/**
* 播放器事件回调
*/
handleReady(e){
console.log(`ready`,e);
} }
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less">
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.remove-text{
text-align: center;
padding: 20px;
font-size: 24px;
}
.player-btns{ .player-btns{
width: 800px; width: 100%;
margin: 0 auto;
display: flex; display: flex;
justify-content: space-between; justify-content: center;
flex-wrap: wrap;
span { span {
margin: 0 auto; margin: 0 auto;
display: inline-block; display: inline-block;
@ -125,17 +119,42 @@ export default {
background: #e1e1e1; background: #e1e1e1;
border-radius: 10px; border-radius: 10px;
text-align: center; text-align: center;
margin: 20px auto; margin: 5px;
cursor: pointer; cursor: pointer;
} }
} }
.source-box{
padding: 5px 10px;
margin-bottom: 20px;
.source-label{
margin-right: 20px;
font-size: 16px;
display: block;
}
#source{
margin-top: 10px;
}
.source-input{
margin-top: 10px;
padding: 5px 10px;
width: 80%;
border: 1px solid #ccc;
}
}
</style> </style>
``` ```
## 3.功能与配置 ## 3.功能与配置
```javascript ```javascript
props:{ props:{
options: { //配置项 options: { //配置项 (options.source 不支持动态切换,需要动态切换请直接使用source)
required: false,
type: [Object],
default: () => null
},
source: { //播放源(此属性存在则优先于options.source) 支持动态切换,目前只支持同种格式（mp4/flv/m3u8）之间切换。暂不支持直播rtmp流切换。
required: false, required: false,
type: [Object], type: [Object],
default: () => null default: () => null
@ -353,3 +372,9 @@ npm run lint
### Customize configuration ### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/). See [Configuration Reference](https://cli.vuejs.org/config/).
## 更新日志
> v1.1.7 增加动态切换播放源(增加source属性)功能 感谢"wikimo"和"jieruian"两位网友的反馈建议.
> v1.1.6 修复部分已知bug和优化局部的引用方式

39
examples/App.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div id="app"> <div id="app">
<template v-if="show"> <template v-if="show">
<vue-aliplayer-v2 ref="VueAliplayerV2" id="player-1194076936807170050" :options="options" /> <vue-aliplayer-v2 :source="source" ref="VueAliplayerV2" id="player-1194076936807170050" :options="options" />
</template> </template>
<p class="remove-text" v-else>播放器已销毁!</p> <p class="remove-text" v-else>播放器已销毁!</p>
<div class="player-btns"> <div class="player-btns">
@ -11,6 +11,18 @@
<span @click="getCurrentTime()">播放时刻</span> <span @click="getCurrentTime()">播放时刻</span>
<span @click="show = !show">{{ show ? '销毁' : '重载' }}</span> <span @click="show = !show">{{ show ? '销毁' : '重载' }}</span>
</div> </div>
<div class="source-box">
<span class="source-label">选择播放源(支持动态切换):</span>
<select v-model="source" name="source" id="source">
<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>
</select>
</div>
<div class="source-box">
<span class="source-label">输入播放源(支持动态切换):</span>
<input class="source-input" type="text" v-model="source">
</div>
</div> </div>
</template> </template>
<script> <script>
@ -22,6 +34,7 @@ export default {
options: { options: {
source:'//player.alicdn.com/video/aliyunmedia.mp4' source:'//player.alicdn.com/video/aliyunmedia.mp4'
}, },
source: '//player.alicdn.com/video/aliyunmedia.mp4',
show: true show: true
} }
}, },
@ -46,7 +59,7 @@ export default {
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less">
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -59,7 +72,7 @@ export default {
.player-btns{ .player-btns{
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
span { span {
margin: 0 auto; margin: 0 auto;
@ -72,8 +85,26 @@ export default {
background: #e1e1e1; background: #e1e1e1;
border-radius: 10px; border-radius: 10px;
text-align: center; text-align: center;
margin: 20px auto; margin: 5px;
cursor: pointer; cursor: pointer;
} }
} }
.source-box{
padding: 5px 10px;
margin-bottom: 20px;
.source-label{
margin-right: 20px;
font-size: 16px;
display: block;
}
#source{
margin-top: 10px;
}
.source-input{
margin-top: 10px;
padding: 5px 10px;
width: 80%;
border: 1px solid #ccc;
}
}
</style> </style>

2
package.json
View File

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

11
packages/AliplayerV2/src/main.vue
View File

@ -10,6 +10,11 @@ export default {
type: [Object], type: [Object],
default: () => null default: () => null
}, },
source: { //播放源(此属性存在则优先于options.source) 动态切换,目前只支持同种格式（mp4/flv/m3u8）之间切换。暂不支持直播rtmp流切换。
required: false,
type: [Object],
default: () => null
},
id:{ id:{
required: false, required: false,
type: [String], type: [String],
@ -119,6 +124,11 @@ export default {
], ],
}; };
}, },
watch:{
source(url){ //监听播放源变化
this.loadByUrl(url);
}
},
mounted () { mounted () {
this.$nextTick(()=>{ this.$nextTick(()=>{
this.init(); this.init();
@ -180,6 +190,7 @@ export default {
this.config[key] = options[key]; this.config[key] = options[key];
} }
} }
if(this.source) this.config.source = this.source; //播放源
this.config.id = this.id; this.config.id = this.id;
// this.player = new Aliplayer(this.config, function(player) { // this.player = new Aliplayer(this.config, function(player) {
// // console.log('播放器创建好了',player); // // console.log('播放器创建好了',player);