portal/src/components/custom/MtaBusVideoPlayer.vue

<template>
    <div>
        <video-player
                :options="videoOptions"
                @sectionCompleted="sectionCompleted"
                class="video-player"
                ref="stVideoPlayer"
                v-if="videoOptions.display"
        >
        </video-player>
    </div>
</template>

<script>
    import VideoPlayer      from '@/components/custom/VideoPlayer.vue';
    import * as kejian      from '@/api/peixun/kejian';
    import * as commonUtils from '@/utils/common';

    export default {
        name:       'MtaBusVideoPlayer',
        components: {
            VideoPlayer,
        },
        data() {
            return {
                videoOptions: {
                    type:                  null,                    // 共用逻辑：1：预览 2：c端播放
                    autoplay:              false,                   // 共用逻辑：自动播放
                    controls:              true,                    // 共用逻辑：是否使播放器可控 为true
                    sources:               [],                      // 共用逻辑：当前资源列表 默认支持一组相同资源的不同编码格式
                    progressControlEnable: true,                    // 共用逻辑：进度条可操作 可用true/禁用false
                    // theme:                 'city',               // 共用逻辑：主题枚举 'default', 'city', 'fantasy', 'forest', 'sea'
                    height:                '500px',                 // 共用逻辑
                    playlist:              [],                      // 共用逻辑
                    display:               false,                   // 共用逻辑,
                    questionDoneShow:      null,                    // 共用逻辑: [Boolbean] 拖拽后是否显示已完成的题
                    drugControl:           null,                    // 共用逻辑: [String] none 不控制 forwardOnly 只能拖至已看过的
                    hasPlaylist:           false,                   // 共用逻辑: 视频右侧条，现在默认不要
                    playIndex:             0,                       // 不共用逻辑 可删除
                    shitiList:             null,                    // 不共用逻辑 被插入的试题list
                },
            };
        },
        props:      {
            options: {
                type: Object,
                default() {
                    return {};
                },
            },
        },
        methods:    {
            fileChange(event) {

            },
            videoOptionsInit() {
                this.videoOptions.questionDoneShow = true;  // 预览和使用默认都是拖拽后显示已完成的题
                this.videoOptions.type = this.options.type;

                // 共用逻辑: none 不控制 forwardOnly 只能拖至已看过的
                if (this.videoOptions.type === 1) { // 预览
                    this.videoOptions.drugControl = 'none';
                } else {    // c端播放
                    if (this.videoOptions.shitiList && this.videoOptions.shitiList.length > 0) {  // 有题
                        this.videoOptions.drugControl = 'forwardOnly';
                    } else {    // 没有题 已后台状态为准
                        if (this.options.progressFlag === 0) {
                            this.videoOptions.drugControl = 'none';
                        } else if (this.options.progressFlag === 1) {
                            this.videoOptions.drugControl = 'forwardOnly';
                        } else {
                            this.videoOptions.drugControl = 'none';
                        }
                    }
                }

            },
            videoPlayerShow() {
                kejian.getKejian({
                                     kjId: this.options.kjId,
                                 }).then(res => {
                    if (res.code === 0) {
                        let videoItem = {
                            name:      res.data.name,
                            duration:  res.data.duration,  // 该视频播放时长
                            sources:   [
                                {
                                    src:  res.data.newUrl,
                                    type: 'video/mp4',
                                },
                            ],
                            thumbnail: [
                                {
                                    srcset: res.data.cover,
                                    type:   'image/jpeg',
                                    style:  'width:180px;',
                                    // media: '(min-width: 367px;)'
                                },
                            ],
                            // poster:      'http://media.w3.org/2010/05/sintel/poster.png',
                        };
                        // console.log(res.data);
                        this.videoOptions.shitiList = res.data.shitiList;
                        this.videoOptionsInit();
                        this.videoOptions.display = true;
                        this.$nextTick(() => {
                            if (this.videoOptions.hasPlaylist) {
                                this.videoOptions.playlist.push(videoItem);
                            } else {
                                this.videoOptions.sources = videoItem.sources;
                            }
                        });
                    }
                });
            },
            hidDialog() {
                this.$refs.stVideoPlayer.hidDialog();
            },
            sectionCompleted(payload) {
                commonUtils.updateSectionProgress();
            },
        },
        mounted() {
            this.videoPlayerShow();
        },

        watch: {
            options: {
                handler(value, oValue) {
                    // console.log(value);
                    this.videoPlayerShow();
                },
                deep: true,
            },
        },
    };
</script>
<style lang="scss">
    .el-button {
        font-size: 14px;
    }

    .fl {
        display: block;
        float: left;
    }

    .ml-30 {
        margin-left: 30px;
    }

    .answer-dialog,.success-answer-dialog {
        text-align: center;
        line-height: 40px;
        position: absolute;
        z-index: 9999;
        left: 46%;
        top: 10%;
        background-color: #fef0f0;
        border-color: #fde2e2;
        color: #F56C6C;
        padding: 0 20px;
        i{
            font-size: 19px;
            display: inline-block;
            vertical-align: middle;
        }
        >div{
            display: inline-block;
            font-size: 14px;
            vertical-align: middle;
        }
    }
    //成功弹窗
    .success-answer-dialog{
        background-color: #f0f9eb;
        border-color: #e1f3d8;
        color: #67C23A;
    }
</style>