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

Answer 1

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 2

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 3

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 4

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 5

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);