Html5 Video Not Working on iPad

HTML5 video element not loading on iPhone/iPad

There's a few possibilities.

The first one to try is adding the Accept-Ranges: bytes HTTP response header as shown here Safari Web Content Guide: Configuring Your Server

If that doesn't work then it's possible that you may need to reencode the video with some different encoding flags. I've had success with ffmpeg and parameters like this:

ffmpeg -i %1 -pass 1 -vcodec libx264 -preset slow -profile:v baseline   -b:v 2000k -b:a 128k -r 25 -g 50 -vf setfield=1 -f mp4 -threads 0 -y %1-hq.mp4
ffmpeg -i %1 -pass 2 -vcodec libx264 -preset slow -profile:v baseline   -b:v 2000k -b:a 128k -r 25 -g 50 -vf setfield=1 -f mp4 -threads 0 -y %1-hq.mp4

Solution for HTML5 Video not working in Safari , iPhone and iPad with player video-js

The only thing that could logically be a problem is if the videos are not encoded properly. In particular with both Safari and Mobile Safari, only H.264 encoded MP4 video is supported. MP4 is the container and can technically be used for other types of encoded video, which most likely has happened here.

Also, you need to be aware of encoding profile and level. Not all H.264 profiles are supported for all devices. You should be safe with one of Baseline, Normal, or High. High has the best compression to quality ratio of those three, so that's your best bet. The level is even more finicky. While more modern devices will support 4.2 or higher, 4.1 still enjoys the broadest support.

So specifically, your video needs to be an MP4, encoded with H.264 High 4.1.

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).

HTML5 video problems on Safari

This is indeed a bug* in Safari (at least 12.0.2), which doesn't accept to fetch this 300MB video as a single Request from the MediaElement.

They try desperately to make a Range request, but your host doesn't allow such requests. You can see it by trying to seek in the video while not fully loaded in other browsers.

You could workaround that issue by either

Setting your server so that it accepts Range requests (that would be the best solution, even for other browsers).
On error, fetch the whole file through AJAX and play it from memory (as a Blob). But this means waiting for the 400MB to be downloaded.
On error, fetch the file and pipe a ReadableStream to a MediaSource's SourceBuffer using its appendStream() method. But no browsers supports it yet...

_{*Though I found this link which says that "HTTP servers hosting media files for iOS must support byte-range requests", so it is for iOS, but they probably have the same constraints for desktop. But that they do not support non-range requests sounds like a bug anyway as it goes against the specs.}

HTML5 video tag not loading on iPad

Apparently its a MimeType issue Check this link for more information

I found it here

Have a nice day :)

I can't play HTML5 video on some ios device (ipad and iphone)

Alright just to answer my own question.

I found out that when the attribute preload='auto' is used, ios devices/browsers load it a bit different from andriod phone.

Also this was inconsistent. It worked sometimes but majority of times it didn't.

After so many research, I was able to fix this by changing this to preload='none'.

I hope this would help someone else out...

html 5 video is not auto playing on iphone

Diagnose:

One important thing to note is that "iDevices" doesn't support all the varieties of mp4. Here is a small list about MPEG-4 and H.264 supported varieties.
According to Apple official website, iPad or iPhone 4S is only compatible with H.264 or MPEG-4 video format with the following specifications:
• If it is H.264 video, it should meet: up to 1080p, 30 frames per second, High Profile level 4.1 with AAC-LC audio up to 160 Kbps, 48kHz, stereo audio in .m4v, .mp4, and .mov file formats;
• If it is MPEG-4 video, it should meet: up to 2.5 Mbps, 640 by 480 pixels, 30 frames per second, Simple Profile with AAC-LC audio up to 160 Kbps per channel, 48kHz, stereo audio in .m4v, .mp4, and .mov file formats;
But there are some forums saying that in fact, the iPad specifications are these:

iPad Supported Video Format:

H.264 video (up to 720p, 30 frames per second; main profile level 3.1 with AAC-LC audio up to 160 Kbps, 48kHz, stereo audio in .m4v, .mp4, and .mov file formats)
• MPEG-4 video, up to 2.5 Mbps, 640 by 480 pixels, 30 frames per second, Simple Profile with AAC-LC audio up to 160 Kbps, 48kHz, stereo audio in .m4v, .mp4, and .mov file formats.

Cause:

(Web Issue) - happens because the iPad/iPhone doesn't have an HTML5 player that works so well as it should yet.
1. (Local Issue) - happens for a completely different cause, which is the supported resolution of the mp4 videos on "iDevices".