Google chromeでウィンドウ最小化したらウェブサイトのvideoが消えるエラーの対処法

web制作

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

最後に一言

勉強なりました。

この記事が参考になったら「いいね!」

Google chromeでウィンドウ最小化したらウェブサイトのvideoが消えるエラーの対処法


SNSのシェアはこちらから!

  • 1
    このエントリーをはてなブックマークに追加
  • Pocket

PROFILE

yoshi

運営者のYoshiと申します。WEB制作は、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。サーバー・アプリなども習得中。