feat(视频播放器): 添加获取播放器实例方法和播放状态参数传递

为VideoPlayer组件添加getPlayer方法暴露播放器实例
在play/pause事件中传递payload参数
在StudyDetailPage中记录视频时长和播放位置

@@ -113,10 +113,10 @@ const handleMounted = (payload) => {
 };
 
 const handlePlay = (payload) => {
-  emit("onPlay")
+  emit("onPlay", payload)
 };
 const handlePause = (payload) => {
-  emit("onPause")
+  emit("onPause", payload)
 }
 
 onBeforeUnmount(() => {
@@ -138,6 +138,9 @@ defineExpose({
       emit('onPlay', player.value);
     }
   },
+  getPlayer() {
+    return player.value;
+  }
 });
 </script>
 

@@ -29,7 +29,7 @@
                 <div v-if="course.course_type === 'audio'" class="w-full relative"
                     style="border-bottom: 1px solid #F3F4F6;">
                     <!-- 音频播放器 -->
-                    <AudioPlayer v-if="audioList.length" :songs="audioList" @play="onAudioPlay" @pause="onAudioPause" />
+                    <AudioPlayer ref="audioPlayerRef" v-if="audioList.length" :songs="audioList" @play="onAudioPlay" @pause="onAudioPause" />
                 </div>
                 <!-- 图片列表展示区域 -->
                 <div v-if="course.course_type === 'image'" class="w-full relative">
@@ -266,6 +266,7 @@ const newComment = ref('');
 const showCatalog = ref(false);
 const isPlaying = ref(false);
 const videoPlayerRef = ref(null);
+const audioPlayerRef = ref(null);
 const showCommentPopup = ref(false);
 const popupComment = ref('');
 
@@ -288,13 +289,13 @@ const startPlay = async () => {
 };
 
 // 处理视频播放状态
-const handleVideoPlay = () => {
+const handleVideoPlay = (video) => {
     isPlaying.value = true;
     // 学习时长埋点开始
     startAction();
 };
 
-const handleVideoPause = () => {
+const handleVideoPause = (video) => {
     // 保持视频播放器可见，只在初始状态显示封面
     // 学习时长埋点结束
     endAction();
@@ -704,6 +705,10 @@ const onAudioPause = (audio) => {
     endAction();
 }
 
+// 记录视频时长和当前播放位置的变量
+const videoDuration = ref(0);
+const currentPosition = ref(0);
+
 /**
  * 开始操作
  * @param action
@@ -715,6 +720,11 @@ const startAction = (action, item) => {
         clearInterval(window.actionTimer);
     }
 
+    // 获取视频总时长（如果是视频播放）
+    if (videoPlayerRef.value && videoPlayerRef.value.getPlayer()) {
+        videoDuration.value = videoPlayerRef.value.getPlayer().duration();
+    }
+
     // 生成唯一标识符
     let uuid = uuidv4();
     console.warn('开始操作', uuid);
@@ -722,6 +732,13 @@ const startAction = (action, item) => {
     // 设置定时器，持续执行操作
     window.actionTimer = setInterval(() => {
         console.warn('持续操作中', uuid);
+
+        // 更新当前播放位置（如果是视频播放）
+        if (videoPlayerRef.value && videoPlayerRef.value.getPlayer()) {
+            currentPosition.value = videoPlayerRef.value.getPlayer().currentTime();
+            console.log('视频总时长:', videoDuration.value, '当前位置:', currentPosition.value);
+        }
+
         // 这里可以添加需要持续执行的具体操作
     }, 1000); // 每秒执行一次，可以根据需求调整时间间隔
 }
@@ -732,6 +749,12 @@ const startAction = (action, item) => {
  * @param item
  */
 const endAction = (action, item) => {
+    // 在结束前记录最后的播放位置
+    if (videoPlayerRef.value && videoPlayerRef.value.player) {
+        window.currentPosition = videoPlayerRef.value.player.currentTime();
+        console.log('结束时 - 视频总时长:', window.videoDuration, '最终位置:', window.currentPosition);
+    }
+
     // 清除定时器，停止执行startAction
     if (window.actionTimer) {
         clearInterval(window.actionTimer);