最新版Chromeではサイトに埋め込んだ動画が自動再生されません

最新版のGoogleChromeを利用すると、サイトに埋め込んだ動画が再生されない事象を確認しました。
他ブラウザでは通常再生しGoogleChromeのみ再生がされない場合は、この記事にまとめている対策を試してみてください。

1.GoogleChromeで動画再生ができない事象

最新版のGoogleChromeを利用してサイト内にある動画を見ようとすると、従来、自動再生されていた動画が再生されず、静止画のように止まったままになる現象を確認しました。

Internet ExplorerやFireFoxなどの他ブラウザでは同様の事象は発生せず、最新版のGoogleChromeに限った話の模様です。 GoogleChromeのバージョンアップ情報を参照していくと、どうやら、今回のバージョンアップが「動画の自動再生無効化」を中心に実装された機能な模様なので、仕様設計ミスという訳ではなさそうです。

・Chrome最新バージョン、ついに｢オートミュート｣機能を搭載

サイトに埋め込んだ動画（Youtubeも含む）には、ミュート属性を設定しておかないと自動再生されない状況なので、事象を確認したら以下手順にて回避するようにしましょう。

2.サンプル

実際に、動画ファイルを埋め込んでみました。
自動再生されるものは、ミュート属性を設定しているものなります。

videoタグでの再生（左：ミュート属性無　 右：ミュート属性有）

再生可否の差は、videoタグにmuted属性を書いているかどうかとなります。 これは音声を持っていない動画に対しても同様なため、サイト内に動画を利用している場合には、muted属性の記述の有無を確認するようにしましょう。

3.原因について

原因は、GoogleChromeの仕様に依存した問題となります。
上述した通り、サイトに挿入した動画に対して、muted属性を付与することで問題は回避できますので、実施されてない方は早めに対策を施しましょう。

4.対処法について

サイトに埋め込み際に、muted属性を付与することで、従来のような自動再生が可能になります。 動画挿入時は以下ソース参考に、埋め込んでみて下さい。

videoタグによる埋め込みコード

<video autoplay loop muted controls src="/dcms_media/other/sample0525.mp4" width="300"></video>

ソース上に muted を記述することで、最新版Chromeでも従来のように自動再生されるようになります。

Chromeの仕様修正を期待したいですが、「動画の自動再生無効化」をメインにしたバージョンアップとなるので、しばらくこの仕様が続くかと思います。サイトに動画挿入をしている方は注意しましょう。