ミギムキ

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

サンプルコード

html

<div class="video_wrapper"> <video src="movie.mp4" muted loop></video> </div>
スポンサー広告

jQuery

jQuery(function($) { function playVideos(videos) { const scrollTop = $(window).scrollTop(); videos.each(function(index) { if(scrollTop > $(this).offset().top) { $(this).get(0).play(); } }); } $(window).load(function() { const videos = $('.video_wrapper > video'); if(videos.length) { playVideos(videos); $(window).scroll(function() { playVideos(videos); }); } }); });

サンプルコードの解説・補足

function playVideos(videos) { const scrollTop = $(window).scrollTop(); videos.each(function(index) { if(scrollTop > $(this).offset().top) { $(this).get(0).play(); } }); } $(window).load(function() { const videos = $('.video_wrapper > video'); if(videos.length) { playVideos(videos); $(window).scroll(function() { playVideos(videos); }); } });
スポンサー広告