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