fix(视频播放器): 修复视频播放器初始化及播放逻辑问题

确保视频播放器组件完全初始化后再执行播放操作
增加播放失败时的错误处理和静音播放重试逻辑
添加调试日志帮助追踪播放流程

@@ -113,6 +113,8 @@ const videoOptions = computed(() => ({
 }));
 
 const handleMounted = (payload) => {
+  console.log('VideoPlayer: handleMounted 被调用');
+  console.log('VideoPlayer: payload.player:', payload.player);
   state.value = payload.state;
   player.value = payload.player;
   if (player.value) {
@@ -259,14 +261,60 @@ defineExpose({
     }
   },
   play() {
-    if (player.value && !player.value.isDisposed && typeof player.value.isDisposed === 'function' && !player.value.isDisposed()) {
-      try {
-        player.value?.play();
-        emit('onPlay', player.value);
-      } catch (e) {
-        console.warn('Video play error:', e);
+    console.log('VideoPlayer: play() 被调用');
+    console.log('VideoPlayer: player.value:', player.value);
+    console.log('VideoPlayer: player.value?.isDisposed:', player.value?.isDisposed);
+
+    if (!player.value) {
+      console.error('VideoPlayer: player.value 不存在，播放器可能还没初始化');
+      return;
+    }
+
+    if (!player.value.isDisposed || typeof player.value.isDisposed !== 'function') {
+      console.error('VideoPlayer: isDisposed 方法不存在');
+      return;
+    }
+
+    if (player.value.isDisposed()) {
+      console.error('VideoPlayer: 播放器已被销毁');
+      return;
+    }
+
+    console.log('VideoPlayer: 尝试播放视频');
+
+    // 检查视频元素状态
+    try {
+      const tech = player.value.tech(true);
+      if (tech && tech.el) {
+        const videoEl = tech.el();
+        console.log('VideoPlayer: videoEl.readyState:', videoEl?.readyState, '(0=HAVE_NOTHING, 1=HAVE_METADATA, 2=HAVE_CURRENT_DATA, 3=HAVE_FUTURE_DATA, 4=HAVE_ENOUGH_DATA)');
+        console.log('VideoPlayer: videoEl.paused:', videoEl?.paused);
+        console.log('VideoPlayer: videoEl.duration:', videoEl?.duration);
+        console.log('VideoPlayer: videoEl.src:', videoEl?.src);
       }
+    } catch (e) {
+      console.warn('VideoPlayer: 无法获取video元素:', e);
     }
+
+    player.value.play()
+      .then(() => {
+        console.log('VideoPlayer: play() 成功');
+      })
+      .catch(error => {
+        console.error('VideoPlayer: play() 失败:', error.name, error.message);
+        // 如果是因为自动播放策略失败，可以静音重试
+        if (error.name === 'NotAllowedError') {
+          console.log('VideoPlayer: 浏览器阻止自动播放，尝试静音播放');
+          player.value.muted(true);
+          player.value.play()
+            .then(() => {
+              console.log('VideoPlayer: 静音播放成功');
+            })
+            .catch(err => {
+              console.error('VideoPlayer: 静音播放也失败:', err);
+            });
+        }
+      });
   },
   getPlayer() {
     return player.value;

@@ -22,7 +22,7 @@
                         </div>
                     </div>
                     <!-- 视频播放器 -->
-                    <VideoPlayer v-show="isPlaying" ref="videoPlayerRef"
+                    <VideoPlayer v-if="isPlaying" ref="videoPlayerRef"
                         :video-url="courseFile?.list?.length ? courseFile['list'][0]['url'] : ''" :autoplay="false"
                         :video-id="courseFile?.list?.length ? courseFile['list'][0]['meta_id'] : ''"
                         @onPlay="handleVideoPlay" @onPause="handleVideoPause" />
@@ -307,11 +307,23 @@ const course_type_maps = ref({
 
 // 开始播放视频
 const startPlay = async () => {
+    console.log('StudyDetailPage: startPlay 被调用');
     isPlaying.value = true;
+
+    // 等待 VideoPlayer 组件挂载并初始化完成
     await nextTick();
-    if (videoPlayerRef.value) {
-        videoPlayerRef.value.play();
-    }
+
+    // 需要额外等待 VideoPlayer 组件的 handleMounted 完成
+    // 使用 setTimeout 确保播放器已经初始化
+    setTimeout(() => {
+        console.log('StudyDetailPage: videoPlayerRef.value:', videoPlayerRef.value);
+        console.log('StudyDetailPage: typeof videoPlayerRef.value?.play:', typeof videoPlayerRef.value?.play);
+        if (videoPlayerRef.value) {
+            videoPlayerRef.value.play();
+        } else {
+            console.error('StudyDetailPage: videoPlayerRef.value 不存在');
+        }
+    }, 300); // 增加延迟，确保播放器初始化完成
 };
 
 // 处理视频播放状态