播放视频页面添加

manifest.json

@@ -10,6 +10,13 @@
         "usingComponents" : true,
         "nvueStyleCompiler" : "uni-app",
         "compilerVersion" : 3,
+		"screenOrientation" : [
+		    //可选，字符串数组类型，应用支持的横竖屏
+		    "portrait-primary", //可选，字符串类型，支持竖屏
+		    "portrait-secondary", //可选，字符串类型，支持反向竖屏
+		    "landscape-primary", //可选，字符串类型，支持横屏
+		    "landscape-secondary" //可选，字符串类型，支持反向横屏
+		],
         "compatible" : {
             "ignoreVersion" : true //true表示忽略版本检查提示框，HBuilderX1.9.0及以上版本支持  
         },

pages.json

@@ -596,6 +596,12 @@
 				"navigationStyle": "custom"
 			}
 		},
+		{
+			"path": "pages/shop/photoAlbum/videoplayer",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
 		{
 			"path": "pages/shop/photoAlbum/videoList",
 			"style": {

pages/shop/photoAlbum/addPhoto.vue

@@ -220,14 +220,16 @@
 				// uni.navigateTo({
 				// 	url: `/pages/album/list?urls=${encodeURIComponent(JSON.stringify(urls))}`
 				// });
-				this.videoPlay = true; // 显示播放盒子
+				// this.videoPlay = true; // 显示播放盒子
-				this.videoContext = uni.createVideoContext("myvideo", this); // this这个是实例对象 必传
+				// this.videoContext = uni.createVideoContext("myvideo", this); // this这个是实例对象 必传
-				this.videoUrl = this.formData.url;
+				// this.videoUrl = this.formData.url;
-				this.videoContext.requestFullScreen({
+				// this.videoContext.requestFullScreen({
-					direction: 90
+				// 	direction: 90
-				});
+				// });
-				this.videoContext.play();
+				// this.videoContext.play();
-
+				uni.navigateTo({
+					url: '/pages/shop/photoAlbum/videoplayer?url=' + this.formData.url
+				})
 
 			},
 			async submitPhoto() {

pages/shop/photoAlbum/videoplayer.vue

@@ -0,0 +1,106 @@
+<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>