准备工作
- 安装Dplayer和hls.js
npm install dplayer --save
npm install hls.js --save
- 准备测试流
hls测试地址：（截止2023.08.08有效）
http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8
<template>
<div>
<div id="dplayer"></div>
</div>
</template>
<script>
// 引入dplayer和hls
import DPlayer from 'dplayer';
import Hls from 'hls.js'
export default{
data(){
return(){
dp: null
}
},
created(){
const dp = new DPlayer({
container: document.getElementById('dplayer'),
// live: true,
video: {
url: 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8',
type: 'customHls',
customType: {
customHls: function (video, player) {
const hls = new Hls();
hls.loadSource(video.src);
hls.attachMedia(video);
},
},
},
});
this.dp = dp;
this.dp.play()
}
}
</script>
文章来源地址https://www.toymoban.com/news/detail-635458.html
文章来源：https://www.toymoban.com/news/detail-635458.html
到了这里，关于【vue Dplayer】播放hls视频流的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
