【HTML5,Jquery】特定の高さを超えた時のVIDEOを操作する

ブログ ホームページ制作

ある高さを超えると動画をストップするスクリプトを作りました。

最初は、jquery.inview.jsってのを使ってたんですが、なぜか動かなかったので諦めました。
1時間も無駄にした・・・。

結果自分で作る事にした。10分で出来たし・・・。1時間はいったいなんだったのか・・・・。

$(function() {
var video = $('#video').get(0);
var video_h = $(window).height();
video.play();
	 $(window).scroll(function () {
		 
		 var video_sh = $(window).scrollTop();
		 if(video_h < video_sh){
			  video.pause();
		 } else {
			 video.play();
		 }
		 	
	});
});
<video loop src="動画のURL" id="video" ></video>

//var video = $(‘#video’).get(0);
ここは動画を変数にぶっこんでます。

//var video_h = $(window).height();
画面の高さを取得してます。

//video.play();
最初は再生していてほしいのでプレイを実行
videoは変数ですね。

やりたいことは特定の高さを超えたらStopなので、スクロールで高さを取得するようにしてます。

//var video_sh = $(window).scrollTop();
これがTOPからどれだけスクロールしたかを出しています。

//video_h  >  video_sh
if分でvideo_hを超えたらStop

//video.pause();
一時停止

てっきりstopかと思ってたら違いました。

というわけで完成です。

気に入った記事であれば、ぽちっとお願いします<(_ _)>