jQueryを使って、画面に表示されたら動画を再生

ホームページへ動画を組み込む際に、動画が設置されているところまでスクロールして、表示された時に動画を再生したいとの要望を受けて実装した方法をメモ。

HTML

<div class="video_wrap">
<video playsinline controls muted id="myvideo">
<source src="○○○○.mp4" type="video/mp4">
</video>
</div>

jQuery

$(window).scroll(function(){	
	var offsetTop = $(window).scrollTop();
	var sH = window.innerHeight * 7 / 10;
		
	if($('.video_wrap').length){
		if(offsetTop > $('.video_wrap').offset().top - sH){
			$('#myvideo').get(0).play();
		}else{
			$('#myvideo').get(0).pause();
			$('#myvideo').get(0).currentTime = 0;
		}
	}
});

トリガーの位置は「sH」の値を変えることで調整可能。

動画を音声有りにすると、ブラウザ制限により自動再生ができなくなるため、必ず「消音（muted）」を付与する必要があります