jquery - 如何使用 jquery ui slider 与自定义控制的 html5 视频配合使用

Question

我一直在寻找使用 jquery ui slider 小部件来获取与 html5 视频一起使用的 slider 。那么我怎样才能使这个 JQuery UI slider 与 html5 视频同步呢？

高度赞赏示例代码的解释。

提前致谢。!!

Answer 1

当然，您必须有一个视频和一个 slider ，然后将 slider 设置为从零开始并在视频持续时间结束。
然后，您必须在 slider 移动时更新视频的 currentTime，并在视频播放时同样更新 slider 。

其实没那么难，像这样就可以了

$('#video').on({
    canplaythrough: function() {
        var video = this;
        $('#slider').slider({
            range : "max",
            min   : 0,
            max   : parseInt(video.duration, 10),
            value : 0,
            slide : function (event, ui) {
                video.currentTime = ui.value;
            }
        });
    },
    timeupdate: function() {
        $('#slider').slider('value', this.currentTime)
    }
});

FIDDLE