//mianjs中
import bindplayer from 'bindplayer'
Vue.use(bindplayer)
//组件中
>
</d-player>
<button class="btn btn-primary" @click="switchHandle">switch</button>
<script>
import Hls from 'hls.js'
export default {
data() {
return {
options: {
video: {
url: '
https://play.mms.cainiao.com/CP688993/live_DPSDK_CORE_STREAMTYPE_MAIN_648978162990.m3u8',
pic: '
http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg',
type: 'customHls',
customType: {
customHls: function(video) {
const hls = new Hls();
hls.loadSource(video.src);
hls.attachMedia(video);
},
},
},
autoplay: false,
contextmenu: [
{
text: 'GitHub',
link: '
https://github.com/MoePlayer/vue-dplayer'
}
]
},
player: null,
}
},
mounted() {
this.player = this.$refs.player.dp
},
methods: {
play() {
console.log('play callback')
},
switchHandle() {
this.player.switchVideo({
url: '
http://static.smartisanos.cn/common/video/video-jgpro.mp4'
})
}
},
components: {
}
}
</script>
<style>
body {
margin: 0;
padding: 0;
text-align: center;
}
a {
color: #42b983;
text-decoration: none;
}
.dplayer {
width: 800px;
margin: 50px auto;
}
h1 {
font-size: 54px;
color: #42b983;
margin: 30px 0 10px;
}
h2 {
font-size: 22px;
color: #555;
}
@media (max-width: 768px) {
.dplayer {
width: 90%;
}
h1 {
font-size: 30px;
}
h2 {
font-size: 16px;
}
}
</style>
