50 lines
1.2 KiB
Vue
50 lines
1.2 KiB
Vue
<template>
|
|
<view class="content">
|
|
<div id="dplayer" style="height: 450px"></div>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
//引入 hls与dplayer 用于解析播放视频
|
|
import Hls from 'hls.js'
|
|
import Dplayer from 'dplayer'
|
|
export default {
|
|
data() {
|
|
return {
|
|
dp: {}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.dp = new Dplayer({
|
|
//播放器的一些参数
|
|
container: document.getElementById('dplayer'),
|
|
autoplay: false, //是否自动播放
|
|
theme: '#FADFA3', //主题色
|
|
loop: true,//视频是否循环播放
|
|
lang: 'zh-cn',
|
|
screenshot: false,//是否开启截图
|
|
hotkey: true,//是否开启热键
|
|
preload: 'auto',//视频是否预加载
|
|
volume: 0.7,//默认音量
|
|
mutex: true,//阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
|
|
video: {
|
|
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8 ', //视频地址
|
|
type: 'customHls',
|
|
customType: {
|
|
customHls: function(video, player) {
|
|
const hls = new Hls() //实例化Hls 用于解析m3u8
|
|
hls.loadSource(video.src)
|
|
hls.attachMedia(video)
|
|
}
|
|
},
|
|
},
|
|
});
|
|
},
|
|
created() {
|
|
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script> |