siyu_app/pages/course/courseVideo.nvue

<template>
	<view style="position: relative;">
		<view class="status_bar" :style="{height: statusBarHeight + 'px',width: windowWidth + 'px'}"></view>
		<view class="video-box" :style="{width: windowWidth + 'px'}">
			<video :style="{width: windowWidth + 'px',height: '422rpx'}" @tap="toggleBarChange" ref="myVideo2"
				id="myVideo2" :src="pickCatalog.videoUrl" :enable-progress-gesture="data.isFast==1"
				:enable-danmu="false" :danmu-btn="false" :initial-time="studyTimes" @play="onPlayVideo"
				@pause="onPauseVideo" :poster="poster" objectFit="contain" :show-progress="data.isFast==1"
				:title="pickCatalog.courseName" :controls="true" :show-fullscreen-btn="true" 
				@controlstoggle="toggleBarChange" @timeupdate="onTimeUpdate" @fullscreenchange="onFullscreenChange"
				@waiting="onWaiting()" @ended="endedPlayNext()" @canplay="onVideoCanPlay"
				@canplaythrough="onVideoCanPlayThrough" @loadeddata="onLoadeddata" @loadedmetadata="onLoadedMetadata"
				@error="errorvideo">
				<!-- 疗法  -->
				<view 
					v-if="showTherapy&&fullScreen"
					:class="fullScreen && direction == 'horizontal' ? 'horizontal':'horizontal'" @tap.stop>
					<view class="goods" @tap.stop="goToPro(showTherapyItem.packageId)">
						<image :src="showTherapyItem.imgUrl" mode="aspectFill" class="goodsimg"></image>
						<view class="goodsname"><text class="goodsname-txt">{{showTherapyItem.packageName}}</text>
						</view>
					</view>
					<view class="es-w-40 es-h-40" style="position: absolute;right:0rpx;top:0rpx;z-index:999">
						<image class="es-w-40 es-h-40" src="@/static/images/close40.png" @tap.stop="closeTherapy">
						</image>
					</view>
				</view>
			</video>
			<image class="back-img" @click="navBack" src="@/static/image/hall/back_white_icon.png"></image>

		</view>
	
		<view class="audiobox" v-if="showAudio" :style="{width: windowWidth + 'px',height: audioboxHeight + 'px'}" @click.stop>
			<view class="audiobox-title" :style="{width: windowWidth + 'px',paddingTop: paddingTop + 'px'}" @click="navBack">
				<uni-icons type="left" size="20" color="#fff"></uni-icons>
				<text class="textOne audiobox-text">{{pickCatalog.title}}</text>
			</view>
			<view class="es es-ver es-ac es-pc">
				<view class="es es-ac es-pc">
					<image class="es-icon-52 es-icon-play-last" src="/static/images/other/video/play-last.png" @click="audioBtnEvent('endedPlayPrev')"></image>
					<image class="es-icon-88 es-ml-50 es-mr-50"
						:src="audioPlayIng?'/static/images/other/video/play-stop.png':'/static/image/hall/video_icon.png'" @click="audioBtnEvent('playAudioAction')">
					</image>
					<image class="es-icon-52 es-icon-play-next" src="/static/images/other/video/play-next.png" @click="endedPlayNext('click')"></image>
				</view>
				<view class="audiobox-time audiobox-text">
					<text class="audiobox-text">{{playTime}} / {{formatSeconds(pickCatalog.seconds)}}</text>
				</view>
			</view>
			<view class="audiobox-video" :style="{width: windowWidth + 'px'}">
				<view class="audiobox-video-btn"><text class="audiobox-text" @click="audioBtnEvent('backPlayVideo')">返回视频</text></view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { formatSeconds } from '@/utils/tools.js'
	export default {
		data() {
			return {
				formatSeconds,
				showAudio: false,
				audioPlayIng: false,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				windowWidth: uni.getSystemInfoSync().windowWidth,
				audioboxHeight: 211,
				paddingTop: 15,
				videoContext: null,
				data: {
					isFast: false,
				},
				pickCatalog: {
					videoUrl: "https://tcpv.ylrzcloud.com/course/20241014/1728890026184.mp4",
					thumbnail: "",
					duration: 0,
					videoId: 0,
					seconds: 0,
					studyTime: null
				},
				studyTimes: 0,
				poster: "",
				fullScreen: false,
				direction: "",
				packageJsonList: [],
				showTherapy: false,
				showTherapyItem: {},
				currentTime: 0,
				nodeTime: 0,
				playTime:"00:00",
			}
		},
		onLoad() {
			this.paddingTop = this.statusBarHeight > 0 ? this.statusBarHeight : this.statusBarHeight + uni.upx2px(30)
			this.audioboxHeight = uni.upx2px(425) + this.statusBarHeight
			uni.$on('getPickCatalog', (data) => {
				this.pickCatalog = data
				this.packageJsonList = data.packageJson ? JSON.parse(data.packageJson) : []
			})
			uni.$on('getDataInfo', (data) => {
				this.data = data
			})
			uni.$on('studyTimes', (val) => {
				this.studyTimes = val
			})
			uni.$on('poster', (val) => {
				this.poster = val
			})
			uni.$on('playVideo', (val) => {
				this.videoContext.play();
			})
			uni.$on('pauseVideo', (val) => {
				this.videoContext.pause();
			})
			uni.$on('seekVideo', (val) => {
				this.videoContext.seek(val);
			})
			uni.$on('playTime', (val) => {
				this.playTime = val
			})
			uni.$on('changeData', (data) => {
				this.showAudio = data.showAudio
				this.audioPlayIng = data.audioPlayIng
			})
		},
		onReady() {
			this.videoContext = this.$refs.myVideo2
		},
		onUnload() {
			uni.$off('getPickCatalog')
			uni.$off('getDataInfo')
			uni.$off('studyTimes')
			uni.$off('poster')
			uni.$off('playVideo')
			uni.$off('pauseVideo')
			uni.$off('seekVideo')
			uni.$off('playTime')
			uni.$off('changeData')
			this.videoContext = null
		},
		methods: {
			navBack() {
				uni.$emit("navBack");
			},
			errorvideo(e) {
				console.log("播发错误", e)
			},
			toggleBarChange(event) {
				this.showFullScreenBtn = !this.showFullScreenBtn;
			},
			onPlayVideo() { //视频播放器事件
				uni.$emit("onPlayVideo");
			},
			onPauseVideo() {
				//this.isPlayIng=false;
			},
			onTimeUpdate(res) { //在视频播放时，检查缓存的变化，估算新增的已加载字节数并累加到 dataUsage 中。
				uni.$emit("onTimeUpdate", res);
				this.currentTime = Math.round(res.detail.currentTime)
				uni.$u.throttle(this.checkTherapy, 1000, true);
			},
			checkTherapy() {
				let node = this.packageJsonList.filter(item => item.duration == this.currentTime)
				if (node && node.length > 0) {
					this.nodeTime = node[0].duration
					this.showTherapyItem = node[0]
					if (!this.showTherapy) {
						this.showTherapy = true
					}
				} else {
					if (this.showTherapy && this.nodeTime && this.nodeTime > this.currentTime) {
						this.showTherapy = false
					}
				}
			},
			onFullscreenChange(event) {
				this.fullScreen = event.detail.fullScreen
				// direction取为 vertical 或 horizontal
				this.direction = event.detail.direction
				// 检查是否全屏
				if (!event.detail.fullScreen) {
					// 退出全屏，锁定竖屏
					plus.screen.lockOrientation('portrait-primary');
				}
			},
			onWaiting(res) {
				uni.$emit("onWaiting");
				//this.showToast("qxj onWaiting:"+JSON.stringify(res));
			},
			onProgress(event) {
				//console.log("qxj onProgress:"+JSON.stringify(event));
				//uni.showToast({title:event.detail.buffered,icon: 'none'});
			},
			endedPlayNext(type) {
				console.log('视频播放完成，开始下一个');
				uni.$emit("endedPlayNext",type);
			},
			onVideoCanPlay(res) {
				console.log('视频可以开始播放，但可能需要缓冲');
				//this.showToast("qxj onVideoCanPlay:"+JSON.stringify(res));
			},
			onVideoCanPlayThrough(res) {
				console.log('视频可以无暂停地播放');
				//this.showToast("qxj onVideoCanPlay:"+JSON.stringify(res));
			},
			onLoadeddata(res) {
				//this.showToast("qxj onLoadeddata res:"+JSON.stringify(res));
				console.log('视频缓冲完成');
			},
			onLoadedMetadata(event) { //在视频元数据加载完成时初始化。
				uni.$emit("onLoadedMetadata", event);
			},
			closeTherapy() {
				this.showTherapy = false
			},
			goToPro(productId) {
				this.videoContext.exitFullScreen()
				this.showTherapy = false
				setTimeout(() => {
					uni.navigateTo({
						url: "/pages/store/packageDetails?packageId=" + productId
					});
				}, 500);
			},
			audioBtnEvent(event) {
				uni.$emit("audioBtnEvent",event);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		background-color: #000;
	}

	.audiobox {
		// width: 100%;
		height: 422rpx;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #333;
		z-index: 991;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		&-text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #fff;
		}

		&-video {
			position: absolute;
			bottom: 40rpx;
			left: 0;
			z-index: 992;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
		&-video-btn {
			background-color: rgba(255, 255, 255, 0.3);
			padding: 8rpx 20rpx;
			border-radius: 50rpx;
		}
		&-title {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 992;
			padding: 30rpx 40rpx;
			// padding-top: calc(var(--status-bar-height) + 30rpx);
			width: 100%;
			box-sizing: border-box;
			background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
			color: #ffff;
			display: flex;
			flex-direction: row;
			overflow: hidden;
			align-items: center;
			box-sizing: border-box;
			.textOne {
				flex: 1;
				overflow: hidden;
				verflow: hidden;
				word-break: break-all; /* break-all(允许在单词内换行 */
				text-overflow: ellipsis; /* 超出部分省略号 */
				-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
				-webkit-line-clamp: 1; /* 显示的行数 */
				lines:1;
			}
		}

		&-time {
			margin-top: 18rpx;
			font-size: 24rpx;
		}
	}

	.video-box {
		height: 422rpx;
		overflow: hidden;
		position: relative;
	}

	.back-img {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		top: 20rpx;
		left: 34rpx;
		z-index: 999;
	}

	.horizontal {
		width: 130px;
		height: 150px;
		position: absolute;
		bottom: 50px;
		left: 20px;
		z-index: 999;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		background-color: transparent;

		.es-w-40 {
			width: 20px;
		}

		.es-h-40 {
			height: 20px;
		}

		.goods {
			width: 120px;
			height: 140px;
			border-radius: 10px;
			background-color: rgba(255, 255, 255, 0.4);
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.goodsimg {
			width: 100px;
			height: 100px;
			border-radius: 10px;
		}

		.goodsname {
			width: 100px;
			box-sizing: border-box;
			padding-top: 7px;
			verflow: hidden;
			word-break: break-all;
			/* break-all(允许在单词内换行 */
			text-overflow: ellipsis;
			/* 超出部分省略号 */
			-webkit-box-orient: vertical;
			/* 设置或检索伸缩盒对象的子元素的排列方式 */
			-webkit-line-clamp: 1;
			/* 显示的行数 */
			lines: 1;
		}

		.goodsname-txt {
			font-size: 12px;
			text-overflow: ellipsis;
			/* 超出部分省略号 */
			lines: 1;
		}
	}

	.therapybox {
		width: 290rpx;
		height: 350rpx;
		position: absolute;
		bottom: 100rpx;
		left: 40rpx;
		z-index: 999;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		background-color: transparent;

		.goods {
			width: 270rpx;
			height: 330rpx;
			border-radius: 12rpx;
			background-color: rgba(255, 255, 255, 0.4);
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.goodsimg {
			width: 240rpx;
			height: 240rpx;
			border-radius: 12rpx;
		}

		.goodsname {
			width: 240rpx;
			box-sizing: border-box;
			padding-top: 14rpx;
			verflow: hidden;
			word-break: break-all;
			/* break-all(允许在单词内换行 */
			text-overflow: ellipsis;
			/* 超出部分省略号 */
			-webkit-box-orient: vertical;
			/* 设置或检索伸缩盒对象的子元素的排列方式 */
			-webkit-line-clamp: 1;
			/* 显示的行数 */
			lines: 1;
		}

		.goodsname-txt {
			font-size: 26rpx;
			text-overflow: ellipsis;
			/* 超出部分省略号 */
			lines: 1;
		}
	}
</style>