83 lines
2.2 KiB
Vue
83 lines
2.2 KiB
Vue
<template>
|
||
<video v-if="!ism3u8" class="11111" :autoplay="false" controls :src="src" style="width: 800px;"></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" />
|
||
<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 props = defineProps({
|
||
src: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
val: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
imageTab: {
|
||
type: Number,
|
||
default: "",
|
||
},
|
||
})
|
||
|
||
watch(
|
||
() => props.imageTab,
|
||
newVal => {
|
||
if (newVal != props.val) {
|
||
if (player.value != null) {
|
||
player.value.pause() // dispose()会直接删除Dom元素
|
||
}
|
||
}
|
||
}
|
||
)
|
||
|
||
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>
|