html5 video tag -quality of video different in firefox and chrome

Question

I have the following code:

  <div class="span4">

  <video poster="assets/img/poster.jpg" controls="controls" width="420" height="420">
    <source src="assets/videos/152638831.webm" type="video/webm"  />
    <source src="assets/videos/152638831.mp4" type="video/mp4"  />
  </video>

</div>   

The video works in both Firefox and chrome, but in Chrome, it's very very grainy. I don't think it's an issue with my video because when I navigate to http://www.w3schools.com/html/html5_video.asp using Chrome, the video under the section called "DOM Methods and Properties" also appears grainy. When i say grainy, I mean, I see yellow, green, blue and red lines / dashes spattered across the video.

Can you tell me what I'm doing wrong?

Also, is the idea behind having multiple source tags that depending on the browser, it will select which file to play? In my case, I know firefox doesn't support mp4... I tested it. but the above code works in firefox. So I'm assuming it's playing the webm version of the file. Is this correct?

Thanks.

Answer 1

First of all, Chrome should be able to read the mp4 so perhaps you didn't use h264 compression. You should check on that.

Second, you must include compressed ogv, and webm versions of the video. Each browser supports a different video format at the moment so we have to include them all so that no one gets left out.

Here is a handy chart for browser video format support : http://www.longtailvideo.com/html5/#media_formats

Don't forget the flash fall-back either, just incase someone with a dinosaur browser that doesn't support the html5 video tag needs to see the video too.

Here is a handy chart for video tag support : http://caniuse.com/video

Let us know how you get on.