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

m3u8视频播放

使用mui-playerhls.js

  1. 安装

    复制代码
    npm install mui-player hls.js

    我的版本是"hls.js": "^1.5.17""mui-player": "^1.8.1"

  2. 使用
    页面标签:

    引用:

    点击目录播放视频:

    m3u8视频播放:

js 复制代码
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, // 获取当前章节的视频URL
		        parse: {
		            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播放:

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

逻辑代码:

js 复制代码
// 初始值
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)
}
相关推荐
游戏开发爱好者81 小时前
iOS 混淆工具链实战 多工具组合完成 IPA 混淆与加固 无源码混淆
android·ios·小程序·https·uni-app·iphone·webview
2501_916008897 小时前
用多工具组合把 iOS 混淆做成可复用的工程能力(iOS混淆|IPA加固|无源码混淆|Ipa Guard|Swift Shield)
android·开发语言·ios·小程序·uni-app·iphone·swift
阿金要当大魔王~~7 小时前
uniapp 页面标签 传值 ————— uniapp 定义 接口
前端·javascript·uni-app·1024程序员节
全栈软件开发8 小时前
uniapp三端影视源码苹果cms自动采集电影视频网站源码前端源码带VIP
前端·uni-app·影视源码
mit6.82411 小时前
[sam2图像分割] 视频追踪API | VideoPredictor | `inference_state`记忆
人工智能·计算机视觉·音视频
碧海银沙音频科技研究院13 小时前
DiVE长尾识别的虚拟实例蒸馏方法
arm开发·人工智能·深度学习·算法·音视频
AI浩13 小时前
基于多焦点高斯邻域注意力机制与大规模基准的视频人群定位
人工智能·深度学习·音视频
开发者导航13 小时前
【开发者导航】全自动 AI 视频创作与发布工具:LuoGen-agent
人工智能·音视频
开发者小天14 小时前
uniapp中对接开发激励广告视频
uni-app
奎歪歪14 小时前
UniApp缓存系统详解
缓存·uni-app·1024程序员节