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

<script>
	export default {
		data() {
			return {
				videoUrl: "",
				videoContext: null
			};
		},
		onLoad(options) {
			console.log(options, '页面参数');
			// 接收视频地址
			if (options.url) {
				this.videoUrl = options.url;
			}
		},
		onReady() {
			// #ifdef APP-PLUS
			//plus.screen.unlockOrientation(); //解除屏幕方向的锁定，但是不一定是竖屏；
			
			// #endif
			// 初始化视频实例（唯一正确位置）
			this.videoContext = uni.createVideoContext("fullVideo", this);
			// 页面渲染完成后 安全触发自动全屏
			//this.autoFullScreen();
		},
		methods: {
			tapback(e) {
				console.log('点击全屏按钮');
				// if (e.target.fullScreen) {
				// 	plus.screen.lockOrientation('landscape'); //锁死屏幕方向为竖屏
				// }else{
				// 	plus.screen.lockOrientation('portrait'); //锁死屏幕方向为竖屏
				// }
			},
			// 自动全屏（核心：修复iOS方向错乱）
			autoFullScreen() {
				if (!this.videoContext) return;

				// 区分平台设置方向：iOS用0自适应，安卓用90横屏
				const direction = uni.getSystemInfoSync().platform === 'ios' ? 0 : 90;

				// 延迟执行，避免视频未加载完成导致全屏失败
				setTimeout(() => {
					this.videoContext.requestFullScreen({
						direction: direction
					});
				}, 300)
			},
			// 手动横屏全屏
			openFullScreen() {
				if (!this.videoContext) return;
				const direction = uni.getSystemInfoSync().platform === 'ios' ? 0 : 90;
				this.videoContext.requestFullScreen({
					direction
				});
			},
			// 退出全屏
			closeFullScreen() {
				if (!this.videoContext) return;
				this.videoContext.exitFullScreen();
			},
			// 播放监听
			onPlay() {
				console.log("视频开始播放");
			},
			// 暂停监听
			onPause() {
				console.log("视频暂停");
			},
			// 全屏状态切换
			handleFullScreenChange(e) {
				// 全屏隐藏导航栏，退出显示
				// uni.setNavigationBarHidden(!!e.detail.fullScreen);
				console.log("全屏状态：", e.detail.fullScreen);
			},
			// 视频播放完毕
			onVideoEnd() {
				this.closeFullScreen();
			}
		}
	};
</script>

<style scoped>
	.video-page {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
	}

	.video-box {
		width: 100%;
		/* 自适应高度，避免拉伸 */
		height: 100%;
		object-fit: cover;
	}
</style>