5

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) enter image description here

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.

Mike Eng
  • 1,501
  • 4
  • 31
  • 49

2 Answers2

5

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.

Variant
  • 16,901
  • 4
  • 38
  • 65
2

Please try to use QuickTime Player to export the video optimized for iPhone, check out this blog post http://www.treysmithblog.com/how-to-make-html5-videos-for-iphone-and-ipad/

Michael Wang
  • 8,763
  • 1
  • 18
  • 17