最新版のGoogle Chromeでサイトの埋め込み動画が自動再生されない場合の対応方法まとめ
最新版の Chrome 66 では、サイトに音声付き動画が埋め込まれている場合に、自動再生されなくなりました。弊社で運用している幾つかのホームページでも動画が自動再生できなくなりましたので、その対応方法をまとめます。
この記事では、サイトに、インラインフレーム (iframe) で Youtube 動画を埋め込んでいる場合、video タグで動画を埋め込んでいる場合、bigVideo.js で動画を埋め込んでいる場合の対処方法を、それぞれ記載いたします。
再生されなくなったサイトに埋め込んでいた動画は全て、元々音声の入っていない動画でした。音声なしの動画なのになぜ・・・と頭を抱えましたが、動画音声のあるなしに関わらず、プレイヤーの音量設定自体を消音（ミュート）にしなければいけなかったようです。本記事でご紹介する方法はどれも、プレイヤーの音量をミュートにする方法です。
iframe で Youtube 動画を埋め込んでいる場合
src に、”&mute=1″ パラメータを追加します。
videoタグで埋め込んでいる場合
video タグに、muted 属性を追加します。
jQuery の bigVideo.js を使って埋め込んでいる場合
bigVideo.js 自体を修正します。bigVideo.js 内の、変数 player への値代入時のタグに、 muted 属性を追加します。
player = $(''); （js がキャッシュに保存され、変更が反映されない場合があります。ご注意ください）
上記修正後、サイトに埋め込んでいる動画が正常に再生されるようになる筈です。safari や Firefox、 Edge など、Chrome 以外のブラウザでも同様の対応がなされる可能性は大ですので、この問題は早めに対応しておいた方が良いですね。
参考：「Chrome 66」安定版がリリース–音声付き動画の自動再生を制限 （CNET Japan）
https://japan.cnet.com/article/35118004/
ビーズクリエイトではエンジニアを募集しています。
ビーズクリエイトのエンジニア職に興味のある方は、ぜひご連絡ください
