通过滚动鼠标滚轮来播放html5视频 [英] html5 video play by scrolling with the mouse wheel

问题描述

我希望能够制作一个网页，当他们使用鼠标滚轮上下滚动时前后播放视频。似乎可以想象，通过HTML5和可能的JavaScript。任何形式的方向都会有所帮助。

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.

推荐答案

随时暂停视频。定期获取滚动位置，并使视频搜索到滚动位置。建议使用任何页面加载器效果让视频完全缓冲。

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

这篇关于通过滚动鼠标滚轮来播放html5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！