预览切换视频暂停播放前一个视频

src/components/public/video-box.vue

@@ -1,5 +1,6 @@
 <template>
-    <video v-if="!ism3u8" class="11111" :autoplay="false" controls :src="src" style="width: 800px;"></video>
+    <!-- <video v-if="!ism3u8" class="11111" :autoplay="false" controls :src="src" style="width: 800px;"></video> -->
+    <video v-if="!ism3u8" ref="videoRef" class="video" :autoplay="false" controls :src="src" :preload="val == imageTab ? 'auto' : 'none'" style="width: 800px;" :poster="poster"></video>
     <video v-else :id="'video' + val" style="width: 800px;" class="video video-js vjs-default-skin vjs-big-play-centered" preload="auto" controls :poster="poster">
         <source type="application/x-mpegURL" />
         <source type="video/mp4" />
@@ -9,9 +10,18 @@
 </template>
 <script setup>
 import videojs from "video.js"
-import "video.js/dist/video-js.css"
+// import "video.js/dist/video-js.css"
 import { reactive, onMounted, ref, defineProps, watchEffect, watch, onUnmounted, nextTick } from "vue"
 
+const onCanPlay = event => {
+    console.log("视频可以播放了")
+    // 这里可以添加额外的逻辑，例如显示播放按钮等
+}
+const onError = event => {
+    console.error("视频加载错误", event)
+    // 处理视频加载错误
+}
+
 const props = defineProps({
     src: {
         type: String,
@@ -25,15 +35,30 @@ const props = defineProps({
         type: Number,
         default: "",
     },
+    poster: String,
 })
 
+const videoRef = ref(null)
+
 watch(
     () => props.imageTab,
     newVal => {
         if (newVal != props.val) {
+            // console.log("videoRef", videoRef.value)
             if (player.value != null) {
                 player.value.pause() // dispose()会直接删除Dom元素
             }
+
+            if (videoRef.value) {
+                if (!videoRef.value.paused) {
+                    // console.log("视频正在播放，现在停止.")
+                    videoRef.value.pause()
+                } else {
+                    // console.log("视频已经暂停.")
+                }
+            } else {
+                // console.error("Video element not found.")
+            }
         }
     }
 )
@@ -77,6 +102,4 @@ onUnmounted(() => {
     }
 })
 </script>
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>