martial-arts/pagesB/play-video/play-video.nvue

<template>
	<div style="width:100%;overflow-x:hidden;">
		<image class="" @tap="backEv" :style="{top:statusHeight+'px'}" src="/static/public/video-back.png" style="width: 33rpx;height: 33rpx;position: fixed;z-index: 10;left: 20rpx;" mode="aspectFill"></image>
		<swiper @transition="getxy" @change="switchVideo" :current="currentIndex" vertical :style="{width:newwidth+'px',height:newHeight+'px'}">
			<swiper-item @tap="doubleClick(index)" v-for="(item,index) in videoList" :key="index">
				  <!-- :poster="item.cover" -->
				<video :id="`video${index}`" :ref="`refvideo_${index}`" style="width: 100%;" :style="{height:newHeight+'px'}" :autoplay="item.autoplay"
				:src="item.src" :enable-play-gesture="dans"
				:controls="item.isControls" :show-center-play-btn="isCenterImg" :show-play-btn="isBottomImg" :show-fullscreen-btn="isFull"
				@play="comePlay(index)" @pause="comePause(index)" @timeupdate='videoTimeUpdateEvent' :enable-progress-gesture="isBottomImg"></video>
				<!-- 封面图 -->
				<image v-if="item.isPlayImg" @tap.stop="playEv(index)" src="/static/tabbar/icon-play.png" style="position: fixed;top: 50%;left: 50%;
					width: 126rpx;height: 126rpx;transform: translate(-50%, -50%);" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				statusHeight: uni.getSystemInfoSync().statusBarHeight + 42/2 - 10,
				newHeight:uni.getSystemInfoSync().windowHeight,
				newwidth:uni.getSystemInfoSync().windowWidth,
				videoSrc:'https://video.shipin520.com/videos/17/97/40/a_yiPIEXbE43Tm1559179740.mp4',
				videoList:[],
				currentIndex:0,
				videoContext:'',
				title:'',//视频的标题，全屏时在顶部展示
				posterSrc:'',//视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效
				dans:true,//是否开启播放手势，即双击切换播放/暂停
				isCenterImg:false,//是否显示视频中间的播放按钮
				isBottomImg:true,//是否显示视频底部控制栏的播放按钮
				isFull:true,//是否显示全屏按钮
				count:0,
				currentTime:'' ,//记录观看时长
				duration:'',//视频总时长
				video_real_time: 0,
				nitial_time: ''
			}
		},
		onReady: (res)=> {
			
		},
		onLoad(op) {
			// this.currentIndex = op.current;
			this.currentIndex = 0;
			uni.getStorageSync('videoList').forEach(item=>{
				let obj = {
					...item,
					isPlayImg:true,
					autoplay:false,
					isControls:false
				}
				this.videoList.push(obj);
			})
			this.videoList[this.currentIndex].autoplay = true;
			this.videoContext = uni.createVideoContext(`video${this.currentIndex}`, this)
		},
		onHide() {
			uni.removeStorageSync('videoList');
			
		},
		
		onUnload() {
			let course_video_id = this.videoList[this.currentIndex].course_video_id;
			console.log(course_video_id,'页面销毁了')
			if(course_video_id) {
				let params = {
					course_video_id:course_video_id,
					duration:parseInt(this.currentTime),
				}
				this.$requst.get('/api/course/create-browse-records',params).then(res=>{
					if(res.code == 0) {
						console.log('观影记录提交成功',this.currentTime)
					}
				})
			}
		},
		methods:{
			// 视频滑动结束
			getxy(e){
				let num = e.detail.dy;
				if(num==this.newHeight || -num==this.newHeight){
					this.playCurrentVideo(this.currentIndex);
				}
			},
			// 滑动swiper 设置当前视频索引
			switchVideo(e){
				this.currentIndex = e.detail.current;
			},
			// 双击
			doubleClick(index){
				this.count++;
				setTimeout(()=>{
					this.count = 0;
				},300)
				if(this.count>2){
					if(this.videoList[index].isPlayImg){
						// 如果当前视频正在播放中，双击及暂停播放
						this.videoContext.pause();
						this.videoList[index].isPlayImg = true;
					} else {
						// 如果当前视频暂停中，双击及开始播放
						this.videoList[index].isPlayImg = false;
						this.videoContext.play();
					}
				}
			},
			// 播放当前视频
			playCurrentVideo(index){
				this.videoContext.pause();
				this.videoContext = uni.createVideoContext(`video${index}`, this);
				this.videoList[index].isPlayImg = false;
				this.videoContext.play();
			},
			// 退出视频播放
			backEv(){
				uni.navigateBack({
					delta:1
				})
			},
			// 点击播放图标，播放视频
			playEv(index){
				this.playCurrentVideo(index);
			},
			// 视频播放
			comePlay(index){//当开始/继续播放时触发play事件
				this.videoList[index].isPlayImg = false;
				this.videoList[index].isControls = true;
			},
			// 视频暂停
			comePause(index){
				this.videoList[index].isPlayImg = true;
				this.videoList[index].isControls = false;
			},
			//记录观看时长
			videoTimeUpdateEvent(e) {
				var isReady = 1; // 是否开启可以视频快进 1 禁止开启
				//跳转到指定播放位置 initial-time 时间为秒
				let that = this;
				//播放的总时长
				var duration = e.detail.duration;
				//实时播放进度 秒数
				var currentTime = parseInt(e.detail.currentTime);
				//当前视频进度
				// console.log("视频播放到第" + currentTime + "秒")//查看正在播放时间，以秒为单位
				if (that.video_real_time == 0) {
					var jump_time = parseInt(that.initial_time) + parseInt(that.video_real_time);
				} else {
					var jump_time = parseInt(that.video_real_time);
				}
				if (isReady == 1) {
					if (currentTime > jump_time && currentTime - jump_time > 3) {
						let videoContext = wx.createVideoContext('video0');
						videoContext.seek(that.video_real_time);
					}
				}
				
				that.video_real_time = currentTime; //实时播放进度
				that.currentTime = Math.ceil(e.detail.currentTime);
				that.duration = parseInt(e.detail.duration - 1);
				if(that.currentTime >= that.duration) {
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},200)
				}
				
			},
		},
	}
</script>

<style>

</style>