<template>
    <el-dialog title="视频查看" :visible.sync="dialogVisibleVideo" :append-to-body="true" width="95%"
        :before-close="handleClose" class="dialog_diy">
        <div  style="height: 100%;position: relative;" v-if="dialogVisibleVideo">
            <video-player class="video-player vjs-custom-skin" :playsinline="true" :options="playerOptions"
                @play="onPlayerPlay($event)"></video-player>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="close">关 闭</el-button>
        </span>
    </el-dialog>
</template>
  
<script>
export default {
    props: {
        dialogVisibleVideo: {
            type: Boolean,
            default: false
        },
        url: {
            type: String,
        }
    },
    data() {
        return {
            playerOptions: {
                playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                autoplay: false, //如果true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 导致视频一结束就重新开始。
                preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: "zh-CN",
                aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [
                    {
                        type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
                        src: "", //url地址require("../../assets/media/aaa.mp4")
                    },
                ],
                // poster: require("../../assets/tu31.png"), //你的封面地址
                // poster: dataRes.imgUrl, //你的封面地址
                notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: true, //当前时间和持续时间的分隔符
                    durationDisplay: true, //显示持续时间
                    remainingTimeDisplay: false, //是否显示剩余时间功能
                    fullscreenToggle: true, //全屏按钮
                },
            },
        }
    },
    watch: {
        dialogVisibleVideo(newValue, oldValue) {
            this.playerOptions.sources[0].src = this.url
        }
    },
    methods: {
        handleClose(done) {
            this.close()
            done();
        },
        close() {
            this.$emit('update:dialogVisibleVideo', false)
        },
        onPlayerPlay() { },
    },
    mounted() {
        this.playerOptions.sources[0].src = this.url;
    },
}
</script>
  
<style scoped>
.dialog_diy>>>.el-dialog {
    height: 100%;
    margin: 0 auto !important;
}

.dialog_diy>>>.el-dialog__header {
    background: #454545 !important;
    padding: 15px 20px;
}

.dialog_diy>>>.el-dialog__body {
    height: calc(100% - 124px);
    box-sizing: border-box;
    padding: 0px;
}


.dialog_diy>>>.el-dialog__title {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn {
    top: 19px;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
    color: #fff;
}


.dialog_diy>>>.el-dialog__body,
.dialog_diy>>>.el-dialog__footer {
    background: #fafafa;
}

.video-player {
  width: 100%;
  height: 100%;
}

.video-player >>> .video-js.vjs-fluid{
    height: 100% !important;
    padding: 0 !important;
}


</style>