uni-app 播放m3u8格式视频

工具

dplayer、hls.js
链接: dplayer官网

安装

npm i dplayer -S 
npm i hls.js -S

引入

import Hls from 'hls.js'
import Dplayer from 'dplayer'

容器

<div id="dplayer" ></div>

播放器

mounted() {
		this.dp = new Dplayer({
			container: document.getElementById('dplayer'),
			autoplay: false, //是否自动播放
			loop: true,//视频是否循环播放
			lang: 'zh-cn',
			screenshot: false,//是否开启截图
			hotkey: true,//是否开启热键
			preload: 'auto',//视频是否预加载
			volume: 0.7,//默认音量
			mutex: true,//阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
			video: {
				url: 'XXXX.m3u8', //视频地址
				type: 'customHls',
				customType: {
					customHls: function(video, player) {
						const hls = new Hls()  //实例化Hls  解析m3u8
						hls.loadSource(video.src)
						hls.attachMedia(video)
				    }
			    },
		     },
	     });
	 }，

监听视频状态

dp.on('canplay', function() {
	console.log('视频正常播放')
});
dp.on('error', function() {
	console.log('视频播放异常')
});

报错

1、uniapp require is not defined

解决：项目的根路径下创建vue.config.js文件输入以下内容，重新启动项目

module.exports = {
    chainWebpack: (config) => {
        config.module
        .rule("mjs$")
        .test(/.mjs$/)
        .include.add(/node_modules/)
        .end()
        .type("javascript/auto");
    },
};

2、Cannot read property ‘classList’ of null

解决：保证页面dom元素生成后进行播放器的创建，可添加setTimeout函数延时创建

setTimeout(() => {
				this.setVideo();
			}, 100);