JLNTV_IPD/vue-aliplayer-v2
4
0
Fork 0
mirror of https://github.com/langyuxiansheng/vue-aliplayer-v2.git synced 2025-04-05 19:41:39 +08:00
Code Issues Projects Releases Wiki Activity

更新文档

Browse Source
This commit is contained in:
zhouliujun 2020-10-10 14:10:25 +08:00
parent e0a979acf2
commit 0d872ef3e8
1 changed files with 40 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
README.md
View File

@ -40,18 +40,26 @@ components:{ VueAliplayerV2: VueAliplayerV2.Player }
```html ```html
<template> <template>
<div id="app"> <div id="app">
<template v-if="show"> <template v-if="!isShowMultiple && show">
<vue-aliplayer-v2 :source="source" ref="VueAliplayerV2" :options="options" /> <vue-aliplayer-v2 :source="source" ref="VueAliplayerV2" :options="options" />
</template> </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"> <div class="player-btns">
<span @click="play()">播放</span> <template v-if="!isShowMultiple && show">
<span @click="pause()">暂停</span> <span @click="play()">播放</span>
<span @click="replay()">重播</span> <span @click="pause()">暂停</span>
<span @click="getCurrentTime()">播放时刻</span> <span @click="replay()">重播</span>
<span @click="getCurrentTime()">播放时刻</span>
<span @click="getStatus()">获取播放器状态</span>
</template>
<span @click="show = !show">{{ show ? '销毁' : '重载' }}</span> <span @click="show = !show">{{ show ? '销毁' : '重载' }}</span>
<span @click="options.isLive = !options.isLive">{{ options.isLive ? '切换普通模式' : '切换直播模式' }}</span> <span @click="options.isLive = !options.isLive">{{ options.isLive ? '切换普通模式' : '切换直播模式' }}</span>
<span @click="getStatus()">获取播放器状态</span> <span @click="showMultiple()">{{isShowMultiple ? '显示1个播放器' : '显示多个播放器'}}</span>
</div> </div>
<div class="source-box"> <div class="source-box">
<span class="source-label">选择播放源(支持动态切换):</span> <span class="source-label">选择播放源(支持动态切换):</span>
@ -69,16 +77,18 @@ components:{ VueAliplayerV2: VueAliplayerV2.Player }
</div> </div>
</template> </template>
<script> <script>
// import VueAliplayerV2 from 'vue-aliplayer-v2';
export default { export default {
// components:{ VueAliplayerV2 },
data(){ data(){
return { return {
options: { 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: '//player.alicdn.com/video/aliyunmedia.mp4',
show: true // source: '//ivi.bupt.edu.cn/hls/cctv1.m3u8',
show: true,
isShowMultiple: false
} }
}, },
@ -97,7 +107,18 @@ export default {
}, },
getCurrentTime(){ getCurrentTime(){
this.$refs.VueAliplayerV2.getCurrentTime(); // this.$refs.VueAliplayerV2.getCurrentTime();
this.source = 'http://ivi.bupt.edu.cn/hls/cctv1.m3u8';
},
getStatus(){
const status = this.$refs.VueAliplayerV2.getStatus();
console.log(`getStatus:`, status);
alert(`getStatus:${status}`);
},
showMultiple(){
this.isShowMultiple = !this.isShowMultiple;
} }
} }
} }
@ -112,6 +133,13 @@ export default {
padding: 20px; padding: 20px;
font-size: 24px; font-size: 24px;
} }
.show-multiple{
display: flex;
.multiple-player{
width: calc(100% / 4);
margin: 20px;
}
}
.player-btns{ .player-btns{
width: 100%; width: 100%;
display: flex; display: flex;
@ -168,12 +196,6 @@ props:{
type: [Object], type: [Object],
default: () => null default: () => null
}, },
id:{ //播放器的ID 唯一标识符 不传就是默认的 但是有多个的时候不一定是唯一的
required: false,
type: [String],
default: `player-${Date.parse(new Date())}`
},
cssLink:{ //css版本源 cssLink:{ //css版本源
required: false, required: false,