だれかのなにかに役立てるウェブ制作者YoTaの趣味ブログ

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の映像が上手く流れない・・・。そんな時は、動画の拡張子に注目して、その並び順に気をつけてみましょう。

ページ上部に戻る