HTML5视频，滚动时暂停 [英] HTML5 video, pause while scrolling

问题描述

我正在构建一个HTML5视频作为背景，并使用鼠标滚轮播放，就像这个出色的示例.

I'm building an HTML5 video as background which plays with the mouse wheel like this excellent example.

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

Now I want to enhance it by pausing it while still scrolling then start to play it again after I've scrolled for a certain amount. I've tried but the problem is that it jumps on the point where it supposed to be if I hadn't paused it rather than continuing from where I've paused.

这是我的代码:

$(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);
});

和示例.

有没有办法做到这一点?

Is there a way of achieving that?

谢谢

推荐答案

在此示例中，我结合使用window.scroll事件和video.timeupdate事件.从6到7，可以播放视频直到到达当前搜索点

I used a combination of window.scroll event and video.timeupdate event in this example. from 6 to 7 it lets the video play till it reaches the current seek point

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视频，滚动时暂停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！