H.264 encoded MP4 presented in HTML5 plays on Safari but not iOS devices

ipad html ios mp4 h.264
Tom picture Tom · Nov 21, 2010 · Viewed 30.5k times · Source

I'm using Adobe Media Encoder CS5 to encode a FLV file to H.264 to present on the web via HTML5 and the video file plays just fine in Safari in OS X (and in Firefox encoded to OGG) but on any iOS device (iPad, iPhone) I get the play icon with the slash running through it.

Has anyone encountered this before and if so, any ideas as to why?

Thanks.

Answer

BishopZ picture BishopZ · Nov 15, 2012

We had this problem and found that encoding the files in accordance with iPhone's webview's standards created files that played fine.

Not all H.264 encoded Mp4 files are supported by iPhone (or Chrome for that matter) and slight differences in the encoding process can produce videos that do not work. Even if the EXACT same encoding settings were used, H.264 is a variable bit-rate encoder, so different videos may exceed bitrate limits, causing some to work and other not.

The encoding settings that were successful for us were:

  • Only use the H.264 Baseline Profile Level 3.0
  • Resolution below 640 x 480 and framerate up to 30 fps
  • B frames are not supported in the Baseline profile.
  • bitrate limit of 900kb.

Here is the reference we used to arrive at those settings.

Related questions

iPad Safari scrolling causes HTML elements to disappear and reappear with a delay

I'm currently developing a web app using html5 and jQuery for iPad Safari. I'm running into a problem wherein large scroll areas cause the elements that are offscreen to appear after a delay when I scroll down to them. What …

Read More
image map not working on iOS devices, with large images that get rescaled by the device

I'm developing an internal web app on our company intranet using PHP. One section of the app displays a couple of high resolution images to the user. These images are in the region of 5000x3500 pixels. Each image has an …

Read More
How do I detect if the HTML5 autoplay attribute is supported?

How do I best detect whether a browser's HTML5 video element supports autoplay? On current iOS Safari, for example, autoplay is disabled. Update: I now designed the web page in such a way that it works irrespective of whether autoplay …

Read More