videoタグを使った動画がChromeだけ再生できない問題について

videoタグで動画を扱う際に注意すること

kinko25

1 minute read

videoタグで動画を扱う際に注意すること

なぜかChromeだけ初期表示で動画再生がされない事件

最近、なぜかサイト内の背景動画がChromeブラウザだけ、

動かないという問題起きていました。

しかし、意外にも簡単に解決できたので、ご紹介したいと思います。

Chrome以外のブラウザでは、動画再生が可能。

まず、検証して気づきました。

FirefoxやIE11でさえ、動くのにChromeでは動かないということに。

最初はJSなどの影響を受けてるのではないかと思い、

調査してみましたが、何の問題もなく。。。

リンクをコピペで飛ぶと、

初期表示で、背景動画は再生されず。

二回目以降で再生されるという不思議なものでした。

これは「Chrome 66」以降のバージョンで起きる問題

「Chrome 66」以降のバージョンは、「音声付き動画の自動再生無効化」というもので制限されているみたい。

「Chrome 66」安定版がリリース--音声付き動画の自動再生を制限
https://japan.cnet.com/article/35118004/

「Google Chrome 66」安定版 動画の自動再生がなくなり、62件の脆弱性に対処
http://www.itmedia.co.jp/news/articles/1804/18/news087.html

"今回リリースされたChrome 66では、音声が再生されない動画か、ユーザーが以前にクリックした場合、あるいはその動画に関心を示したと認められる場合にのみ、自動再生が許可される。"

これを読むと、遷移した際に初期表示では再生されないが、 リロードすると2回目以降で再生される理由がわかった気がします。

つまり、これがリリースされたのは2018年4月なので、 対応していないという方は早めに対応されたほうが良いかと思います。

どうやって解決するか

では、この問題をどう解決するか。

videoタグにmutedを追加するというだけでした。

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

背景動画で使っている動画はそもそも無音なので、

これで解決できました。

最後に

今回は、videoタグにmutedを追加するだけで解決できましたが、今後のアップデートでどうなるかわかりませんので

注意が必要ですね。

背景動画がChromeで再生できない現象については、この辺で。

ありがとうございました。

参考URL:創kenブログ Chrome最新版にて背景動画が自動再生されない事象:原因と対処方法 http://souken-blog.com/2018/05/08/chrome-movie/