在vue里如何使用video.js 实现视频进度条的能退不能进

Z时代
2024-03-06
分类：IT

（小白没使用过VUE，因需求要实现视频进度条的能退不能进）在vue里 如何使用video.js 实现视频进度条的能退不能进（官方文档看不懂）找了一些资源都用不了求大神指点一下下面是我实例化后的video

that.player = new videojs(document.getElementById('player'), {
    controls: true, // 是否显示控制条
    poster: that.taskInfo.image, // 视频封面图地址
    preload: 'auto',
    autoplay: false,
    fluid: true, // 自适应宽高
    language: 'zh-CN', // 设置语言
    muted: false, // 是否静音
    inactivityTimeout: false,
    controlBar: { // 设置控制条组件
    /* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
        children: [
            {name: 'playToggle'}, // 播放按钮
            {name: 'currentTimeDisplay'}, // 当前已播放时间
            {name: 'progressControl'}, // 播放进度条
            {name: 'durationDisplay'}, // 总时间
            // { // 倍数播放
            //   name: 'playbackRateMenuButton',
            //   'playbackRates': [0.5, 1, 1.5, 2, 2.5]
            // },
            {
                name: 'volumePanel', // 音量控制
                inline: false, // 不使用水平方式
            },
            {name: 'FullscreenToggle'} // 全屏
        ]
    },
    sources:[ // 视频源
        {
            src: that.taskInfo.link,
            type: 'video/mp4',
            poster: that.taskInfo.image
        }
    ]
}, function (){
    // this.on('timeupdate', function(res) { //这里可以处理学习记录
    //  console.log(this.currentTime());
    //    videojs.log('播放时间改变!');
    //  });});