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

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/

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

 

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

 

WEBサイトをWordPressにて低価格・高品質で作成します

ご希望内容をお伺いした上で、金額・納期をお見積もりいたします。

お見積もり・ご注文はクラウドソーシングの「ランサーズ」にて承っております。
*ランサーズのアカウント(無料登録)が必要となります。

  • 使用するWordPressテーマは、当方にてライセンス権を購入済の「Swell」「Lightning有料版」「Katawara」の3つの中から選択する形となります。
  • お見積もり後、金額・納期が折り合わなければ発注しなくても大丈夫です。