videoタグで埋め込んだ動画をブラウザのアクティブ、非アクティブやスクロールで一時停止・再生させる

Question

###前提・実現したいこと
WEBサイトに埋め込んでいる動画を動画再生しているブラウザがアクティブでは無い時には
一時停止し、ブラウザがアクティブになったら再生を再開出来るように制御したいです。
また、画面をスクロールし動画が画面上部に隠れた場合も動画を一時停止したいです。

ブラウザのアクティブ・非アクティブ部分の制御が出来ず
スクロールでの制御方法も思いつかない現状です。

どのような記述をすれば良いのかご存知の方ご教示下さい。
宜しくお願い致します。

###該当のソースコード

<video class="masthead-video" id="mainvideo" autoplay loop poster="/images/◯◯◯.jpg">
			<source src="■■■.mp4" type="video/mp4">
		</video>

$(function() {
   var video = document.getElementById('mainvideo');
   var video = $('#video').get(0);
	
	 $('#mainvideo')
    .focus(function(){
      video.play()
    })
   .blur(function(){
      video.pause()
    });
});

Answer 1

ブラウザのアクティブ、非アクティブ

【JavaScript - スマホなどで非アクティブからアクティブになった時にアクション(34327)｜teratail】
https://teratail.com/questions/34327

【Page Visibility API - ウェブデベロッパーガイド | MDN】
https://developer.mozilla.org/ja/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API

【Page Visibility APIで現在のWEBページが開いているかどうか - なんちゃってウェブ系エンジニアの備忘録】
http://owen11.hateblo.jp/entry/2014/07/09/200908

---

スクロール

【.scroll() | jQuery 1.9 日本語リファレンス | js STUDIO】
http://js.studio-kingdom.com/jquery/events/scroll

【.scroll() | jQuery API Documentation】
http://api.jquery.com/scroll/

【[jQuery] 要素が画面内にスクロールインしたタイミングで処理をする】
https://www.ipentec.com/document/document.aspx?page=jquery-inview

【jQueryで "ある要素" が画面内にあるかどうかを判別する｜プログラムメモ】
http://logic.moo.jp/data/archives/879.html

【指定した要素がスクロールで画面内に入った時、イベントを発動させるjQueryプラグインjquery-scrollInFunc.js | アライドアーキテクツのクリエイターブログ】
http://creator.aainc.co.jp/archives/6937

Comments

[sakio6]

ご回答有難うございます。

ブラウザのアクティブ・非アクティブ頂きましたリンク先を参考に検証してみたのですが、
タブ切り替えた時は動画が一時停止しますが、タブはそのままで別のブラウザなどをアクティブにしても、再生されたままでした。
前の回答者様がおっしゃる様にブラウザのアクティブを判定するのは難しいのかもしれませ。

スクロール位置を決めて一時停止にしていましたが、”画面内に要素があるかどうか”が
使い勝手が良さそうなので、こちらを参考に再度検証してみたいと思います。

多数の参考サイト有難うございました。

Answer 2

ブラウザがアクティブかどうかはOS側でしか判別出来ないと思うの無理かと…。
スクロール制御はスクロール位置を取得して停止ボタンをクリックさせるとか、考えてみましたが検証していないので確証は無いです。

Comments

[sakio6]

ご回答有難うございます。

Facebookに投稿された動画が自分の理想の動き（アクティブ・非アクティブでの停止、再生）
になっていたので、実現可能かと考えていました。

http://breaktimes.hatenablog.com/entry/2014/05/27/122207

こちらの記事を参考にスクロールとブラウザのタブを切り替えた時のみですが、
一時停止、再生の制御を行う事が出来ました。
（動画表示したまま別のブラウザ閲覧時には動画は止まりませんでした）

他の方法も調べて、検証してみたいと思います。
貴重なご意見有難うございました。