<template>
    <video-player
        ref="video-player"
        class="vjs-custom-skin"
        :options="playerOptions"
        @pause="onPlayerPause"
        @playing="onPlayerPlaying"
        @ended="onPlayerEnded"
    />
</template>

<script>
import 'vue-video-player/src/custom-theme.css'
import { videoPlayer } from 'vue-video-player'

export default {
    name: 'VideoPlayer',
    props: {
        src: {
            type: String,
            // default: 'http://cctvalih5ca.v.myalicdn.com/live/cctv6_1/index.m3u8',
            required: true
        }
    },
    components: {
        videoPlayer
    },
    data() {
        return {
            isPlay: false, // 是否正在播放
            playerOptions: {
                sources: [{
                    type: 'application/x-mpegURL',
                    withCredentials: false,
                    src: this.src
                }],
                height: '100%',
                language: 'zh-CN',
                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                techOrder: ['html5'],
                flash: { hls: { withCredentials: false }},
                html5: { hls: { withCredentials: false }},
                autoplay: true, // 自动播放
                muted: true,  // 默认情况下将会消除任何音频。
                controls: true,
                notSupportedMessage: '不支持的视频格式',
                controlBar: {
                    timeDivider: false, // 当前时间和持续时间的分隔符
                    durationDisplay: false, // 显示持续时间
                    remainingTimeDisplay: false, // 是否显示剩余时间功能
                    fullscreenToggle: true // 是否显示全屏按钮
                }
            }
        }
    },
    mounted() {
        this.$nextTick(()=> {
            const videoRef = this.$refs['video-player'];
            // videoRef.player.play();
            console.log(videoRef);
        })
    },
    methods: {
        // 暂停回调
        onPlayerPause() {
            this.isPlay && this.$emit('showModel');
            // this.isPlay = false;
        },
        // 已开始播放回调
        onPlayerPlaying(...args) {
            this.isPlay = true;
        },
        // 视频播完回调
        onPlayerEnded($event) {
            this.isPlay = false;
        },
    }
}
</script>

<style lang="scss" scoped>
.vjs-custom-skin /deep/{
    width: 100%;
    height: 100%;
    cursor: pointer;
    .video-player, .video-js {
        height: 100% !important;
    }
    // 屏蔽视频操作栏
    .vjs-control-bar {
        display: none !important;
    }
}
</style>
