【vue Dplayer】播放hls视频流

准备工作

1. 安装Dplayer和hls.js

npm install dplayer --save
npm install hls.js --save

2. 准备测试流
   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>