roamfuding-xcx/pages/video/index.vue

<template>
	<view class="video-page">
		<view class="video-container">
			<video 
				:id="videoId"
				:src="videoUrl" 
				class="video-player"
				controls
				autoplay
				enable-play-gesture
				show-center-play-btn
				object-fit="contain"
				direction="90"
				@fullscreenchange="onFullscreenChange"
				@play="onPlay"
				@pause="onPause"
				@click="onVideoClick"
				@loadedmetadata="onLoadedMetadata">
			</video>
		</view>
		<view class="close-btn" @click="goBack" v-if="!isFullscreen">
			<text>×</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoUrl: '',
				videoId: 'videoPlayer',
				isFullscreen: false
			}
		},
		onLoad(options) {
			// 获取传递过来的视频链接
			if (options.url) {
				this.videoUrl = decodeURIComponent(options.url)
			}
			// 设置横屏
			this.setOrientation('landscape')
		},
		onReady() {
			// 页面加载完成后自动进入全屏横屏播放
			this.$nextTick(() => {
				setTimeout(() => {
					this.requestFullScreen()
				}, 500)
			})
		},
		onUnload() {
			// 页面卸载时恢复竖屏
			this.setOrientation('portrait')
		},
		onBackPress() {
			// 拦截返回按钮
			if (this.isFullscreen) {
				// 如果全屏，先退出全屏
				this.exitFullScreen()
				return true
			}
			// 恢复竖屏
			this.setOrientation('portrait')
			return false
		},
		methods: {
			// 设置屏幕方向
			setOrientation(orientation) {
				// #ifdef APP-PLUS
				plus.screen.lockOrientation(orientation === 'landscape' ? 'landscape-primary' : 'portrait-primary')
				// #endif
				
				// #ifdef H5
				// H5端可以通过CSS控制，但需要用户手动横屏
				// #endif
			},
			// 视频元数据加载完成
			onLoadedMetadata() {
				// 元数据加载完成后，尝试自动播放
				this.$nextTick(() => {
					setTimeout(() => {
						this.playVideo()
					}, 300)
				})
			},
			// 全屏状态变化
			onFullscreenChange(e) {
				this.isFullscreen = e.detail.fullScreen
				if (this.isFullscreen) {
					// 进入全屏后自动播放
					this.$nextTick(() => {
						setTimeout(() => {
							this.playVideo()
						}, 300)
					})
				} else {
					// 退出全屏时返回上一页
					this.setOrientation('portrait')
					setTimeout(() => {
						uni.navigateBack()
					}, 300)
				}
			},
			// 播放事件
			onPlay() {
				// 播放时确保全屏
				if (!this.isFullscreen) {
					this.requestFullScreen()
				}
			},
			// 暂停事件
			onPause() {
				
			},
			// 视频点击事件
			onVideoClick() {
				// 点击视频时进入全屏
				if (!this.isFullscreen) {
					this.requestFullScreen()
				}
			},
			// 播放视频
			playVideo() {
				const videoContext = uni.createVideoContext(this.videoId, this)
				videoContext.play()
			},
			// 请求全屏
			requestFullScreen() {
				const videoContext = uni.createVideoContext(this.videoId, this)
				videoContext.requestFullScreen({
					direction: 90 // 横屏（90度）
				})
				// 进入全屏后自动播放
				this.$nextTick(() => {
					setTimeout(() => {
						this.playVideo()
					}, 500)
				})
			},
			// 退出全屏
			exitFullScreen() {
				const videoContext = uni.createVideoContext(this.videoId, this)
				videoContext.exitFullScreen()
			},
			// 返回
			goBack() {
				if (this.isFullscreen) {
					this.exitFullScreen()
				} else {
					// 恢复竖屏
					this.setOrientation('portrait')
					uni.navigateBack()
				}
			}
		}
	}
</script>

<style lang="scss">
	.video-page {
		width: 100%;
		height: 100vh;
		background-color: #000;
		position: relative;
		
		.video-container {
			width: 100%;
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.video-player {
				width: 100%;
				height: 100%;
			}
		}
		
		.close-btn {
			position: fixed;
			top: 40rpx;
			right: 40rpx;
			width: 80rpx;
			height: 80rpx;
			background-color: rgba(255, 255, 255, 0.2);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 9999;
			transition: all 0.3s;
			
			&:active {
				background-color: rgba(255, 107, 153, 0.6);
				transform: scale(0.95);
			}
			
			text {
				font-size: 56rpx;
				color: #fff;
				line-height: 1;
				font-weight: 300;
			}
		}
	}
</style>