Video tag not working on iPhone Safari or Chrome and certain iPads

New Answer (working) :

Well I somehow missed this one little detail "only shows the initial frame image". I've misread the Question as "video does not even try to work" (because it can happen with some models/brands vs H.264 codec).

Acoording to this blog aticle : html5 Video Autoplay on iOS and Android...

Your code should look like (also use low-res MP4 version) :

<video class="video" playsinline autoplay muted loop>

Finally also check : Webkit policy for video section. Maybe it'll be useful to trick the machne.


Older Answer :

  • I've also compressed the heck out of my video. This test example is currently 640 × 360, H.264, AAC. Still no luck.

Your H.264 video is encoded with incompatible Profile : High @ Level 3.0.

Solution : Re-encode with choosing Main @ level 3.1 (also can try level 4.0).

Since no iOS hardware here, test these re-encode :

Main profile @L3.1 : clip-intro-low_v2.mp4

Baseline profile @L3.0 : clip-intro-low_v3.mp4

PS: You may have a similar issue to this Question (in case it's useful to you).