workApp/pages/my/help.vue

<template>
	<view class="page_help">
		<view class="help_item" v-for="(item,index) in helpList" :key="index">
			<view class="item_title">
				{{item.title}}
			</view>
			<view class="item_list">
				<view v-for="(video,vIndex) in item.list" :key="vIndex" class="video_item">
					<view class="image_item" @click="playVideo(video.url)">
						<view class="video_title_span">{{video.title}}</view>
					</view>
					<!-- <video
						:id="'video_' + index + '_' + vIndex"
						poster="@/static/image/bg/video_bg.png"
						:src="video.url" 
						class="image_item"
						enable-fullscreen

						controls="false"
						show-center-play-btn="false"
					    show-play-btn="false"
						
						@ended="onEnded('video_' + index + '_' + vIndex)"
						@click="togglePlay(video.url, 'video_' + index + '_' + vIndex)"
					></video> -->
					<view class="video_title">
						{{video.title}}
					</view>
				</view>
			</view>
		</view>
		<view class="video_play_content" v-if="showVideoPlayer">
			<video
				id="video_paly"
				poster="@/static/image/bg/video_bg.png"
				:src="currentVideoUrl" 
				class="image_item"
				enable-fullscreen
				controls="false"
				show-center-play-btn="false"
			    show-play-btn="false"
				@fullscreenchange="onFullscreenChange"
				
				@click="togglePlay()"
			></video>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { useStore } from 'vuex';

	const store = useStore();
	const currentVideoUrl=ref('');//当前视频的播放地址

	let videoContext = null;
	const showVideoPlayer=ref(false);//是否显示视频播放器
	const helpList=ref([
		{
			title:'在线制卡',
			list:[
				{
					title:'在线制卡',
					img:'',
					url:'https://videos.k12100.net/在线制卡.mp4',
				},
			],
		},
		{
			title:'我的考试',
			list:[
				{
					title:'制作模板',
					img:'',
					url:'https://videos.k12100.net/1.制作模板.mp4',
				},
				{
					title:'画批阅块',
					img:'',
					url:'https://videos.k12100.net/2.画批阅块.mp4',
				},
				{
					title:'设给分点',
					img:' ',
					url:'https://videos.k12100.net/3.设给分点.mp4',
				},
				{
					title:'录入标答',
					img:' ',
					url:'https://videos.k12100.net/4.录入标答.mp4',
				},
				
				{
					title:'扫描学生',
					img:' ',
					url:'https://videos.k12100.net/5.扫描学生.mp4',
				},
				{
					title:'分配任务',
					img:' ',
					url:'https://videos.k12100.net/6.分配任务.mp4',
				},
				{
					title:'阅卷进度',
					img:' ',
					url:'https://videos.k12100.net/7.阅卷进度.mp4',
				},
				{
					title:'发布成绩',
					img:' ',
					url:'https://videos.k12100.net/8.发布成绩.mp4',
				},
			],
		},
		{
			title:'在线阅卷',
			list:[
				{
					title:'批阅试卷',
					img:' ',
					url:'https://videos.k12100.net/批阅试卷.mp4',
				},
				{
					title:'知识点录入',
					img:' ',
					url:'https://videos.k12100.net/知识点录入.mp4',
				},
			],
		},
		{
			title:'成绩纠错',
			list:[
				{
					title:'成绩纠错',
					img:' ',
					url:'https://videos.k12100.net/成绩纠错.mp4',
				},
				
			],
		},
	]);

	onMounted(() => {
		
		
	});

	
	const playVideo=(url)=>{
		console.log("打印当前的播放地址",url);
		// 暂停之前播放的视频
		if (videoContext) {
			videoContext.pause();
		}
		showVideoPlayer.value=true;//显示视频播放器
		currentVideoUrl.value=url;//设置视频地址
		setTimeout(() => {
			// 3. 获取 video_paly 的视频上下文
			const context = uni.createVideoContext('video_paly');
			console.log("打印视频上下文",context);
			if (context) {
				// 4. 播放视频
				context.play();
				// 5. 请求全屏
				context.requestFullScreen();
			}
		}, 300);
	};

	// 监听全屏变化事件
	const onFullscreenChange = (e) => {
		// e.detail.fullScreen 为 false 表示退出全屏
		if (!e.detail.fullScreen) {
			// 暂停视频
			console.log("退出全屏,清空播放并暂停");
			if (videoContext) {
				videoContext.pause();
			}
			// 清空视频地址
			currentVideoUrl.value = '';
			// 清空视频上下文引用
			videoContext = null;
			// 隐藏视频播放器
			showVideoPlayer.value = false;
		}
	};

</script>
<style>
	.page_help
	{
		width: 100%;
		height: 100%;
		background-color: #F8F9FD;
		overflow-y: auto;
	}
	.help_item
	{
		width: 100%;
		height: auto;
	}
	.item_title
	{
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		line-height: 48rpx;
		margin-top: 20rpx;
		text-indent: 24rpx;
	}
	
	.item_list
	{
		width: calc(100% - 22rpx);
		margin-left: 22rpx;
		height: auto;
		display: flex;
		justify-content: flex-start;
		gap: 22rpx;
		flex-wrap: wrap;
		margin-top: 10rpx;
		margin-bottom: 20rpx;

	}
	
	.video_item
	{
		width: calc(50% - 22rpx);
		height: auto;

		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}
	
	.image_item
	{
		width: 100%;
		min-height: 190rpx;
		height: auto;
		background-image: url('@/static/image/bg/video_bg.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		cursor: pointer;
		position: relative;
	}
	.video_title
	{
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 50rpx;
		height: 50rpx;
	}
	
	.video_title_span
	{
		position: absolute;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		top:50rpx;
		left: 20rpx;
	}
	/* 播放按钮图标 */
	.play_icon {
		font-size: 60rpx;
		color: #fff;
		text-shadow: 0 0 10rpx rgba(0,0,0,0.5);
	}
	
	.play_overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		z-index: 10;
	}
	
	.video_play_content
	{
		
	}
</style>