Google Chromeの最新版「Chrome 66」が公開されました。
PC用（Windows、Mac、Linux）です。
この最新版に実装された機能に「音声付き動画の自動再生無効化」というものがあります。
＊「Chrome 66」安定版がリリース–音声付き動画の自動再生を制限
＊「Google Chrome 66」安定版 動画の自動再生がなくなり、62件の脆弱性に対処
広告動画からの音声を制限するのが主たる目的だそうです。
WEBページを開くと、いきなり動画の音声が大音響で流れるのはウザいですからね。
たとえば、以下のサンプルページですが、
ページを開くと、Youtube動画が自動再生される設定にしてあります。
このページをFirefox・Edge・IEなどで開くと普通に自動再生されます。
Chrome66で開くと自動再生されません。
ところが、この機能追加により、一部のHTML5の背景動画実装サイトにて、無音の動画であってもChrome66にて自動再生できない事象が起きています。
今回はこれの対処法について。
「muted」属性を加える
この事象の解決策ですが、結論から言うと
videoタグに「muted」属性を加えれば動画は普通に再生されます。
「muted」属性とは、動画を無音で再生させる属性です。
例として以下のようなコードになります。
<video autoplay loop muted src="movie.mp4"></video>
＊「autoplay」属性：動画を自動再生させる
＊「loop」属性：繰り返し再生させる
＊「muted」属性：無音で再生させる
元々が無音の動画であっても、あえて「muted」属性を加えないと、Chrome66では自動再生されません。
試しに以下のサンプルページを作ってみました。
上の動画は「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、下２つは自動再生できません。
