<!-- =============================
 - name: Minitor.vue
 - author: yang
 - description: Minitor.vue file is ready for
 - time: 2021/5/11
============================= -->
<template>
    <video
        width="600"
        height="400"
        class="video-js v--box vjs-default-skin"
        playsinline
        webkit-playsinline
        controls
        autoplay
        muted
        preload="auto"
        x-webkit-airplay="true"
        x5-video-player-fullscreen="true"
        x5-video-player-typ="h5"
        style="width: 100%; height: 100%"
        ref="videoPlayer"
    >
        <source :src="src" type="application/x-mpegURL" />
    </video>
</template>

<script>
import videojs from "video.js";
import lan from "./zh-CN";
import 'video.js/dist/video-js.css'
export default {
    name: "Mainitor",
    props: {
        src: {
            type: String,
            require: true,
        },
        poster: {
            type: String,
            default: null,
        },
        errorText: {
            type: String,
            default: "视频播放失败！",
        },
    },
    methods: {
        // 初始化监控
        init() {
            // 语言追加为中文
            videojs.addLanguage("zh-CN", lan);
            if (!this.$el) {
                this.$nextTick(() => {
                    this.player = videojs(this.$el, this.options, function onPlayerReady() {
                        this.play()
                    });
                });
            } else {
                this.player = videojs(this.$el, this.options, function onPlayerReady() {
                    this.play()
                });
            }
        },
    },
    mounted() {
        this.init();
    },
    watch: {
        src(val) {
            if (val) {
                this.player.src({
                    src: val,
                    type: "application/x-mpegURL",
                    withCredentials: true,
                });
            }
        },
    },
    data() {
        return {
            options: {
                bigPlayButton: true,
                textTrackDisplay: false,
                posterImg: false,
                errorDisplay: false,
                controls: true,
                // fluid: true, // 自适应宽高
                language: "zh-CN",
                // aspectRatio: "16:9",
                notSupportedMessage: this.error,
                hls: {
                    withCredentials: true,
                },
            },
            player: null,
        };
    },
    beforeDestroy() {
        // 销毁直播
        if (this.player) {
            this.player.dispose();
            this.player = null;
        }
    },
};
</script>

<style>
.v--box{
    width: 100%;
    height: 100%;
    object-fit: fill
}
.video-js .vjs-big-play-button {
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
}
</style>
