用鼠标滚轮滚动播放 HTML5 视频

Question

我希望能够制作一个网页，当用户使用鼠标滚轮向上或向下滚动页面时，视频可以前后播放。这似乎可以通过HTML5和可能的JavaScript实现。希望能提供任何相关的指导。

- Mike Preble

---

你的意思是类似于这个吗？ - avb

是的，没错。让我看看能否深入研究他们的代码，并使其适用于我。 - Mike Preble

不要让上面的评论阻止人们做出贡献，我仍然希望得到一些帮助。网站上有很多代码需要查找，以确定具体是什么使这些东西工作。 - Mike Preble

我使用原生JS制作了一个类似于你的问题的鼠标滚轮刷子，并在GitHub上发布了它。虽然没有经过彻底测试，但可能会有用。 - Pascalculator

重要提醒：为了在Firefox和Chrome中实现此效果，视频必须每半秒或每四分之一帧进行关键帧编码。由于不同浏览器的响应不同，因此间隔也应进行调整。就此而言，使用WEBM（VP8）视频容器可以获得良好的结果。您可以使用FFMPEG的“-g”标志来实现此目的：“ffmpeg -i input.mov -g 10 output.webm”。 - lalengua

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

- Nav

---

嗨，我知道这很难，但我正在使用您的答案进行我的一个项目，并且我想实现这个：http://stackoverflow.com/questions/26756362/html5-video-pause-while-scrolling。这可能吗？ - Mauro74

Answer 2

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

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

然而，我没有使用 setTimeout/setInterval 来更新视频的当前时间，而是使用了 request animation frame。Request animation frame 会在可以渲染视频时才进行渲染，而不是使用 setInterval（即使浏览器没有准备好）运行。

将其应用于上面的示例：

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

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

- Paul. B

---

这太棒了，正是我所希望达到的目标，并且我的老板也从你在Github上引用的同一页中得到启发。谢谢！ - HelloSpeakman

Answer 3

一些我做的修改，让它更加流畅。

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

- Tinku TR

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

- homerjam

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

- Bob van Luijt

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

- hardanger