先日、社内で聞かれて改めて調べ直したのでメモ。iOS系や、Chrome系にも対応しています。

結論

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

ループ再生させるために loop属性 も追加してありますが、autoplay属性 playsinline属性 muted属性 を追加すればOKです。

解説

基本

基本的に動画を自動再生させるには、<video>タグに autoplay属性 を追加するだけ。

<video src="*****/movie.mp4" autoplay></video>

iOS(iPhone)

iOS(iPhone)には autoplay属性 に加えて playsinline属性 も加える。

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

Chrome(android)

Chrome(android)には autoplay属性 に加えて muted属性 も加える。

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

まとめ

全部つけてしまえば解決!

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

参考

<video>: 動画埋め込み要素 – HTML: ハイパーテキストマークアップ言語 | MDN