bugID=1390 视频播放的播放器修改需求

src/components/video-player.vue

@@ -13,6 +13,8 @@ const props = defineProps({
   },
 })
 
+const emits = defineEmits(['scoreAtTarget'])
+
 const videoPlayerRef = shallowRef()
 const player = ref()
 
@@ -28,6 +30,8 @@ function getSourceType(src: string) {
 }
 
 onMounted(() => {
+  if (!videoPlayerRef.value)
+    return
   player.value = videojs(
     videoPlayerRef.value as HTMLVideoElement,
     {
@@ -40,7 +44,7 @@ onMounted(() => {
           'PlayToggle', // 播放
           'NextBtn', // 下一个
           'CurrentTimeDisplay', // 当前时间
-          'ProgressControl', // 进度条
+          // 'ProgressControl', // 进度条
           'DurationDisplay', // 时长
           'VolumePanel', // 音量
           'PlaybackRateMenuButton', // 倍速
@@ -57,13 +61,27 @@ onMounted(() => {
     },
     () => {
       console.log('player is ready')
+      const p = player.value
+      let callbackExecuted = false
+      p.on('timeupdate', () => {
+        // 计算视频已经播放的百分比
+        const percentagePlayed = p.currentTime() / p.duration()
+
+        if (percentagePlayed >= 0.9 && !callbackExecuted) {
+          // 执行回调函数
+          console.log('达到目标时间')
+          emits('scoreAtTarget')
+          p.off('timeupdate')
+          callbackExecuted = true
+        }
+      })
     },
   )
 })
 
 onUnmounted(() => {
   if (player.value)
-    player.value.dispose()
+    player.value?.dispose?.()
 })
 </script>
 

src/pages/detail/[type]/[tmk_id]/[tmz_id].vue

@@ -62,6 +62,16 @@ function fixTruthPid(pid: string) {
   return truthPid
 }
 
+function scoreAtTarget(src: string) {
+  return request({
+    url: `/txwx/${props.type}/detail`,
+    data: {
+      [theType.id]: props.tmz_id,
+      save: 1,
+    },
+  })
+}
+
 function init() {
   loading.value = true
   return request({
@@ -159,7 +169,10 @@ function handleGoodjob() {
     <van-loading type="spinner" />
   </div>
   <template v-else>
-    <video-player :src="getFullPath(detail[theType.video])" :poster="getFullPath(detail[theType.img])" />
+    <video-player
+      :key="detail[theType.video]" :src="getFullPath(detail[theType.video])"
+      :poster="getFullPath(detail[theType.img])" @scoreAtTarget="scoreAtTarget"
+    />
 
     <div class="px-14px py-20px">
       <div class="text-14px font-bold">