javascript - マウスホイールでスクロールしてhtml5動画再生

Question

マウスホイールを上下にスクロールすると、ビデオが前後に再生される Web ページを作成できるようにしたいと考えています。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

よりスムーズにするための私の側からのいくつかの改造

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