title: HTML5 mp4 video working in Chrome and Desktop Safari but not iPhone
body: <p>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.</p>
  
  <pre><code>&lt;video width="680" height="383" controls&gt;
      &lt;source src="immunize-video-1/immunize_web_h.264.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt;
      &lt;source src="immunize-video-1/immunize_web_h.264.ogv" type='video/ogg; codecs="theora, vorbis"'&gt;
      [FLASH FALLBACK HERE]
  &lt;/video&gt;
  &lt;video width="680" height="383" controls&gt;
      &lt;source src="big-buck-bunny/big_buck_bunny.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt;
      &lt;source src="big-buck-bunny/big_buck_bunny.ogv" type='video/ogg; codecs="theora, vorbis"'&gt;
      [FLASH FALLBACK HERE]   
  &lt;/video&gt;
  </code></pre>
  
  <p>The results on a staging server:</p>
  
  <ul>
  <li>Chrome: OK</li>
  <li>Desktop Safari 5: OK (<a href="http://screencast.com/t/I142tezDph9U" rel="noreferrer">screenshot</a>)</li>
  <li>iPhone Safari: Top video does not play (screenshot below)
  <img src="https://i.stack.imgur.com/4BBaO.jpg" alt="enter image description here"></li>
  </ul>
  
  <p>What could cause this to work on desktop Safari but not on the iPhone? I tried a few variations on the <a href="http://wiki.whatwg.org/wiki/Video_type_parameters#Video_Codecs_3" rel="noreferrer">video type parameters</a> such as:</p>
  
  <pre><code>&lt;source src="immunize-video-1/immunize_web_h.264.mp4" type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'&gt;
  </code></pre>
  
  <p>Also tried leaving the codec attribute blank:</p>
  
  <pre><code>&lt;source src="immunize-video-1/immunize_web_h.264.mp4" type='video/mp4'&gt;
  </code></pre>
  
  <p>but none listed seemed to work for the iPhone. The video was exported at 3000 kb/s h.264.</p>
  
  <p>Also, the video causing problems is a 94MB file size.</p>