Browse Source

优化VideoJSPlayer组件,增强封面图片样式,确保在不同状态下的显示效果。同时,移除不必要的视频模式状态变量,提升代码整洁性和可维护性。

wuyi 2 months ago
parent
commit
72ab3f6a03
2 changed files with 10 additions and 8 deletions
  1. 7 2
      src/components/VideoJSPlayer.vue
  2. 3 6
      src/views/VideoPlayer.vue

+ 7 - 2
src/components/VideoJSPlayer.vue

@@ -2,13 +2,18 @@
   <div class="video-js-container">
     <!-- 封面图片 -->
     <img
-      v-if="processedCoverUrl && !isVideoMode && !forceShowPlayer"
       :src="processedCoverUrl"
       :alt="alt"
       :class="coverClass"
       @error="handleCoverError"
       @load="handleCoverLoad"
-      style="display: block; width: 100%; height: 100%"
+      style="
+        display: block !important;
+        width: 100% !important;
+        height: 100% !important;
+        opacity: 1 !important;
+        z-index: 999 !important;
+      "
     />
 
     <!-- Video.js 播放器容器 -->

+ 3 - 6
src/views/VideoPlayer.vue

@@ -777,7 +777,7 @@ const onLoginSuccess = async () => {
 
 const onVideoPlay = () => {
   // 标记为视频模式
-  isVideoMode.value = true;
+  // isVideoMode.value = true; // 移除此变量
 };
 
 // 监听视频播放进度
@@ -823,9 +823,6 @@ const goBack = () => {
   router.push("/");
 };
 
-// 视频模式状态
-const isVideoMode = ref(false);
-
 // 播放推荐视频
 const playVideo = (video: any) => {
   const vipLevel = userStore.getVipLevel();
@@ -836,7 +833,7 @@ const playVideo = (video: any) => {
   }
 
   // 强制重置视频模式状态
-  isVideoMode.value = false;
+  // isVideoMode.value = false; // 移除此变量
 
   // 确保使用replace而不是push,避免浏览器历史堆积
   if (vipLevel === VipLevel.GUEST || vipLevel === VipLevel.FREE) {
@@ -1324,7 +1321,7 @@ watch(
 
       // 重置购买状态和视频模式
       isSinglePurchased.value = false;
-      isVideoMode.value = false;
+      // isVideoMode.value = false; // 移除此变量
 
       // 重置视频信息和处理封面
       await loadVideoInfo();