fix(视频播放器): 修复视频封面缺失时的背景显示问题

在视频封面缺失时，播放器区域显示为透明背景，导致视觉不一致。为 VideoPlayer 组件添加黑色背景，并在 StudyDetailPage 中动态设置封面容器的背景色：有封面时透明，无封面时黑色。同时优化 useVideoPlayer 配置逻辑，避免传递空的 poster 属性。

@@ -196,6 +196,7 @@ defineExpose({
   height: 100%;
   height: 100%;
   display: block;
   display: block;
   aspect-ratio: 16/9;
   aspect-ratio: 16/9;
+  background-color: #000;
 }
 }
 
 
 .video-player.loading {
 .video-player.loading {

@@ -276,42 +276,48 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) {
     return !canPlayHlsNatively();
     return !canPlayHlsNatively();
   });
   });
 
 
-  const videoOptions = computed(() => ({
-    controls: true,
-    preload: "metadata",
-    responsive: true,
-    autoplay: props.autoplay,
-    playsinline: true,
-    playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 2],
-    sources: videoSources.value,
-    html5: {
-      vhs: {
-        overrideNative: shouldOverrideNativeHls.value,
+  const videoOptions = computed(() => {
+    const base = {
+      controls: true,
+      preload: "metadata",
+      responsive: true,
+      autoplay: props.autoplay,
+      playsinline: true,
+      playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 2],
+      sources: videoSources.value,
+      html5: {
+        vhs: {
+          overrideNative: shouldOverrideNativeHls.value,
+        },
+        nativeVideoTracks: false,
+        nativeAudioTracks: false,
+        nativeTextTracks: false,
+        hls: {
+          withCredentials: false
+        }
       },
       },
-      nativeVideoTracks: false,
-      nativeAudioTracks: false,
-      nativeTextTracks: false,
-      hls: {
-        withCredentials: false
-      }
-    },
-    techOrder: ['html5'],
-    userActions: {
-      hotkeys: true,
-      doubleClick: true,
-    },
-    controlBar: {
-      progressControl: {
-        seekBar: {
-          mouseTimeDisplay: {
-            keepTooltipsInside: true,
+      techOrder: ['html5'],
+      userActions: {
+        hotkeys: true,
+        doubleClick: true,
+      },
+      controlBar: {
+        progressControl: {
+          seekBar: {
+            mouseTimeDisplay: {
+              keepTooltipsInside: true,
+            },
           },
           },
         },
         },
       },
       },
-    },
-    ...props.options,
-    errorDisplay: false,
-  }));
+      ...props.options,
+      errorDisplay: false,
+    };
+    if (!base.poster) {
+      delete base.poster;
+    }
+    return base;
+  });
 
 
   // 8. Video.js 挂载处理
   // 8. Video.js 挂载处理
   const handleVideoJsMounted = (payload) => {
   const handleVideoJsMounted = (payload) => {

@@ -10,8 +10,8 @@
                 <!-- 视频播放区域 -->
                 <!-- 视频播放区域 -->
                 <div v-if="course.course_type === 'video'" class="w-full relative">
                 <div v-if="course.course_type === 'video'" class="w-full relative">
                     <!-- 视频封面和播放按钮 -->
                     <!-- 视频封面和播放按钮 -->
-                    <div v-if="!isPlaying" class="relative w-full" style="aspect-ratio: 16/9;">
-                        <img :src="courseFile.cover" :alt="course.title" class="w-full h-full object-cover" />
+                    <div v-if="!isPlaying" class="relative w-full" :style="{ aspectRatio: '16/9', backgroundColor: courseFile.cover ? 'transparent' : '#000' }">
+                        <img v-if="courseFile.cover" :src="courseFile.cover" :alt="course.title" class="w-full h-full object-cover" />
                         <div class="absolute inset-0 flex items-center justify-center cursor-pointer"
                         <div class="absolute inset-0 flex items-center justify-center cursor-pointer"
                             @click="startPlay">
                             @click="startPlay">
                             <div
                             <div