uniapp h5 vue3 m3u8 和 mp4 外链视频播放

m3u8视频播放

使用mui-player 和hls.js。

1. 安装

   npm install mui-player hls.js
   

   我的版本是"hls.js": "^1.5.17"和"mui-player": "^1.8.1"
2. 使用
   页面标签：
   
   引用：
   
   点击目录播放视频：
   
   m3u8视频播放：
   

mp = null;
// isPlay 是否未播放完
// m3u8播放url
// chapter 播放课程信息
m3u8Play(isPlay, url, chapter) {const courseInfo = chapter?.courseware;// 学习的时间let studyHour = 0;// 未播放完if (isPlay) {studyHour = chapter?.coursewareStudyHour?.hours;}this.$nextTick(() => {this.mp = new MuiPlayer({container: document.getElementById('mui-player'),src: url, // 获取当前章节的视频URLparse: {type: 'hls',loader: Hls,config: {debug: false}},pageHead: false})this.mp.on('ready', () => {const video = this.mp.video();video.addEventListener('play', (e) => {// 点击开始播放 续播video.currentTime = studyHour;})video.addEventListener('timeupdate', (e) => {if (isPlay && e.target.currentTime.toFixed(0) % 5 === 0) {this.addStudyHourFun(courseInfo.coursewareId, e.target.currentTime.toFixed(0))}console.log('播放中', e.target.currentTime,  e.target.currentTime.toFixed(0))})video.addEventListener('pause', (e) => {// 暂停播放if (isPlay) {// 记录学习时长this.addStudyHourFun(courseInfo.coursewareId, e.target.currentTime.toFixed(0))}})})})
}

mp4外链视频播放

使用原生video播放：

<video class="course-video" :src="url" :initial-time="initialTime":enable-progress-gesture="false"  @timeupdate="videoPlay($event)"@error="videoErrorCallback($event)" controls @pause="pauseVideo($event)"></video>

逻辑代码：

// 初始值
initialTime = 0;
// 播放视频
lastSecond = -1;
// 暂停时长
stopTime = 0;
// 当前选播 播放时长(总时长)
durationSecord = 0;
// 是否进行学习记录
addStudyHour = true;
videoPlay(ev) {// 播放视频
}videoErrorCallback(e): void {uni.showToast({icon: 'error',title: e.target.errMsg || '视频加载错误'})
}pauseVideo(ev) {console.log('暂停',  this.stopTime, courseInfo)
}