javascript 通过鼠标滚轮滚动播放html5视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13419409/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html5 video play by scrolling with the mouse wheel
提问by Mike Preble
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.
我希望能够制作一个网页，当他们上下滚动鼠标滚轮时，可以向前和向后播放视频。这似乎是可以想象的，通过 HTML5 和可能的 JavaScript。这种事情的任何方向都会有所帮助。
回答by Nav
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);
回答by Paul. B
I know this is an old question, but I stumbled across it the other day and the answer abovehelped me write a little jQuery pluginto achieve this effect.
我知道这是一个老问题，但前几天我偶然发现了它，上面的答案帮助我编写了一个小jQuery 插件来实现这种效果。
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.
但是，我没有使用 setTimeout/setInterval 来更新视频的当前时间，而是使用了request animation frame。请求动画帧将在可以时呈现视频，而不是使用即使浏览器未准备好也会运行的 setInterval。
Applying this to the above example:
将此应用于上述示例：
var renderLoop = function(){
requestAnimationFrame( function(){
vid.currentTime = window.pageYOffset/400;
renderLoop();
});
};
renderLoop();
Supportedin all modern browsers except Opera Mini.
回答by Tinku TR
Some mods from my end to make it smoother
我最后的一些 mod 使它更流畅
// 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);
回答by Bob van Luijt
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();
});
回答by homerjam
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();
});
