iosの各ブラウザでhtml埋め込みの動画が再生されない。

Question

videoタグでmp4の動画を埋め込んでいるのですが、pcのsafari,chrome,Firefox、Androidのchrome,Firefoxでは問題なく再生されます。しかしiosのsafari,chrome,Firefoxで検証すると、動画が再生されません。

また、safariの検証画面 > ネットワークを見ると、動画を読み込んでいる最中にリソース読み込み中にエラーが起きました。と表示されます。動画は6.5mbと重いのですがこちらが関係しているのでしょうか。

ソースコード

[pug]
--------------------------------------------------------------------------------
video(poster=`${path}images/test.png` autoplay loop muted playsinline)
  source(src=`${path}images/test.mp4` type="video/mp4")
--------------------------------------------------------------------------------

[css]
--------------------------------------------------------------------------------
video{
 min-height: 100vh;
 width: 100%;
 object-fit: cover;
}
--------------------------------------------------------------------------------

ナレッジのある方がいらっしゃいましたら、ご教授お願いいたします。

Comments

[退会済みユーザー]

これのどこがHTMLなんでしょうか

[hosodaaaaa]

失礼しました。
pugです。

[退会済みユーザー]

であれば、タグにも追加しましょう。じゃないと、pugに知見のある人が見に来ないので。

[hosodaaaaa]

ご指摘ありがとうございます。

[mattari_panda]

確認なのですが、iOSのバージョンは10以上でしょうか？

Answer 1

iphoneの低電力モードで検証していたことが原因でした。

Answer 2

同様の現象で悩んだ際に下記サイトが役に立ちました
https://deep-space.blue/web/822

Comments

[hosodaaaaa]

回答ありがとうございます。
今回のバグは、iphoneの低電力モードで検証していたことが原因とわかりました。