ひろあき

サイトに埋め込んだ動画がChromeやSafariで自動再生されない時の対処法

トップページのファーストビューなどに動画を埋め込む場合は、<video>タグを使用することで自動再生が可能になります。

ファーストビューを画像から動画に変更するだけでもサイトの印象が全く変わりますし、雰囲気のあるサイトに仕上げることができます。

通常は<video>タグを使用すれば簡単に動画を埋め込んで自動再生させることが可能ですが、各ブラウザでチェックしてみるとFireFoxやEdgeでは自動再生されるのに、ChromeやSafariでは正常に再生されない場合があります。

そんな時は、以下の方法で解決すると思いますので試してみてください。

ChromeやSafariで動画を自動再生させる方法

Chromeだけ、またはChromeとSafariで動画が自動再生されない場合は、<video>タグの中に muted を追加すれば解決すると思います。

記述例

<video src=”sample.mp4″ autoplay muted></video>


ChromeやSafariで自動再生されないのはブラウザの仕様が原因になります。

Chromeの場合、音声のあるなしに関わらず、mutedを記述しておかないと動画が自動再生されない仕組みになっています。

また、Safariの場合、通常は音声の入った動画にはmutedが必要で、音声なしの動画にはmutedは必要ないはずですが、音声のない動画の場合でも記述しておかないと正常に再生されない場合があるようです。

そのため、動画を自動再生させたい場合には最初から<video>タグの中に muted を記述しておくと確実です。

HOME > デザイン > サイトに埋め込んだ動画がChromeやSafariで自動再生されない時の対処法