Reputation: 155
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.
Upvotes: 15
Views: 26546
Reputation: 2617
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);
}
Upvotes: 0
Reputation: 11
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
Upvotes: 1
Reputation: 1448
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.
Upvotes: 2
Reputation: 7588
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();
});
Upvotes: 0
Reputation: 53
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.
// 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);
Upvotes: 8
Reputation: 679
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();
});
Upvotes: 0