MP4 not playing on Chrome version 27.0

Question

The latest version of Chrome (Version 27.0.1453.110 m) as of 5 June 2013 does not play mp4 videos. For an example W3Schools Video Sandbox gives me video controls and nothing else. (Sorry can't post a screen shot, just signed up to StackO.)

Anyone know why?? and a fix?

Yes:

There is an answered question like this

chrome could play html5 mp4 video but html5test said chrome did not support mp4 video codec

and

There is an unanswered question like this:

html5 video issue with chrome

Answer 1

After running into the same issue - here're some of my thoughts:

• due to Chrome removing support for h264, on some machines, mp4 videos encoded with it will either not work (throwing an Parser error when viewing under Firebug/Network tab - consistent with issue submitted here), or crash the browser, depending upon the encoding settings
• it isn't consistent - it entirely depends upon the codecs installed on the computer - while I didn't encounter this issue on my machine, we did have one in the office where the issue occurred (and thus we used this one for testing)
• it might to do with Quicktime / divX settings (the machine in question had an older version of Quicktime than my native one - we didn't want to loose our testing pc though, so we didn't update it).

As it affects only Chrome (other browsers work fine with VideoForEverybody solution) the solution I've used is:

• for every mp4 file, create a Theora encoded mp4 file (example.mp4 -> example_c.mp4)

• apply following js:

  if (window.chrome)
      $("[type=video\\\/mp4]").each(function()
      {
          $(this).attr('src', $(this).attr('src').replace(".mp4", "_c.mp4"));
      });
  

Unfortunately it's a bad Chrome hack, but hey, at least it works.

Answer 2

I have had the same problem, Even though I didn't get any answer, I tried to solve it in another way, here is what I did:

First, embed the video in your html:

<video id="videoId" width="100%" autoplay loop>
  <source src="main.webm" type="video/webm">
  <source src="main.mp4" type="video/mp4">

Your browser does not support the video tag.
</video>

Then detect if the Browser is chrome:

var isChrome = !!window.chrome; 
var isIE = /*@cc_on!@*/false;

If its chrome, replace the video with webm version. (For those who haven't faced the problem themselves: if you embed both mp4 and webm , chrome will not play any of them, so you have to embed "webm" only)

if( isChrome ) {
$("#videoId").replaceWith($('<video id="videoId" width="100%" autoplay loop><source src="video.webm" type="video/webm"></video>'));
}

And as for IE: In my case I replaced the html5 video with an image:

if( isIE ) {
$("#videoId").replaceWith($('<img id="videoId" src="img/video.jpg" />'));
}