Chrome上での自動再生 (EOTD No.8)

こちらAmetaです！今回はEOTD(Error Of The Day)のNumero 8です。

本日のエラー

シチュエーション

本日のエラーは、背景に動画を埋め込んだ時におきました。

HTMLにはVideoタグを、

  <video id="video" autoplay loop>
    <source src="/assets/family_cooking.mp4" type="video/mp4">
  </video>

CSSは以下のような形。

#video{
  position: absolute;
  width: 100vw;
  height: 100vh;
  z-index: -100;
}

以上のコードたちで対象のページを開いてみると、動画ではなく静止画。。。

いつまで経っても動きだしてくれません。
autoplayで自動再生されるように設定できているはずなのに...

考察

今回はすぐさま同じような方の質問が見つかりました！

https://stackoverflow.com/questions/49822790/html5-video-autoplay-not-working

この方は、video要素のオプションでcontrolsとautoplayを指定されてました。

Depending on your Chrome version you might get the new implementation of video autoplay rules:

• Muted autoplay is always allowed.

解決

以上の回答からautoplayに加えてmutedのオプションを設定しなければいけないことがわかりました。

<!--videoタグにmutedを追加-->
  <video id="video" muted autoplay loop>
    <source src="/assets/family_cooking.mp4" type="video/mp4">
  </video>

再度ブラウザで確認してみると...成功！

動画埋め込みをchromeで自動再生したい場合はautoplayに加えてoptionのmutedを設定する。
ただ、mutedを記述しない場合でもいくつか自動再生することができる状況もあるようです。

SOTD(Summary Of The Day)

今日は動画を埋め込んだ後でレスポンシブになるようcssと格闘していましたが、なかなか思うようにいかないものですね。

サーバーエンドを実装している時のようにエラー文が導いてくれない分、どこに間違いがあるのかを判断するのが難しいと感じました。

またある箇所が思い通りに行ったと思ったら、他の箇所がずれてしまうと言うこともありました。

フロントエンドは段階を踏んで、こまめに確認。今日の学びです。。