title: How to play mp4 video file with HTML5 video tag on iOS (iPhone and iPad)?
body: <p>I want to display HTML5 video to my users using the video tag. For Firefox, Chrome and Opera WEBM works as expected. In Safari on Windows and Mac my MP4 version works, too. The only problem I'm experiencing is, that it won't play on iPad and iPhone (Safari of course).</p>
  
  <h1>Create video</h1>
  
  <p>The MP4 (h.264 + acc-lc) is converted like this (with profile: baseline and level 3.0 for maximum compatibility with iOS):</p>
  
  <ul>
  <li>Stream #0:0(eng): Video: <strong>h264</strong> (Constrained Baseline) (avc1 / 0x31637661), yuv420p, 640x352, 198 kb/s, 17 fps, 17 tbr, 17408 tbn, 34 tbc (default)</li>
  <li>Stream #0:1(eng): Audio: <strong>aac (LC)</strong> (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 56 kb/s (default)</li>
  </ul>
  
  <p><strong>Edit:</strong> Whole ffprobe output (slight changes in bitrate etc. to the above mentioned):</p>
  
  <pre><code>Metadata:
  major_brand     : isom
  minor_version   : 512
  compatible_brands: isomiso2avc1mp41
  encoder         : Lavf56.30.100
  Duration: 00:01:00.05, start: 0.046440, bitrate: 289 kb/s
  Stream #0:0(eng): Video: h264 (Constrained Baseline) 
  (avc1 /0x31637661), yuv420p, 640x352, 198 kb/s, 25 fps, 25 tbr, 
  12800 tbn, 50 tbc (default)
  Metadata:
    handler_name    : VideoHandler
  Stream #0:1(eng): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, 
  stereo, fltp, 85 kb/s (default)
  Metadata:
    handler_name    : SoundHandler
  </code></pre>
  
  <p>I found various requirements for iOS devices like <a href="https://stackoverflow.com/a/10401529/4800067">this</a> and <a href="https://stackoverflow.com/a/13402284/4800067">this</a>, also <a href="https://stackoverflow.com/a/27681656/4800067">someone</a> mentioned to add the yuv420p pixel format when converting.</p>
  
  <p>In fact the <strong>ffmpeg cmd</strong> looks like this:</p>
  
  <pre><code>ffmpeg -i __inputfile__ -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3.0 -b:v 200K -r 17 -bt 800K -c:a libfdk_aac -b:a 85k -ar 44100 -y __outputfile_lowversion__.mp4
  </code></pre>
  
  <h1>Display video</h1>
  
  <p>With Modernizr I detect which format is "supported" and add it to the <code>src</code> or the <code>video</code> tag. Last thing is adding the right MIME type. For mp4 I add <code>type="video/mp4"</code>. The full code for the <code>video</code> tag is:</p>
  
  <pre><code>&lt;video class="p-video" preload="auto" autoplay="" type="video/mp4" src="http://full.url/to/video_low.mp4"/&gt;
  </code></pre>
  
  <p>I tried various ways: own implementation with own interface, controls and stuff from browser vendors and video.js just to check whether i'm too studip for this. All work in the environments listed above except for iPhone and iPad.</p>
  
  <p>I read this article on <a href="http://diveintohtml5.info/video.html" rel="nofollow noreferrer">Video on the web</a>, especially <a href="http://diveintohtml5.info/video.html#ios" rel="nofollow noreferrer">this part</a> and only serve the "right" file with the "right" type without a <code>poster</code>attribute set.</p>
  
  <p>My Apache has</p>
  
  <pre><code>AddType video/mp4                      mp4 m4v f4v f4p
  AddType video/ogg                      ogv
  AddType video/webm                     webm
  </code></pre>
  
  <p>And byte-ranges are enabled. This is needed to get partial content from the server.</p>
  
  <p>Has anyone a clue what's going on there? Thanks in advance!</p>
  
  <p><strong>Edit:</strong> Safari and Chrome both throw <code>MEDIA_ERR_SRC_NOT_SUPPORTED</code> Error on iPad. There must be an issue with the encoding.</p>