サイトに埋め込んだ動画がChromeやSafariで自動再生されない時の対処法
#
Web制作
トップページのファーストビューなどに動画を埋め込む場合は、<video>タグを使用することで自動再生が可能になります。
ファーストビューを画像から動画に変更するだけでもサイトの印象が全く変わりますし、雰囲気のあるサイトに仕上げることができます。
通常は<video>タグを使用すれば簡単に動画を埋め込んで自動再生させることが可能ですが、各ブラウザでチェックしてみるとFireFoxやEdgeでは自動再生されるのに、ChromeやSafariでは正常に再生されない場合があります。
そんな時は、以下の方法で解決すると思いますので試してみてください。
ChromeやSafariで動画を自動再生させる方法
Chromeだけ、またはChromeとSafariで動画が自動再生されない場合は、<video>タグの中に autoplayとmuted を追加すれば解決すると思います。
記述例
<video src="sample.mp4" autoplay muted></video>ChromeやSafariで自動再生されないのはブラウザの仕様が原因になります。
Chromeの場合、音声のあるなしに関わらず、mutedを記述しておかないと動画が自動再生されない仕組みになっています。
また、Safariの場合、通常は音声の入った動画にはmutedが必要で、音声なしの動画にはmutedは必要ないはずですが、音声のない動画の場合でも記述しておかないと正常に再生されない場合があるようです。
そのため、動画を自動再生させたい場合には最初から<video>タグの中に autoplay と muted を記述しておくと確実です。
この記事を書いた人
田中 寛昭
Design / Marketing
アメリカ・フロリダ州にあるウォルト・ディズニー・ワールドでホテルマンとして働いた経験があり、当時はフランス・イタリア・スイス・ドイツ・アフリカ・モロッコ・メキシコの人達とルームシェアをして暮らしていました。
20代半ばからは、M&Aに伴うデューデリジェンスや国立大学・国立病院の独立行政法人化、地価動向の調査・分析など、官公庁や自治体、裁判所、上場企業、金融機関等の様々な案件を経験。その後、Webサイトの運営や制作を手掛けるようになり起業しました。