113 lines
3.3 KiB
Vue
113 lines
3.3 KiB
Vue
<template>
|
||
<!-- <video v-if="!ism3u8" class="11111" :autoplay="false" controls :src="src" style="width: 800px;"></video> -->
|
||
<video v-if="!ism3u8" ref="videoRef" loop class="video 11111" :autoplay="val == imageTab ? true : false" controls
|
||
:src="src" :preload="val == imageTab ? 'auto' : 'none'" style="width: 800px; height: 600px;"
|
||
:poster="poster"></video>
|
||
<video v-else :id="'video' + val" loop style="width: 800px; height: 600px;"
|
||
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" />
|
||
<source type="video/webm" />
|
||
<source type="video/ogg" />
|
||
</video>
|
||
</template>
|
||
<script setup>
|
||
import videojs from "video.js"
|
||
// 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,
|
||
default: "",
|
||
},
|
||
val: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
imageTab: {
|
||
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.")
|
||
}
|
||
} else {
|
||
if (videoRef.value) {
|
||
videoRef.value.play()
|
||
}
|
||
}
|
||
}
|
||
)
|
||
|
||
const player = ref(null)
|
||
let ism3u8 = ref(false) // 是否是 m3u8 格式
|
||
|
||
onMounted(() => {
|
||
if (props.src.indexOf("m3u8") == -1) {
|
||
// console.log("mp4")
|
||
return
|
||
}
|
||
ism3u8.value = true
|
||
nextTick(() => {
|
||
player.value = videojs("video" + props.val, {
|
||
preload: "metadata", // 首次是否需要轻求资源，none：不轻求：metadata只请求必要资源
|
||
bigPlayButton: true,
|
||
textTrackDisplay: false,
|
||
posterImage: true,
|
||
errorDisplay: false,
|
||
controlBar: {
|
||
captionsButton: false,
|
||
chaptersButton: false,
|
||
subtitlesButton: false,
|
||
liveDisplay: false,
|
||
playbackRateMenuButton: false,
|
||
},
|
||
sources: [
|
||
{
|
||
src: props.src,
|
||
stype: "application/x-mpegURL",
|
||
},
|
||
],
|
||
})
|
||
})
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
if (player.value != null) {
|
||
player.value.dispose() // dispose()会直接删除Dom元素
|
||
}
|
||
})
|
||
</script>
|
||
<style lang="less" scoped></style>
|