vue使用Dplayer播放m3u8
vue使用Dplayer播放m3u81、安装dplayer hlsnpm i dplayer -S npm i hls.js -S2、在使用的组件中引入ps:hls一定要放在dplayer前面import Hls from 'hls.js'import Dplayer from 'dplayer'3、创建一个id为dplayer的容器<div id="dplayer" style="heig
·
vue使用Dplayer播放m3u8
1、安装dplayer hls
npm i dplayer -S npm i hls.js -S
2、在使用的组件中引入 ps:hls一定要放在dplayer前面
import Hls from 'hls.js'
import Dplayer from 'dplayer'
3、创建一个id为dplayer的容器
<div id="dplayer" style="height: 450px"></div>
4、在data中声明一个dp,用以保存dplayer,然后在methods声明一个方法对dplayer初始化,方法可以在放在
mounted中,如果要在created或者点击事件中,需要放在$nextTick中
data(){
return {
dp:null,
}
}
//Dplayer初始化
onInitDplayer(val){
let index = val.indexOf(':')+1
val = val.substring(index)
console.log(val)
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:val,
type:'customHls',
customType: {
customHls: function (video, player) {
const hls = new Hls()
hls.loadSource(video.src)
hls.attachMedia(video)
}
},
},
});
},
this.$nextTick(()=>{
this.onInitDplayer(scope.videoUrl)
})
更多推荐
已为社区贡献2条内容
所有评论(0)