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

我知道这是一个老问题，但我前几天偶然发现了它，the answer above帮我写了一点jQuery plugin来实现这个效果。

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

然而，我没有使用setTimeout / setInterval来更新视频的当前时间，而是使用了request animation frame。请求动画帧将在可能的情况下呈现视频，而不是使用即使浏览器未就绪也将运行的setInterval。

将此应用于上述示例：

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

支持的 in all modern browsers except Opera Mini。

Answer 3

可能是这样的

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

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

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 5

我的一些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 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);
}

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

6 个答案: