[jQuery] ページのスクロールに合わせてvideoタグの動画を再生する
- ページの途中にvideoタグを使った動画を配置するとき、再生のタイミングで悩むことがあります
- 「autoplay」属性を設定するとページの読み込みが終わった時点で再生がスタートしてしまうため、videoタグがあるところまでスクロールする頃には再生が終わっていたり、動画の内容が伝わりにくかったりします
- かといって、「controls」属性で再生ボタンをつけたとしても、よほど関心のあるユーザーでない限りはわざわざ再生してもらえません
- こんなときは、videoタグに標準で搭載されている関数を実行することで動画の制御することができます
- jQueryを使わず、Javascriptだけで実装するサンプルはこちらを参照
サンプルコード
html
<div class="video_wrapper">
<video muted playsinline loop>
<source src="xxx.mp4" type="video/mp4">
<img src="xxx.png">
</video>
</div>
jQuery
jQuery(function($) {
function playVideos(videos) {
const startPosition = $(window).scrollTop() + $(window).height();
videos.each(function(index) {
if(startPosition > $(this).offset().top) {
$(this).get(0).play();
}
});
}
$(window).on('load', function() {
const videos = $('.video_wrapper > video');
if(videos.length) {
playVideos(videos);
$(window).on('scroll', function() {
playVideos(videos);
});
}
});
});
サンプルコードの解説・補足
function playVideos(videos) {
const startPosition = $(window).scrollTop() + $(window).height();
videos.each(function(index) {
if(startPosition > $(this).offset().top) {
$(this).get(0).play();
}
});
}
- 動画を再生するかの判定を「playVideos」関数で行います
- 1ページ内に2つ以上の動画が配置されるケースも想定して、eachを使ったループ処理を行っています
- スクロール位置とvideoタグの開始座標を比べ、開始座標が、スクロール量＋ウインドウの高さより大きい（＝videoタグの開始位置がウインドウ内に現れたタイミング）のであれば再生します
- videoタグを再生する際は「get(0)」でvideoタグ内の動画を指定した上で「play()」を実行します
$(window).on('load', function() {
const videos = $('.video_wrapper > video');
if(videos.length) {
playVideos(videos);
$(window).on('scroll', function() {
playVideos(videos);
});
}
});
- 「playVideos」関数を呼び出すための処理です
- 「$(window).load(function() { 〜 });」でページ内の動画を含めたすべての要素が読み込み終わったタイミングで一度「playVideos」関数を実行します
- 読み込み終了時点で動画の再生判定を行うことで、画面がスクロールされた状態でF5更新されたような場合にも動画を再生できるようにしています
- 以降は、「$(window).scroll(function() { 〜 });」で画面のスクロールが発生したタイミングで「playVideos」関数を呼び出します
変更履歴
2020/06/17
- イベント処理を「.load()」「.scroll()」で行うよう記載していたため、jQueryのバージョンによって動作しないケースがありました。「.on()」に変更しました
- スクロールの開始タイミングが「動画要素が画面外までスクロールしたとき」となっていたため「動画要素が画面内に現れたとき」に変更しました
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。