工具
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);