通过滚动鼠标滚轮播放html5视频

Question

我希望能够制作一个网页,当它们用鼠标滚轮上下滚动时向前和向后播放视频.似乎可以想象,通过HTML5和可能的JavaScript.这类事情的任何方向都会有所帮助.

Answer 1

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

完整代码

// 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

可能是这样的

$(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();
});