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