html5ビデオをマウスホイールでスクロールして再生する

Question

マウスホイールで上下にスクロールすると、ビデオを前後に再生するWebページを作成できます。 HTML5とおそらくJavaScriptを介して考えられるようです。このようなことのためのどんな方向性が役に立つでしょう。

Answer 1

おそらくこの

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

のようなものは、すべての回でビデオを一時停止

。一定間隔でスクロール位置を取得し、ビデオをスクロール位置にシークします。ページローダーエフェクトを使用してビデオを完全にバッファリングすることを推奨します。私はこれを使用してい

full code

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

。それは完璧ではありませんが、それはあなたを助けるはずです。

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 4

私は、これは古い質問ですけど、私は他の日にそれを偶然見つけ及びthe answer aboveが、私はこの効果を達成するために少しjQuery pluginを書く助けました。

スクロールでは、ビデオ要素のウィンドウに対する位置を計算し、それを使ってビデオの現在の時間を計算しました。

ただし、ビデオの現在時刻を更新するためにsetTimeout/setIntervalを使用する代わりに、request animation frameを使用しました。リクエストアニメーションフレームは、ブラウザが準備ができていなくても実行されるsetIntervalを使用する代わりに、ビデオをレンダリングします。

in all modern browsers except Opera Miniサポート

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

：上記の例にこれを適用する

。

Answer 5

それよりスムーズ

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