uniapp中H5播放m3u8等格式视频

先安装依赖

  "dplayer": "^1.26.0",
   "hls.js": "^1.1.5",

然后使用

<div id="dplayer" style="width: 200px;height: 200px"></div>

<script>
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: '', //视频地址
						type: 'customHls',
						customType: {
							customHls: function(video, player) {
								const hls = new Hls()  //实例化Hls  用于解析m3u8
								hls.loadSource(video.src)
								hls.attachMedia(video)
							}
						},
					},
			    });
      }
}
</script>