样式

pages_course/living.vue

@@ -128,6 +128,7 @@
 							x5-video-player-type="h5" x5-video-orientation="landscape" :webkit-playsinline="true"
 							playsinline="true" :x5-playsinline="true">
 						</video>
+						<view v-else class="txt">回放生成中...</view>
 
 						<view v-if="showCustomControls && liveItem.showType==1 && !isFullscreen" class="custom-controls"
 							@click.stop="toggleFullscreen">
@@ -454,9 +455,9 @@
 					</view>
 				</view>
 			</u-popup>
-
 			<!-- 消息弹窗 -->
-			<u-popup :show="isShowPopMsg" round="20rpx" mode="center" zIndex="10076">
+			<!-- :show="isShowPopMsg"  -->
+			<u-popup show="true" round="20rpx" mode="center" zIndex="10076">
 				<view class="message-popup">
 					<image class="message-close-icon"
 						src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/del2.png"
@@ -1376,97 +1377,16 @@
 				// 强制页面重排
 				this.$forceUpdate();
 			},
-			// 添加屏幕方向变化监听
-			addOrientationChangeListener() {
-				if (window.addEventListener) {
-					window.addEventListener('orientationchange', this.handleOrientationChange);
-				}
-			},
-
-			// 移除屏幕方向变化监听
-			removeOrientationChangeListener() {
-				if (window.removeEventListener) {
-					window.removeEventListener('orientationchange', this.handleOrientationChange);
-				}
-			}, // 处理屏幕方向变化
-			handleOrientationChange() {
-				// 在小程序中，使用 uni.onWindowResize 或 uni.onDeviceOrientationChange
-				uni.onWindowResize((res) => {
-					const windowWidth = res.size.windowWidth;
-					const windowHeight = res.size.windowHeight;
-					const isLandscape = windowWidth > windowHeight;
 
-					if (this.isFullscreen && !isLandscape) {
-						console.log('全屏状态下屏幕方向不正确，尝试退出全屏');
-						if (this.videoContext) {
-							this.videoContext.exitFullScreen();
-						}
-					}
-				});
-			}, // 恢复videolist盒子
+			// 恢复videolist盒子
 			restoreVideoList() {
 				this.isVideoRotated = false;
 				this.isFullscreen = false;
-				console.log('恢复视频容器竖屏状态');
-			},
-
-
-			// 强制横屏全屏（备用方案）
-			forceLandscapeFullscreen() {
-				// 尝试多种全屏方式
-				try {
-					// 方案1: 使用video的requestFullScreen
-					if (this.videoContext) {
-						this.videoContext.requestFullScreen({
-							direction: 90
-						});
-						return true;
-					}
-				} catch (e) {
-					console.log('方案1失败:', e);
-				}
-
-				try {
-					// 方案2: 尝试DOM全屏API
-					const videoElement = document.getElementById(`myVideo_${this.liveId}`);
-					if (videoElement && videoElement.requestFullscreen) {
-						videoElement.requestFullscreen();
-						return true;
-					}
-				} catch (e) {
-					console.log('方案2失败:', e);
-				}
-
-				try {
-					// 方案3: 使用Web API全屏
-					if (document.documentElement.requestFullscreen) {
-						document.documentElement.requestFullscreen();
-						return true;
-					}
-				} catch (e) {
-					console.log('方案3失败:', e);
-				}
-
-				console.log('所有全屏方案都失败了');
-				uni.showToast({
-					title: '无法全屏播放，请尝试手动横屏',
-					icon: 'none'
-				});
-				return false;
 			},
