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