本文主要是介绍【vue Dplayer】播放hls视频流，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
准备工作
- 安装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和hlsimport 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>
这篇关于【vue Dplayer】播放hls视频流的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
