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

src/components/detail/imageWatch.vue

@@ -1,5 +1,6 @@
 <template>
-    <div class="watch-box" v-show="show">
+    <!-- <div class="watch-box" v-show="show"> -->
+    <div class="watch-box">
         <div class="pos-r dis-f al-item jus-x mg-t-60">
             <div class="carousel-w">
                 <el-carousel arrow="never" height="600px" :autoplay="false" :initial-index="props.index" indicator-position="none" ref="carousel" @change="carouselChange">
@@ -7,7 +8,8 @@
                         <div class="dis-f jus-x al-item" v-if="item">
                             <div class="img-box dis-f jus-x" v-if="item['type'] != 'attachment'" style="align-items: center;">
                                 <video-box :src="item.url || item['videourl']" :val="i" :poster="item.thumbnail" :imageTab="imageTab"></video-box>
-                                <!-- <video ref="video" v-if="i >= imageTab - 1 && i <= imageTab + 1" :autoplay="false" controls :src="item.url || item['videourl']" :preload="imageTab == i ? 'metadata' : 'none'" style="width: 800px;"></video> -->                            </div>
+                                <!-- <video ref="video" v-if="i >= imageTab - 1 && i <= imageTab + 1" :autoplay="false" controls :src="item.url || item['videourl']" :preload="imageTab == i ? 'metadata' : 'none'" style="width: 800px;"></video> -->
+                            </div>
                             <div class="img-box dis-f jus-x" v-else>
                                 <img v-if="i >= imageTab - 1 && i <= imageTab + 1" :src="(item && item.url) || item['imageurl'] || item['image']" class="img" alt="" />
                             </div>

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>

src/views/apartmentDetail.vue

@@ -18,7 +18,8 @@
             </div>
             <div class="header-content flexflex">
                 <div class="header-left">
-                    <image-watch style="z-index: 10000;" arrow="never" :index="imageIndex" :show="imageShow" :close="cloaseImageShow" :list="imageList"></image-watch>
+                    <!-- <image-watch style="z-index: 10000;" arrow="never" :index="imageIndex" :show="imageShow" :close="cloaseImageShow" :list="imageList"></image-watch> -->
+                    <image-watch arrow="never" :index="imageIndex" v-if="imageShow" :close="cloaseImageShow" :list="imageList"></image-watch>
                     <div class="slideshow">
                         <el-carousel :autoplay="false" arrow="never" indicator-position="none" ref="remarkCaruselUp" @change="carouselChange">
                             <el-carousel-item class="flexcenter" v-for="(item, index) in allCarouselsData" :key="index">

src/views/detail.vue

@@ -772,7 +772,8 @@
             </div>
         </div>
     </div>
-    <watchImage :show="imageShow" :index="imageIndex" :close="cloaseImageShow" :list="imgList"></watchImage>
+    <!-- <watchImage :show="imageShow" :index="imageIndex" :close="cloaseImageShow" :list="imgList"></watchImage> -->
+    <watchImage v-if="imageShow" :index="imageIndex" :close="cloaseImageShow" :list="imgList"></watchImage>
     <back-to-top></back-to-top>
     <!-- 举报 -->
     <report :id="uniqid"></report>