マウスホイールで上下にスクロールすると、ビデオを前後に再生するWebページを作成できます。 HTML5とおそらくJavaScriptを介して考えられるようです。このようなことのためのどんな方向性が役に立つでしょう。html5ビデオをマウスホイールでスクロールして再生する
答えて
おそらくこの
$(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();
});
。一定間隔でスクロール位置を取得し、ビデオをスクロール位置にシークします。ページローダーエフェクトを使用してビデオを完全にバッファリングすることを推奨します。私はこれを使用してい
// 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);
こんにちは、私はそれが長いショットだと知っていますが、私のプロジェクトにあなたの答えを使用しており、私はこれを達成したいと思います:http://stackoverflow.com/questions/26756362/html5-video-pause-while-スクロール可能ですか? – Mauro74
。それは完璧ではありませんが、それはあなたを助けるはずです。
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();
});
私は、これは古い質問ですけど、私は他の日にそれを偶然見つけ及び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();
:上記の例にこれを適用する
。
これは幻想的です。私が達成したいと思っていたことと、上司がgithubで参照したのと同じページからインスピレーションを得ました。ありがとう – HelloSpeakman
それよりスムーズ
// 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);
- 1. HTML5ビデオをスクロールして再生し、完了するまで再生して一度だけ再生する
- 2. HTML5ビデオ:再生ボタンをクリックし、別のビデオを再生
- 3. HTML5ビデオSeekable再生プログレスバー
- 4. スワイプでiosでHtml5ビデオを再生
- 5. Ooyala HTML5/Javascript API - フルスクリーンでビデオを再生
- 6. IOS9 WKWebView html5ビデオ再生ボタンなし
- 7. WebMビデオをYouTubeにアップロードし、HTML5モードでMP4として再生
- 8. html5モバイルブラウザで再生されないビデオ
- 9. ビデオをフルスクリーンで、html5なしで再生する方法
- 10. html5を使用してビデオとオーディオを再生しますか?
- 11. html5ビデオはiPadで再生できません - iPhoneで再生
- 12. HTML5ビデオを使用してFirefoxでMP4ファイルを再生
- 13. HTML5とUIWebViewを使用してiPhoneでビデオを再生
- 14. HTML5ビデオを再生して他の人を止める
- 15. HTML5ビデオ - ビデオの一部だけを再生する
- 16. html5 iPadで再生していないビデオ
- 17. Html5ビデオが機能しない/ Safariで再生する
- 18. Jquery(Html5ビデオ要素)を使用してビデオを再開する
- 19. HTML5を使用して.mp4ビデオを再生
- 20. HTML5ビデオ再生ボタンオーバーレイの問題
- 21. HTML5ビデオが再生されない
- 22. iOS5の自動再生HTML5オーディオ/ビデオ
- 23. 再生後のhtml5ビデオのリダイレクト
- 24. ビデオをlocalhostからHTML5で再生します。
- 25. モバイルでhtml5ビデオを自動再生する方法
- 26. IE8ブラウザでhtml5ビデオを再生する方法
- 27. webviewでhtml5ビデオを再生する方法android
- 28. Howto HTML5ビデオタグでYouTubeビデオを再生する
- 29. HTML5ビデオの再生開始位置と再生時間
- 30. Google ChromeはモバイルでHTML5ビデオを再生しません
作るために私の最後のいくつかの改造は、あなたが[この]のようなものを意味するか(http://a-class.mercedes-benz.com/nl/nl /)? – avb
はい、正確です。彼らのコードに浸り、それを私のために働かせることができるかどうか見てみましょう。 –
上記のコメントが人々の貢献を妨げないようにしてください。私はまだ助けてください。サイトには、正確に何がうまくいくかを見つけるためのコードがたくさんあります。 –