Webサイト制作 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 属性…ミュートした状態で再生します。

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

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

CMAブログをGoogle検索で見つけやすくしたい方はこちら

1976年静岡生まれ

印刷会社のデザイナーとして会社案内・カレンダー・チラシ・ポスターなどのデザインを経験。その後、CMAにWebデザイナーとして入社。印刷業で培った知識や数々の経験を経て制作部部長に就任。勉強会の開催やツールの導入など、積極的に新しい技術を取り入れている。