javascript - VIDEOjs 可拖动进度条

Question

我有最新的videojs(版本:7.6.6)。

是否可以使进度条可拖动？

当前状态:当我在进度条上移动鼠标时，第一件事是播放器等待下载几帧，然后移动。

想要:我可以将鼠标(单击状态 = mouseDown)移动到进度条上我想要更新时间，而不是等待下载帧然后更新时间。

我当前的代码:(包括 videojs 7.6.6 和插件) - 我正在使用 HLS

HTML

<video id="video" class="video-js" width="640" height="360" controls preload="auto">
        <source src="list.m3u8" type="application/x-mpegURL">
</video>

JS

var player = videojs('video', {
    fluid: false,
    inactivityTimeout: 2000,
    controlBar: {
        'pictureInPictureToggle': true,
        volumePanel: {
            inline: true
        }
    },
    html5: {
        hls: {
            overrideNative: true
        },
        nativeAudioTracks: false,
        nativeTextTracks: false,
    },
    plugins: {
        httpSourceSelector:
        {
            default: 'auto'
        }
    }
});
player.httpSourceSelector();
player.mobileUi({
    fullscreen: {
        enterOnRotate: true,
        lockOnRotate: true
    },
    touchControls: {
        seekSeconds: 10,
        tapTimeout: 300,
        disableOnEnd: false
    }
});

// My attempt to draggable scrollbar
var down = false;
player.controlBar.progressControl.on('mousedown', function() { down = true; });
player.controlBar.progressControl.on('mouseup', function() { down = false;  });
player.controlBar.progressControl.on('mousemove', function(e) {
    if(down) {
        console.log("move");
        // console.log(player.seekBar.update()); ??? or something else
    }
});

如果您有一些提示或建议，我会非常高兴。

PS:抱歉我的英语

Answer 1

如果有人感兴趣的话，我会准确地创建我所要求的内容:)

变量videojs包含在videojs.js文件中。 (使用版本7.6.6)

let player = videojs('ID_OF_YOUR_VIDEO');
const SeekBar = videojs.getComponent('SeekBar');

SeekBar.prototype.getPercent = function getPercent() {
    const time = this.player_.currentTime()
    const percent = time / this.player_.duration()
    return percent >= 1 ? 1 : percent
}

SeekBar.prototype.handleMouseMove = function handleMouseMove(event) {
    let newTime = this.calculateDistance(event) * this.player_.duration()
    if (newTime === this.player_.duration()) {
        newTime = newTime - 0.1
    }
    this.player_.currentTime(newTime);
    this.update();
    let currentTime = player.currentTime();
    let minutes = Math.floor(currentTime / 60);   
    let seconds = Math.floor(currentTime - minutes * 60)
    let x = minutes < 10 ? "0" + minutes : minutes;
    let y = seconds < 10 ? "0" + seconds : seconds;
    let format = x + ":" + y;
    player.controlBar.currentTimeDisplay.el_.innerHTML = format;
}