Safariで動画が自動再生されない問題

HTML

2021.08.24 2021.07.29

説明
対策

説明

Web上で動画を自動再生したいときに、ブラウザの仕様によって、挙動が変わってきます。chromeは特に問題ないのですが、Safariはミュート状態でないと、自動再生されないという機能になっているそうです。ページを開いていきなり音が出てびっくりしないようにするためだとかなんとか・・。

対策

①. safari用にmetaタグにapple-mobile-web-app-capableを付ける
②. videoタグにmuted, playsinlineを付ける

<head>
<meta name="apple-mobile-web-app-capable" content="yes">
</head>

<video id="hogehoge" muted loop playsinline src="hogehoge.mp4" crossorigin="anonymous"></video>

以上です！