Chrome最新版にて背景動画が自動再生されない事象：原因と対処方法

Google Chromeの最新版「Chrome 66」が公開されました。
PC用（Windows、Mac、Linux）です。

この最新版に実装された機能に「音声付き動画の自動再生無効化」というものがあります。

＊「Chrome 66」安定版がリリース–音声付き動画の自動再生を制限

＊「Google Chrome 66」安定版　動画の自動再生がなくなり、62件の脆弱性に対処

広告動画からの音声を制限するのが主たる目的だそうです。
WEBページを開くと、いきなり動画の音声が大音響で流れるのはウザいですからね。

たとえば、以下のサンプルページですが、

＊サンプル：自動再生：Youtube埋め込み動画

ページを開くと、Youtube動画が自動再生される設定にしてあります。

このページをFirefox・Edge・IEなどで開くと普通に自動再生されます。
Chrome66で開くと自動再生されません。

ところが、この機能追加により、一部のHTML5の背景動画実装サイトにて、無音の動画であってもChrome66にて自動再生できない事象が起きています。

今回はこれの対処法について。

「muted」属性を加える

この事象の解決策ですが、結論から言うと
videoタグに「muted」属性を加えれば動画は普通に再生されます。

「muted」属性とは、動画を無音で再生させる属性です。

例として以下のようなコードになります。

<video autoplay loop muted src="movie.mp4"></video>

＊「autoplay」属性：動画を自動再生させる
＊「loop」属性：繰り返し再生させる
＊「muted」属性：無音で再生させる

元々が無音の動画であっても、あえて「muted」属性を加えないと、Chrome66では自動再生されません。

試しに以下のサンプルページを作ってみました。

＊サンプル：背景動画のWEBページ

上の動画は「muted」属性有り、下が無しです。
両方とも動画ファイル自体は無音声です。

Firefox・Edge・IEでの挙動と、Chrome66での挙動を比較してみてください。

有名な背景動画サイトの場合は

有名な背景動画サイトであっても、「muted」属性有りのサイトと、無しのサイトがあります。
（2018年5月8日現在）

「muted」属性有り
http://www.theqcamera.com/
https://ureshinochadoki.shop/

「muted」属性無し
http://www.tokyobase.co.jp/
http://www.letsgo-ogasawara.com/

上の２サイトはChrome66にて自動再生OK、下２つは自動再生できません。

Chromeもバージョンによって仕様が変化するので、この記事の鮮度もいつまで保つのやら (^_^;)