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

Question

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

Answer 1

I know this has a marked answer, but we had the exact same issue.

The problem ended up being a setting on our internal network.

After turning on the safari console on the iPad, we saw that when trying to load the video we were getting a "byte_range_error_message" being logged. It seems the mobile devices request this content differently than desktop devices, by requesting certain bytes at a time. We managed to find out that the video played fine when the phones used their 3G networks, but not when they loaded the video through the internal wifi. A lot of research later led us to this MSDN article: http://support.microsoft.com/kb/922330

Which explained how to find the setting in our firewall to allow the devices to request the video properly. We also found a similar setting on one of our D-Link routers for a separate wifi network that was also having the problem.

Answer 2

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.