スマホでvideo要素を自動再生させる

TIPS 0 Takuya Kobayashi

video要素で埋め込んだ動画を自動再生させてループさせる方法。(スマホ対応)

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

playsinline
video 要素によって埋め込まれた映像を「インライン」で再生するように指定します。インライン再生とは、その要素が埋め込まれた場所で再生するという意味になります。
https://reference.hyper-text.org/html5/attribute/playsinline/
これがないとiOS環境で自動再生されない場合がある。

muted
動画をミュートにする。これがないと自動再生ができない。

autoplay
自動再生を有効化。

loop
ループを有効化。