javascript - 使用 jQuery 将滚动事件绑定(bind)到视频元素进度

Question

我不确定之前是否已经回答过这个问题，但是有没有办法将 scroll 事件绑定(bind)到 html5 视频 currentTime 元素？

类似于:

$(window).bind("scroll", vidProgress)
.load(vidProgress);

function vidProgress() {
$('video').currentTime = **viewport scroll progress**;
};

Answer 1

这取决于您如何定义“视口(viewport)滚动进度”。如果您的意思是滚动进度是指已滚动过去的可滚动高度的比例，则只需将视口(viewport)的scrollTop 除以可滚动高度即可。反过来，可滚动高度只是文档高度和视口(viewport)高度之间的差异。

考虑到这个比率，您只需将其乘以使用 .duration 属性访问的视频时长，即可导航到正确的时间戳，即与可滚动内容的比率页面高度。

在我的 fiddle 示例中，我将文档高度设置为视口(viewport)高度的 500%，并将视频相对于视口(viewport)固定定位，以演示其工作原理(否则视频将滚动到 View 之外)。

$(function() {
    $(window)
    .on('scroll', vidProgress)
    .load(vidProgress);

    function vidProgress() {
        // Get video properties
        var $v = $('video'),
            duration = $v[0].duration;

        // Get window properties
        var $w = $(window),
            scrollable = $(document).height() - $w.height();

        // Do seeking
        var scrollRatio = $(document).scrollTop()/scrollable;
        if(isNaN(scrollRatio)) scrollRatio = 0;
        $v[0].currentTime = scrollRatio*duration;
    };
});

在此处查看工作演示:http://jsfiddle.net/teddyrised/kr9jmudu/

<小时/>

注意:如果视频非常大，那么监听窗口的加载事件就没有意义。相反，listen to the loadedmetadata event of the video ，这样您就可以开始计算比率了。