Question

我正在构建一个HTML5视频作为背景，使用鼠标滚轮就像这个优秀的example一样。

现在我想通过在滚动时暂停它来增强它，然后在我滚动一定量后再次开始播放它。我已经尝试了，但问题是，如果我没有暂停它而不是从我暂停的地方继续，那么它就跳到它应该是的位置。

这是我的代码：

$(function () {
    var vid = $('#v0')[0]; // jquery option

    // pause video on load
    vid.pause();

    // pause video on document scroll (stops autoplay once scroll started)
    window.onscroll = function () {
        vid.pause();
        //console.log(vid.currentTime, window.pageYOffset / 400);
        $("#time").text(vid.currentTime);
    };

    // refresh video frames on interval for smoother playback
    setInterval(function () {
        if((window.pageYOffset / 400) > 3 && (window.pageYOffset / 400) < 6){
            vid.pause();
        } else {
            vid.currentTime = window.pageYOffset / 400;
        }
    }, 32);
});

and the example

有没有办法实现这个目标？

由于

Answer 1

在此示例中，我使用了window.scroll事件和video.timeupdate事件的组合。从6到7，它让视频播放直到达到当前的搜索点

var vid = $('#v0')[0]; // jquery option
var videoStartTime = 0;
var durationTime = 0;

// pause video on load
vid.pause();

// pause video on document scroll (stops autoplay once scroll started)
window.onscroll = function () {
    vid.pause();
    //console.log(vid.currentTime, window.pageYOffset / 400);
    $("#time").text(vid.currentTime);
    durationTime = window.pageYOffset / 400;
    $("#time1").text(durationTime);
};

    vid.addEventListener('timeupdate', function () {
        $("#time").text(vid.currentTime);
    if ((window.pageYOffset / 400) >= 6 && this.currentTime > (window.pageYOffset / 400)) {
        this.pause();


        vid.currentTime = window.pageYOffset / 400;
    }
        else if ((window.pageYOffset / 400) > 6 && this.currentTime < (window.pageYOffset / 400)){
            this.play();
        }
});



// refresh video frames on interval for smoother playback
setInterval(function () {
    if ((window.pageYOffset / 400) > 3 && (window.pageYOffset / 400) < 6) {
        vid.pause();
    } else if ((window.pageYOffset / 400) > 6 && (window.pageYOffset / 400) < 7) {
        vid.play();
    } else if ((window.pageYOffset / 400) >= 7 || (window.pageYOffset / 400) < 3) {
        vid.currentTime = window.pageYOffset / 400;
    }


}, 32);

http://jsfiddle.net/itsnav/77xp5duL/9/

HTML5视频，滚动时暂停

1 个答案: