html5 video play by scrolling with the mouse wheel

Question

I want to be able to make a web page that plays a video forward and backward when they scroll with the mouse wheel up and down. It seems conceivable, via HTML5 and possibly JavaScript. Any sort of direction for this sort of thing would be helpful.

Answer 1

Pause the video at all times. get scroll position with regular intervals and make the video seek to the scroll position. using any page loader effects to let the video fully buffer is recommended though.

full code

// select video element
var vid = document.getElementById('v0');
//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();
};

// refresh video frames on interval for smoother playback
setInterval(function(){
    vid.currentTime = window.pageYOffset/400;
}, 40);

Answer 2

I know this is an old question, but I stumbled across it the other day and the answer above helped me write a little jQuery plugin to achieve this effect.

On scroll I calculated the position of the video element in relation to the window, then used that to calculate the current time on the video.

However instead of using an setTimeout/setInterval to update the current time of the video, I used request animation frame . Request animation frame will render the video when it can instead of using a setInterval which will run even if the browser is not ready.

Applying this to the above example:

var renderLoop = function(){
  requestAnimationFrame( function(){
    vid.currentTime = window.pageYOffset/400;
    renderLoop();
  });
};
renderLoop();

Supported in all modern browsers except Opera Mini .

Answer 3

Some mods from my end to make it smoother

// select video element
var vid = document.getElementById('v0');
//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();
};

// refresh video frames on interval for smoother playback
setInterval(function(){
  TweenMax.to(vid,2,{currentTime:window.pageYOffset/400});
}, 40);

http://codepen.io/anon/pen/qORmee

Answer 4

Possibly something like this

$(document).mousewheel(function(event, delta, deltaX, deltaY){        
    if (deltaY > 0) {
        $(".video-element").get(0).playbackRate = -1;
    } else {
        $(".video-element").get(0).playbackRate = 1;
    }

    event.preventDefault();
});

Answer 5

I'm using this. It's not perfect, but it should help you.

var videoScrollTop = $(document).scrollTop();
$(document).scroll(function() {
    var vid = $('#video')[0];
    if(videoScrollTop < $(document).scrollTop()){
        vid.currentTime += 0.081;
    } else {
        vid.currentTime -= 0.081;
    }
    videoScrollTop = $(document).scrollTop();
});

Answer 6

I know this is a super old thread, but wanted to provide this refined version of the top rated entry which is scalable to multiple elements but also critically will work when the element is not at the top of the page:

playVideoOnScroll($('#myVideoContainer video'));

function playVideoOnScroll(element) {
    var vid = element[0]; // select video element
    var playbackConst = 3; // lower numbers = slower playback
    var startingYOffset = element.offset().top - $(window).height();
    vid.pause(); // pause video on load
    
    // pause video on document scroll (stops autoplay once scroll started)
    window.onscroll = function(){
        vid.pause();
    };
    
    // refresh video frames on interval for smoother playback
    setInterval(function(){
        vid.currentTime = (window.pageYOffset-startingYOffset)/($(window).height()/playbackConst);
    }, 40);
}