需求

播放暂停视频
不允许快进，可以后退
视频后退不会影响最高观看时长，例如看了10分钟，后退5分钟，观看时长依然是600秒
监听退出记录观看时间，下次进来接着看
视频看完积分
javascript 复制代码
<template>
	<view>
		<!-- id:唯一标识，@timeupdate进度条变化的事件，@ended进度条到最后的事件，initial-time指定视频初始播放位置， -->
		<video id="myVideo" style="width: 100%;" @timeupdate="timeUpdate" @ended="ended" :initial-time="initialTime"
				:src="course.videos" :poster="course.img">
		</video>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				initialTime: 0, //初始播放位置
				duration: 0, // 视频时长
				videoContext: '', // 用来存储video对象
				watchTime: 0, // 实际观看时间
				videoRealTime: 0, // 实时播放进度
				course: {
					videos: "https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v",
					img: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
				}
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: options.id
			})
			// 调用接口取到该用户上次播放的位置（秒） 
			this.watchTime = 67
			this.initialTime = 67
		},
		onReady() {
			// 视频唯一ID 
			this.videoContext = uni.createVideoContext('myVideo')
		},
		methods: {
			// 监听进度条变化：禁止拖动 e.detail = {currentTime, duration} 。触发频率 250ms 一次
			timeUpdate(e) {
				//视频时长
				this.duration = parseInt(e.detail.duration)
				// 记录用户当前视频进度
				var jumpTime = parseInt(e.detail.currentTime)
				// 判断用户当前视频进度比实际观看时间差别，这里只判断了用户快进
				if (jumpTime - this.watchTime > 1) {
					// 差别过大，调用seek方法跳转到实际观看时间
					this.videoContext.seek(this.watchTime)
				} else {
					this.videoRealTime = parseInt(e.detail.currentTime)
					if (this.videoRealTime > this.watchTime) {
						this.watchTime = this.videoRealTime
					}
				}
			},
			ended() {
				// 用户把进度条拉到最后，但是实际观看时间不够，跳转回去会自动暂停
				if (this.watchTime < this.duration) {
					this.videoContext.play()
				} else {
					console.log('看完了')
				}
			},
			// 监听返回：监听不了ios的左滑返回，目前的采用的解决方案是在onLoad设置禁用左滑
			// onLoad(option) {
			// 	// 单页禁止测滑返回
			// 	// #ifdef APP-PLUS
			// 	let currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
			// 	currentWebview.setStyle({
			// 		popGesture: 'none'
			// 	})
			// 	// #endif
			// }
			
			// 监听返回，记录视频的观看时长
			onBackPress(e) {
				//backbutton 是点击物理按键返回，navigateBack是uniapp中的返回（比如左上角的返回箭头）
				console.log('返回', e, this.watchTime, this.duration);
			},
		},
	}
</script>
uniapp视频video

需求