-			// 初始化全屏支持
-			// initFullscreenSupport() {
-			// 	// 检测是否支持全屏API
-			// 	if (document.fullscreenEnabled) {
-			// 		console.log('浏览器支持全屏API');
-			// 	} else {
-			// 		console.log('浏览器不支持全屏API，使用备用方案');
-			// 	}
-			// },
-			// 切换全屏
+			
 			// 切换全屏
 			toggleFullscreen() {
-				console.log('自定义全屏按钮被点击');
+				// console.log('自定义全屏按钮被点击');
 
 				if (this.isFullscreen) {
 					// 退出全屏
@@ -1477,7 +1397,7 @@
 				}
 			}, // 进入全屏
 			enterFullscreen() {
-				console.log('执行进入全屏');
+				// console.log('执行进入全屏');
 				this.isFullscreen = true;
 
 				// 设置横屏样式
@@ -1489,27 +1409,7 @@
 				// 强制页面重排
 				this.$forceUpdate();
 			},
-			// 强制全屏的备用方案
-			forceFullscreen() {
-				console.log('使用备用方案进入全屏');
-
-				const videoId = `myVideo_${this.liveId}`;
-
-				// 在小程序中，只能使用 videoContext
-				if (this.videoContext) {
-					try {
-						this.videoContext.requestFullScreen({
-							direction: 90 // 横屏方向
-						});
-					} catch (error) {
-						console.error('请求全屏失败:', error);
-						uni.showToast({
-							title: '无法全屏播放，请尝试手动横屏',
-							icon: 'none'
-						});
-					}
-				}
-			}, // 隐藏非videolist元素
+			// 隐藏非videolist元素
 			hideNonVideoElements() {
 				this.showNonVideoElementsFlag = false;
 				console.log('隐藏非视频元素');
@@ -1517,8 +1417,8 @@
 			// 显示非videolist元素
 			showNonVideoElements() {
 				this.showNonVideoElementsFlag = true;
-				console.log('显示非视频元素');
-			}, // 防止默认全屏事件
+			}, 
+			// 防止默认全屏事件
 			onFullscreenChange(e) {
 				// 阻止默认全屏行为
 				e.preventDefault();
@@ -1532,17 +1432,12 @@
 						}, 100);
 					}
 				}
-
 			},
 
 			// 旋转videolist盒子
 			rotateVideoList() {
-				// 在小程序中，通过设置CSS类名来控制样式，而不是直接操作DOM
 				this.isVideoRotated = true;
 				this.isFullscreen = true;
-
-				// 在小程序中，应该通过绑定class的方式控制样式
-				// 而不是直接操作DOM
 				console.log('视频容器旋转到横屏状态');
 			},
 			// 全屏状态变化监听
@@ -3431,16 +3326,6 @@
 				}, 1000);
 			},
 
-			// toggleViewerList() {
-			// 	const now = Date.now();
-			// 	if (now - this.lastClickTime > this.clickDelay) {
-			// 		this.showadd = !this.showadd;
-			// 		if (this.showadd) {
-			// 			this.getliveUser(false); // 加载第一页观众
-			// 		}
-			// 		this.lastClickTime = now;
-			// 	}
-			// },
 			// 播放视频
 			playVideo() {
 				if (!this.liveItem) {
@@ -4658,11 +4543,11 @@
 		transition: all 0.3s ease;
 	}
 
-	.video-player.fullscreen {
-		width: 100vh !important;
-		height: 100vw !important;
-		object-fit: contain !important;
-	}
+	// .video-player.fullscreen {
+	// 	width: 100vh !important;
+	// 	height: 100vw !important;
+	// 	object-fit: contain !important;
+	// }
 
 
 
@@ -4694,17 +4579,12 @@
 
 
 
-	@media screen and (orientation: landscape) {
-		.video-container.horizontal-layout {
-			width: 100%;
-			height: 100%;
-		}
-
-		// .video-player {
-		// 	width: 100vh !important;
-		// 	height: 100vw !important;
-		// }
-	}
+	// @media screen and (orientation: landscape) {
+	// 	.video-container.horizontal-layout {
+	// 		width: 100%;
+	// 		height: 100%;
+	// 	}
+	// }