<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-10-12 21:54:54
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2023-10-12 22:14:40
 * @FilePath: /归档(3)/src/views/dashboard/Video.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div ref="video">
        <!-- <video :src="src" v-if="isVideo" controls autoplay="autoplay" loop style="width: 100%"></video> -->
    </div>
</template>
<script>
export default {
    data() {
        return {
            isVideo: false,
        };
    },
    props: ["src"],
    watch: {
        src: {
            handler() {
                console.log(111, this.src)
                this.isVideo = false;
                this.jessibuca && this.jessibuca.destroy();
                this.src &&
                    setTimeout(() => {
                        this.init();
                    }, 100);
            },
            immediate: true
        }
    },
    destroyed() {
        if (this.jessibuca && this.jessibuca.destroy) {
            this.jessibuca.destroy();
        }

        if (this.src.indexOf(".mp4") > -1) {
            this.isVideo = false;
            return;
        }
    },
    methods: {
        init() {
            if (this.jessibuca && this.jessibuca.destroy) {
                this.jessibuca.destroy();
            }
            this.$nextTick(() => {
                if (!this.src) {
                    return;
                }
                if (this.src.indexOf(".mp4") > -1) {
                    this.isVideo = true;
                    return;
                }
                var jessibuca = new JessibucaPro({
                    container: this.$refs["video"],
                    hasVideo: true,
                    isResize: true,
                    text: "",
                    networkDelay: 10,
                    loadingText: "加载中",
                    useMSE: true,
                    useSIMD: true,
                    videoBuffer: 0.2,
                    videoBufferDelay: 1,
                    networkDelay: 10,
                    decoderErrorAutoWasm: true,
                    checkFirstIFrame: true,
                    isDropSameTimestampGop: false,
                    demuxUseWorker: false,
                    mseDecoderUseWorker: false,
                    isEdgeSupportHevc: false,// 默认
                    autoWasm: true,
                    // debug: true,
                    // debugLevel: "debug",
                    controlAutoHide: true,
                    showBandwidth: false, // 显示网速
                    operateBtns: {
                        fullscreen: true,
                        screenshot: true,
                        play: true,
                        audio: true,
                    },
                    forceNoOffscreen: true,
                    useWebFullScreen: true,
                    isNotMute: false,
                });
                jessibuca.play(this.src);
                this.jessibuca = jessibuca;
                jessibuca.on('timeout', e => { console.log(e, 1234) })
                jessibuca.on('error', e => { console.log(e, 12345) })
                jessibuca.on('loadingTimeout', e => { console.log(e, 1236) })
                jessibuca.on('delayTimeout', e => { console.log(e, 1237) })
            });
        },
    },
    mounted() { },
    beforeDestroy() {
        this.jessibuca.destroy();

        if (this.src.indexOf(".mp4") > -1) {
            this.isVideo = false;
            return;
        }
    },
};
</script>
