mrr.sj.front/pages/album/components/videoSlide.nvue

<template>
	<view class="video-page">
		<!-- 原生视频组件：全端兼容 -->
		<video id="fullVideo" class="video-box" :src="videoUrl" controls show-fullscreen-btn enable-progress-gesture
			:autoplay="false" :loop="false" :muted="false" @play="onPlay" @pause="onPause"
			@fullscreenchange="handleFullScreenChange" @ended="onVideoEnd"></video>

		<!-- 自定义操作按钮 -->
		<view class="btn-wrap">
			<button type="primary" size="default" @click="openFullScreen">
				手动横屏全屏播放
			</button>
			<button type="warn" size="default" @click="closeFullScreen">
				退出全屏
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 测试视频地址，替换自己的
				videoUrl: "https://www.w3school.com.cn/i/movie.mp4",
				videoContext: null
			};
		},
		onReady() {
			// 初始化视频实例
			this.videoContext = uni.createVideoContext("fullVideo", this);
		},
		methods: {
			// 进入横屏全屏
			openFullScreen() {
				// direction 90：横屏；-90反向横屏；0自适应
				this.videoContext.requestFullScreen({
					direction: 90
				});
			},
			// 退出全屏
			closeFullScreen() {
				this.videoContext.exitFullScreen();
			},
			// 播放监听
			onPlay() {
				console.log("视频开始播放");
			},
			// 暂停监听
			onPause() {
				console.log("视频暂停");
			},
			// 全屏状态切换监听
			handleFullScreenChange(e) {
				if (e.detail.fullScreen) {
					uni.setNavigationBarHidden(true); // 全屏隐藏顶部导航
				} else {
					uni.setNavigationBarHidden(false); // 退出恢复导航
				}
				console.log("当前全屏状态：", e.detail.fullScreen);
			},
			// 视频播放结束
			onVideoEnd() {
				// 播放完毕自动退出全屏
				this.videoContext.exitFullScreen();
			}
		}
	};
</script>

<style scoped>
	.video-page {
		padding: 15rpx;
	}

	.video-box {
		width: 100%;
		height: 420rpx;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.btn-wrap {
		margin-top: 30rpx;
		display: flex;
		gap: 20rpx;
	}
</style>