<template>
    <div>
        <video style="height: 100%;width: 100%;" id="my-player" v-if="this.src.endsWith('flv')" preload="auto" muted
            autoplay controls>
        </video>
        <video style="height: 100%;width: 100%;" id="my-player" v-if="!this.src.endsWith('flv')" class="video-js"
            preload="auto" muted autoplay controls>
        </video>
    </div>
</template>
<script>
import flvjs from "flv.js";

import videojs from "video.js";
import videozhCN from "video.js/dist/lang/zh-CN.json";
import "video.js/dist/video-js.css";
export default {
    props: ['src'],
    data() {
        return {
            flvPlayer: null,
            mp4Player: null
        };
    },
    mounted() {
        if (this.src.endsWith("flv")) {
            if (flvjs.isSupported()) {
                var videoElement = document.getElementById('my-player');
                this.flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    isLive: true,
                    url: this.src,//flv格式流地址
                }, {
                    enableWorker: false, //不启用分离线程
                    enableStashBuffer: false, //关闭IO隐藏缓冲区
                    reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
                    autoCleanupSourceBuffer: true //自动清除缓存
                });
                this.flvPlayer.attachMediaElement(videoElement);
                this.flvPlayer.load(); //加载
                this.flvPlayer.play();//播放
            }
        } else {
            videojs.addLanguage("zh-CN", videozhCN);
            this.mp4Player = videojs('my-player', {
                sources: [{
                    language: "zh-CN",
                    src: this.src,
                    autoplay: true,
                    playbackRates: [0.5, 1, 1.5, 2] //倍速播放
                }]
            }, function () {

            });
            this.mp4Player.play();
        }
    },
    destroyed() {
        this.flvPlayer && this.flvPlayer.unload();
        this.flvPlayer && this.flvPlayer.detachMediaElement()
        this.flvPlayer && this.flvPlayer.destroy();

        this.mp4Player && this.mp4Player.pause()
        this.mp4Player && this.mp4Player.dispose();
    }
}
</script>