解決方法

早速ですが、対応方法です。

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

• playsinline を入れる
• Safariでは、autoplay属性だけでは自動再生ができない
• インライン再生で自動再生には、muted属性も必須
• 動画の音は、なし

これで再生できます。

※参考ページ → 僕の運営している 焼肉u（Gatsby js製です）

しかし…

バッテリー省エネモード

上記で基本OKなのですが、iPhoneのバッテリー省エネモードになっていると自動再生されません。

※参考ページ → 僕の運営している 焼肉u（Gatsby js製です）

• 正しく属性を入れたのに自動再生されない
• 勝手に再生ボタンが表示される
• タップすると再生される

Safariの仕様で、バッテリー消費を抑えるために、自動再生が制御される

PCとiPhoneを接続し、Safariの開発ツールからコンソールを確認すると、ブラウザ側で再生ボタンを描画されているのがわかります。

それでも、どうしても再生ボタンを非表示にしたい！とちょっと思ったので調べました

iOS Safari 13: how to hide live broadcast controls in video element

しかし、これはデバイスやOSの仕様に背くこととなり、微妙だと判断したので、辞めました。w

バッテリーが少ない場合は自動再生されないのは正しい事である

です。

video タグの属性

詳しくはMDN Web Docsや、appleのdocumentを確認して下さい。

まとめ

• safari用に必要な属性を入れる
• バッテリーモードのときは自動再生されず、再生ボタンが表示される

ご参考になれば