XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
A1300399510
2024-09-26 14:12:38 +08:00
parent 2c5b4255aa
commit 7b0de16bcf
19 changed files with 51 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/detail/imageWatch.vue
View File

@@ -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>

33
src/components/public/video-box.vue
View File

@@ -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>