【HTML】videoタグを埋め込んでもスマホで自動再生されない時の解決方法

autoplayを設定しているのに自動再生できない!

コーディングの際に以下のように動画を設置すると、スマホ(特にiOS)では自動再生がされないことが多いようです。

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

autoplay(自動再生)もmuted(ミュート)も設定しているのにどうして自動で再生されないのでしょう….

【解決方法】「playsinline」の追記

とりあえず、自動再生できるように以下のように”playsinline“を追記することで大半のスマホで自動再生が可能となります。
私のコーディング中に起きた問題もこの方法で解決しました。

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

playsinline

動画を「インライン」で再生する、すなわち要素の再生領域内で再生するかを指定します。この属性がないことが、動画を常に全画面で再生するという意味ではないことに注意してください。

iOSでは別の問題で再生できないことも

iOSのバッテリー管理を「低電力モード」にしているとほぼ動画の自動再生が停止されてしまいます。
それ以外の場合であれば「playsinline」の記述でほとんどの端末で問題が解決します!