HTML5 mp4 video working in Chrome and Desktop Safari but not iPhone

Question

I am trying to simply play an HTML5 video which will be compatible with all common browsers (including mobile devices). For now, I am testing with one custom video and a sample video.

<video width="680" height="383" controls>
    <source src="immunize-video-1/immunize_web_h.264.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="immunize-video-1/immunize_web_h.264.ogv" type='video/ogg; codecs="theora, vorbis"'>
    [FLASH FALLBACK HERE]
</video>
<video width="680" height="383" controls>
    <source src="big-buck-bunny/big_buck_bunny.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="big-buck-bunny/big_buck_bunny.ogv" type='video/ogg; codecs="theora, vorbis"'>
    [FLASH FALLBACK HERE]   
</video>

The results on a staging server:

• Chrome: OK
• Desktop Safari 5: OK (screenshot)
• iPhone Safari: Top video does not play (screenshot below)

What could cause this to work on desktop Safari but not on the iPhone? I tried a few variations on the video type parameters such as:

<source src="immunize-video-1/immunize_web_h.264.mp4" type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>

Also tried leaving the codec attribute blank:

<source src="immunize-video-1/immunize_web_h.264.mp4" type='video/mp4'>

but none listed seemed to work for the iPhone. The video was exported at 3000 kb/s h.264.

Also, the video causing problems is a 94MB file size.

Answer 1

iOs doesn't support all the profiles that h.264 provides. You have to encode your h264 with a baseline profile only in order for it to be playable on iphone/ipad.