Video format or MIME type is not supported

Question

This is the relevant code to run video:

<video id="video" src="videos/clip.mp4" type='video/mp4' controls='controls'>
    Your brwoser doesn't seems to support video tag
</video> 

This code work fine separately, but when trying to fade it in:

function showVideoPlayer(){          
    console.log('video displayed');      
    $("#video").fadeIn('medium');
}

it doesn't seems to work and i got this:

As you can see: Video format or MIME type is not supported.

The video container is hidden in css:

#video{
    position:fixed;
    border:solid 1px #000000;
    width:654px;
    height:454px;
    background-color:#FFFFFF;
    left:23%;
    top:11%;
    display:none;
}

This is the idea, the video container is hidden (display:none), when needed, i call the function showVideoPlayer to show the video container. However that doesn't work and produce me this error in FireFox and a blank screen in Chrome and IE9.

Am i missing something? is the fadeIn function seems to get me wrong?

Answer 1

Firefox does not support the MPEG H.264 (mp4) format at this time, due to a philosophical disagreement with the closed-source nature of the format.

To play videos in all browsers without using plugins, you will need to host multiple copies of each video, in different formats. You will also need to use an alternate form of the video tag, as seen in the JSFiddle from @TimHayes above, reproduced below. Mozilla claims that only mp4 and WebM are necessary to ensure complete coverage of all major browsers, but you may wish to consult the Video Formats and Browser Support heading on W3C's HTML5 Video page to see which browser supports what formats.

Additionally, it's worth checking out the HTML5 Video page on Wikipedia for a basic comparison of the major file formats.

Below is the appropriate video tag (you will need to re-encode your video in WebM or OGG formats as well as your existing mp4):

<video id="video" controls='controls'>
  <source src="videos/clip.mp4" type="video/mp4"/>
  <source src="videos/clip.webm" type="video/webm"/>
  <source src="videos/clip.ogv" type="video/ogg"/>
  Your browser doesn't seem to support the video tag.
</video>

Updated Nov. 8, 2013

Network infrastructure giant Cisco has announced plans to open-source an implementation of the H.264 codec, removing the licensing fees that have so far proved a barrier to use by Mozilla. Without getting too deep into the politics of it (see following link for that) this will allow Firefox to support H.264 starting in "early 2014". However, as noted in that link, this still comes with a caveat. The H.264 codec is merely for video, and in the MPEG-4 container it is most commonly paired with the closed-source AAC audio codec. Because of this, playback of H.264 video will work, but audio will depend on whether the end-user has the AAC codec already present on their machine.

The long and short of this is that progress is being made, but you still can't avoid using multiple encodings without using a plugin.