title: Converting Video Uploads for HTML5 in Chrome
body: <p>I am creating a CMS where users can upload videos for display on pages.</p>
  
  <p>When a video is uploaded, I create a background task (using <a href="http://hangfire.io/" rel="nofollow noreferrer">Hangfire</a>) to convert the video into MP4, OGV and WEBM.</p>
  
  <p>I am running the latest versions of Firefox and Chrome on my development machine.  According to <a href="https://en.wikipedia.org/wiki/HTML5_video" rel="nofollow noreferrer">Wikipedia</a>, these browsers should fully support H.264 (MP4), Theora (OGG) and VP8/VP9 (WEBM).</p>
  
  <p>Everything seems to work as expected in Firefox and locally using VLC Media Player.  However, with Chrome, when I try to convert an existing video (which is an MP4 with H.264 Video and MPEG-2/4 Audio) into the three required formats for HTML5 video, I am getting dramatically different results.</p>
  
  <h2>Libraries</h2>
  
  <p>Using <a href="https://github.com/AydinAdn/MediaToolkit" rel="nofollow noreferrer">MediaToolkit</a> and <a href="https://www.nrecosite.com/video_converter_net.aspx" rel="nofollow noreferrer">NReco.VideoConverter</a>, the resulting MP4 and OGG/OGV file is not playable in Chrome (Although WEBM is working).  This is my implementation:</p>
  
  <pre><code>// MediaToolkit
  using (var engine = new Engine())
  {
      engine.Convert(new MediaFile("C:\SourceFile.mp4"), new MediaFile("C:\DestinationFile.mp4"));
  }
  // NReco.VideoConverter
  var ffMpeg = new NReco.VideoConverter.FFMpegConverter();
  ffMpeg.ConvertMedia("C:\SourceFile.mp4", "C:\DestinationFile.mp4", Format.mp4);
  </code></pre>
  
  <p>The resulting mp4 does not work in Chrome despite seeming to have the same codec.  Here are the details of the original and converted files:</p>
  
  <h3>Working Original Upload</h3>
  
  VIDEO
  
  <ul>
  <li>Codec: H.264/AVC</li>
  <li>Bitrate: 3954 kbps</li>
  <li>Frame Size: 1920 x 1080 pixels</li>
  <li><p>Frame Rate: 29.97 fps</p>
  
  AUDIO</li>
  <li><p>Codec: MPEG-2/4 Audio</p></li>
  <li>Sample Rate: 44100 Hz 16 bit</li>
  <li>Sample Size: 16 bit</li>
  <li>Bitrate: 125.82 kbps</li>
  <li>Channels: 2</li>
  </ul>
  
  <h3>Non-Working Video after Conversion</h3>
  
  VIDEO
  
  <ul>
  <li>Codec: H.264/AVC</li>
  <li>Frame Size: 1920 x 1080 pixels</li>
  <li>Frame Rate: 29.97 fps</li>
  <li>Bitrate: 1909 kbps</li>
  </ul>
  
  AUDIO
  
  <ul>
  <li>Codec: MPEG-2/4 Audio</li>
  <li>Sample Rate: 44100 Hz</li>
  <li>Sample Size: 16 bit</li>
  <li>Bitrate: 124.81 kbps</li>
  <li>Channels: 2</li>
  </ul>
  
  <p>As you can see, the input and output files appear to be identical.  However, the output simply does not work in Chrome.</p>
  
  <h2>Online Converters</h2>
  
  <ul>
  <li>When I try <a href="https://cloudconvert.com/mp4-to-mp4" rel="nofollow noreferrer">CloudConvert</a>, the resulting MP4 does not work.</li>
  <li>When I try <a href="http://converterpoint.com/" rel="nofollow noreferrer">Converter Point</a>, the MP4 and WEBM works but the OGV does not.</li>
  <li>When I try <a href="http://www.online-convert.com/" rel="nofollow noreferrer">Online Convert</a>, the MP4 and WEBM works but the OGV does not.</li>
  </ul>
  
  <p>Why is this process so difficult? Am I missing an easy solution?</p>