title: HTML 5 Video Playback not working on iPhone (Chrome and Safari)
body: <p>I'm trying to implement basic HTML5 playback for video on a simple webpage I'm building.</p>
  
  <p>Really, no fancy stuff. Not even the example is working.</p>
  
  <pre><code>&lt;link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet"&gt;
  &lt;script src="//vjs.zencdn.net/5.4.6/video.min.js"&gt;&lt;/script&gt;
  &lt;script src="//vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"&gt;&lt;/script&gt;
  
  &lt;video id="example_video_1" class="video-js vjs-default-skin"
    controls preload="auto" width="640" height="264"
    poster="http://video-js.zencoder.com/oceans-clip.png"
    data-setup='{"example_option":true}'&gt;
   &lt;source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" /&gt;
   &lt;source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" /&gt;
   &lt;source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" /&gt;
   &lt;p class="vjs-no-js"&gt;To view this video please enable JavaScript, and consider upgrading to a web browser that &lt;a href="http://videojs.com/html5-video-support/" target="_blank"&gt;supports HTML5 video&lt;/a&gt;&lt;/p&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>I get the following error:
  <code>The media could not be loaded, either because the server or network failed or because the format is not supported</code>
  Am I missing something with regards to IOS and HTML5 Video playback?</p>
  
  <p><strong>======= UPDATE A)</strong></p>
  
  <p>After running some more tests. I've discovered the following:</p>
  
  <ol>
  <li>It doesn't work on iPhone at all (Chrome and Safari)</li>
  <li>It doesn't work on Macbook Safari but does on Firefox</li>
  </ol>
  
  <p><strong>======= UPDATE B)</strong></p>
  
  <p>After some more tests and diving a bit more into Apple's video encoding guidelines and requirements, I have discovered the following:</p>
  
  <p>This video works: <code>&lt;source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" /&gt;</code></p>
  
  <p>This one does not: <code>&lt;source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'&gt;</code></p>
  
  <p>Since they're both detached from my local server I can only conclude that it is one of 2 things:</p>
  
  <ol>
  <li>A Header Issue</li>
  <li>An encoding Issue</li>
  </ol>
  
  <p>I can't fetch the encoding details for: <code>http://video-js.zencoder.com/oceans-clip.mp4</code> because it seems like they're forbidding headless requests (neither wget nor ffmpeg -i are allowed to connect).</p>
  
  <p>However I did re-encode an existing mp4 video using the following <code>ffmpeg</code> configuration: <code>fmpeg -i input.mp4 -vcodec libx264 -profile:v main -level 3.1 -preset medium -crf 23 -x264-params ref=4 -acodec copy -movflags +faststart ouput.mp4</code></p>
  
  <p>No luck. <code>ffmpeg -i</code> does reveal the encoder to be <code>h264</code> on <code>output.mp4</code> but the video still refuses to play on iOS devices.</p>
  
  <p><strong>======= UPDATE C)</strong></p>
  
  <p>After changing the video codec scaling the video and adjusting the bitrate to apple's requirements: <code>ffmpeg -i input.mp4 -vcodec libx264 -profile:v main -level 3.0 -preset medium -crf 23 -x264-params ref=4 -acodec copy -vf scale=640x480 -maxrate 900k -bufsize 900k -movflags +faststart output.mp4</code> ... and after writing a range request streaming script adding the <code>Accept-Ranges</code> (Apparently a requirement for apple see: <a href="https://stackoverflow.com/questions/3397241/does-iphone-ipad-safari-require-accept-ranges-header-for-video">this</a>) header, which works brilliantly, here's the curl output for: <code>curl --range 0-50 http://localhost:8000/video/5a2fd7b4e13823117a1b3ea4 -o /dev/null</code></p>
  
  <pre><code>curl --range 0-50 http://localhost:8000/video/5a2fd7b4e13823117a1b3ea4 -o /dev/null
    % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                   Dload  Upload   Total   Spent    Left  Speed
    0 7871k    0    51    0     0     51      0 43:54:14 --:--:-- 43:54:14   237
  curl: (18) transfer closed with 8060705 bytes remaining to read
  </code></pre>
  
  <p>... and after bashing my head about 400 times against the wall in desperate attempt to alleviate the pain (to no avail), I'm about 99.5% sure that it's some weird apple certification / video formatting issue.</p>