ホームページ制作 Google Chromeで動画が再生されない

皆様こんにちは。デザイン部の坂本です。

弊社のトップページにあるメインビジュアルの動画が、いつの間にか再生されなくなったので調査をしました。
原因が判明し修正を加えたところ、無事動画が再生するようになりましたのでその方法をご紹介します。

動画が再生されない症状

Google Chromeでアクセスすると動画が自動再生されないもしくは表示がおかしくなる。
ページをリロードしたり他のページから遷移した場合は問題なく再生される。

■弊社のトップページも動画が自動再生されなくなった。（※現在は再生されます）
https://www.akindo2000.net/

動画が再生されない原因

Google Chromeのバージョン66では音声付きメディアの自動再生が制限されるように仕様が変更された。

バージョンの確認方法

右上の「メニュー」→「ヘルプ」→「Google Chromeについて」で確認できます。

修正方法

videoタグに「muted属性」を付与してください。

<video id="player1" width="100%" height="400px" preload="none" autoplay loop muted >
<source src="movie.mp4" type="video/mp4" />
</video>

muted 属性…ミュートした状態で再生します。

youtubeをiframeで埋め込んでいる場合

iframeのパラメータではミュート設定できないため、APIでの記述を書き直してミュートに設定する必要があります。

まとめ

いかがでしたか？
ブラウザの仕様変更で不具合が発生することもあります。
トップページに動画を使っているサイトも多いため、すぐに対処できるようにしましょう！