ミギムキ

[jQuery] ページのスクロールに合わせてvideoタグの動画を再生する

サンプルコード

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(); } }); } $(window).on('load', function() { const videos = $('.video_wrapper > video'); if(videos.length) { playVideos(videos); $(window).on('scroll', function() { playVideos(videos); }); } });

変更履歴

2020/06/17

  • イベント処理を「.load()」「.scroll()」で行うよう記載していたため、jQueryのバージョンによって動作しないケースがありました。「.on()」に変更しました
  • スクロールの開始タイミングが「動画要素が画面外までスクロールしたとき」となっていたため「動画要素が画面内に現れたとき」に変更しました

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。

スポンサー広告