Browse Source

feat: 实现视频互斥播放,任意视频播放时暂停其他视频

在学生页面添加视频互斥播放功能,当任意视频触发 play 事件时,暂停页面上其他所有正在播放的视频。同时修复视频暂停时控制器状态未同步更新的问题,调整导入方式以符合规范。
lsc 5 days ago
parent
commit
93279ab391

+ 12 - 0
src/views/Student/index.vue

@@ -4108,9 +4108,20 @@ const addOp3 = async (userTime: any, loadTime: any, object: any, status: any) =>
     })
 }
 
+// 视频互斥播放:任意 video 触发 play 时,暂停页面上其他所有 video
+const handleVideoPlay = (e: Event) => {
+  const target = e.target as HTMLVideoElement
+  if (!(target instanceof HTMLVideoElement)) return
+  document.querySelectorAll('video').forEach(v => {
+    if (v !== target && !v.paused) v.pause()
+  })
+}
+
 onMounted(() => {
   
   document.addEventListener('keydown', handleKeydown)
+  // capture 阶段监听,覆盖原生控件/脚本调用等所有触发路径
+  document.addEventListener('play', handleVideoPlay, true)
 
   // 处理URL参数
   if (props.courseid || props.type) {
@@ -4252,6 +4263,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   document.removeEventListener('keydown', handleKeydown)
+  document.removeEventListener('play', handleVideoPlay, true)
   window.removeEventListener('resize', calculateScale)
   document.removeEventListener('fullscreenchange', handleFullscreenChange)
 

+ 12 - 0
src/views/Student/index2.vue

@@ -3924,9 +3924,20 @@ const addOp3 = async (userTime: any, loadTime: any, object: any, status: any) =>
     })
 }
 
+// 视频互斥播放:任意 video 触发 play 时,暂停页面上其他所有 video
+const handleVideoPlay = (e: Event) => {
+  const target = e.target as HTMLVideoElement
+  if (!(target instanceof HTMLVideoElement)) return
+  document.querySelectorAll('video').forEach(v => {
+    if (v !== target && !v.paused) v.pause()
+  })
+}
+
 onMounted(() => {
   
   document.addEventListener('keydown', handleKeydown)
+  // capture 阶段监听,覆盖原生控件/脚本调用等所有触发路径
+  document.addEventListener('play', handleVideoPlay, true)
 
   // 处理URL参数
   if (props.courseid || props.type) {
@@ -4036,6 +4047,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   document.removeEventListener('keydown', handleKeydown)
+  document.removeEventListener('play', handleVideoPlay, true)
   window.removeEventListener('resize', calculateScale)
   document.removeEventListener('fullscreenchange', handleFullscreenChange)
 

+ 1 - 1
src/views/components/element/FrameElement/BaseFrameElement.vue

@@ -122,7 +122,7 @@ import {
 } from '@/configs/englishSpeakingTools'
 import { ref, watch, nextTick } from 'vue'
 import { computed } from 'vue'
-import { useImport } from '@/hooks/useImport'
+import useImport from '@/hooks/useImport'
 import { useSlidesStore } from '@/store/slides'
 import api from '@/services/course'
 

+ 1 - 1
src/views/components/element/VideoElement/VideoPlayer/index.vue

@@ -28,7 +28,7 @@
         @ended="handleEnded()"
         @progress="handleProgress()"
         @play="autoHideController(); paused = false"
-        @pause="autoHideController()"
+        @pause="paused = true; autoHideController()"
         @error="handleError()"
       ></video>
       <div class="bezel">