Question

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

类似的东西：

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

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

Answer 1

这取决于你如何定义＆＃34;视口滚动进度＆＃34;。如果您的意思是滚动进度，就像滚动过去的可滚动高度的比例一样，您可以简单地将视口的scrollTop除以可滚动高度。反过来，可滚动高度就是文档高度和视口高度之间的差异。

考虑到这个比率，您可以简单地将其乘以使用.duration属性访问的视频的持续时间，以便导航到正确的时间戳，该时间戳是页面的可滚动高度的比率

在我的小提琴示例中，我将文档高度设置为视口的500％，并将视频定位为相对于视口固定，以演示其工作原理（否则视频将滚出视图）。

$(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，因此您已经可以开始计算比率了。

使用jQuery将滚动事件绑定到视频元素进度

1 个答案: