CODEWITHSUNDEEP
javascriptjqueryhtml
Mauro74
Mauro74

Reputation: 4826

HTML5 video, pause while scrolling

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.

Here's my code:

$(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.

Is there a way of achieving that?

Thanks

Upvotes: 0

Views: 4887

Answers (1)

Nav
Nav

Reputation: 53

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/

Upvotes: 1

Related Questions