title: mp4 video on Android
body: <p>I wanted to convert some old Flash videos to 1 video format so the content will show on a mobile phone.  I got some mp4 and it doesn't work on Android, specifically Chrome 32 running on Android 4.3.  </p>
  
  <p><a href="http://jsfiddle.net/magister/7m7bE/" rel="nofollow">Click this link to a fiddle</a> </p>
  
  <p>It is loading the mp4 file on Chrome 32 on Android 4.3, but I thought there is no support for H.256</p>
  
  <p>Then I went to a this site <a href="http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5/" rel="nofollow">http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5/</a></p>
  
  <p>and the mp4 video there works on Android/Chrome.</p>
  
  <p>I used VLC to check the codecs and they look the same </p>
  
  <pre><code>H264 - MPEG-4 AVC (part 10) (avc1)
  Resolution: is different (working one is 560x320
  Resolution: mp4 not working is 640x480
  Framerate: working is 30, not working is 12
  Decoded format: Planar4:2:0 YUV
  </code></pre>
  
  <p>I then searched the codec then with ffmpeg and I see that
  there is a property called 
      compatible_brands: mp42icomavc1</p>
  
  <p>which is different than the non-working mp4 which has this property set to 
      compatible:  mp42mp41</p>
  
  <p>The file sizes are quite different as well. Could this be an issue. </p>
  
  <p>When I load <a href="http://html5test.com" rel="nofollow">http://html5test.com</a> the Chrome on Android browser says MPEG-4 is not supported by H.264 is.  it doesn't say anything about the container. </p>
  
  <p>ok here is some source code, I thought chrome on android doesn't support mp4 files, but when I load the following on Chrome 32 running on Sony Xperia Tablet running Android 4.3.  I had an mp4 file that I converted to webm, but chrome still could not run it.  It is 8 MB so perhaps the size is an issue....this mp4 has a different size and frameframe.  Other than that I only see compatible version different as mentioned above.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h4&gt;This is mp4 video&lt;/h4&gt;
      &lt;video id="small" controls="controls" autoplay="autoplay" preload="auto" name="small"&gt;
          &lt;source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"&gt;
      &lt;/video&gt;
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>