通过鼠标滚轮滚动播放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

我知道这是一个老问题，但前几天我偶然发现了它，上面的答案帮助我编写了一个小jQuery 插件来实现这种效果。

在滚动时，我计算了视频元素相对于窗口的位置，然后用它来计算视频的当前时间。

但是，我没有使用 setTimeout/setInterval 来更新视频的当前时间，而是使用了request animation frame 。 请求动画帧将在可以时呈现视频，而不是使用即使浏览器未准备好也会运行的 setInterval。

将此应用于上述示例：

var renderLoop = function(){
  requestAnimationFrame( function(){
    vid.currentTime = window.pageYOffset/400;
    renderLoop();
  });
};
renderLoop();

支持除 Opera Mini 之外的所有现代浏览器。

Answer 3

我最后的一些 mods 使它更流畅

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

可能是这样的

$(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 5

我正在使用这个。 它并不完美，但它应该可以帮助你。

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 6

我知道这是一个非常古老的线程，但我想提供这个评分最高的条目的改进版本，它可以扩展到多个元素，但在元素不在页面顶部时也能正常工作：

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