Chromeウィンドウ最小化でページ内のvideoの映像が消えるエラーの対処法
先日、videoを全画面表示するウェブサイトを制作していた際、そのブラウザチェックをしていたら、Google chromeだけウィンドウ最小化をすると、videoの中の映像が流れなくなってしまうエラーに気がつきました。
このエラーのややこしいポイントは、ローカルでは普通に動作するのですが、エックスサーバー経由で確認すると発生するところです。以下、詳しく紹介します。
原因と解決法は以下の通り。
目次
エラーの原因
下記のソースコードだと、エラーが発生しました。
<div id="mv_video">
<video id="vid" autoplay loop muted>
<source src="movie/*******.mp4" type="video/mp4" />
<source src="movie/*******.webm" type="video/webm" />
</video>
</div>エラーの解決法
こうすると解決。（ウィンドウ最小化してから元に戻しても、ちゃんとvideoの映像が流れている状態となる。）
<div id="mv_video">
<video id="vid" autoplay loop muted>
<source src="movie/*******.webm" type="video/webm" />
<source src="movie/*******.mp4" type="video/mp4" />
</video>
</div>ソースコード見ると分かりますが、divもvideoも関係なく、ただ単純に拡張子の並び順が違うだけのことです。mp4より前にwebmを置かないとダメなようです。（自分の作った制作物以外に、他のきちんとした会社のHPなどのソースコードを引用してみて検証したところ、やはり同様でしたので、順番は大事な様子。）
環境条件
もしかしたら、今現在は解決しているかもしれません。
あくまで、2017年11月上旬時点の情報であり、Chromeのバージョンは「62.0.3202.89（Official Build） （64 ビット）」でした。
まとめ
ブラウザウィンドウを最小化したら、videoの映像が上手く流れない・・・。そんな時は、動画の拡張子に注目して、その並び順に気をつけてみましょう。