5

I've been playing around with the HTML5 video tag and I'm puzzled as to how best to degrade when you can't support a codec?

For older browsers (or IE) that don't support the video tag at all this quite is straight forward:

<video width="320" height="240">
  <source src="vid.ogv" type='video/ogg'>
  <source src="vid.mp4" type='video/mp4'>
  <object>
  <!-- Embed Flash video here to play mp4 -->
  <object>
</video>

They will fall through and will receive the Flash version (or other alternate such as an image!)

How about when the browser does support the tag but not the codec - Like FireFox 3.5 for example - and I can't support OGG (possibly because I already have vast archives of H.264):

<video width="320" height="240">
  <source src="vid.mp4" type='video/mp4'>
  <object>
  <!-- Embed Flash video here to play mp4 -->
  <object>
</video>

All I get in FireFox 3.5 is a grey box with an x in it. This isn't exactly a great user experience for FireFox users! I can only think of using JavaScript to check for FF3.5 and change the DOM!! is this really the bad old all over again! ...or is there some part of the spec I'm missing out on like a 'novideo' tag?

1
  • To reiterate what was said in a comment at the bottom: Firefox will only fallback to flash video if an ogg source with a correct MIME type is specified.
    – BumbleB2na
    Commented Jul 15, 2011 at 17:30

3 Answers 3

4

An important part of graceful degradation is the querying capabilities... Dive into HTML5 is a great read... specifically, look at the video section. Relevant code here:

function supports_h264_baseline_video() {
  if (!supports_video()) { return false; }
  var v = document.createElement("video");
  return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}

Note: this does require DOM checking, but for capabilities and not browser signature. It's the right thing to do :-)

Once you know if the browser can support, you can show your video tag or pull up a lightbox or redirect as you see fit.

3
  • That's better than checking for browser signature for sure but it's still a little more javascript than I would have hoped from a new standard...
    – ad rees
    Commented Dec 15, 2009 at 12:04
  • Agreed, it's unfortunate. Since HTML has no branching concept, I see no way to avoid javascript here. Existing non-script approaches relied on layers of successive compatibility, but HTML5 Video fails at this because of the codec split, which would be crufty to bake "into" the language.
    – r00fus
    Commented Dec 15, 2009 at 17:26
  • 1
    Be aware that this does not work for Android, which doesn't support the canPlayType method correctly. Commented Mar 2, 2011 at 19:19
1

One really good way to tackle this problem is to use modernizer js library.Its really easy to use and quick.It can check HTML5 capabilities in the user's browser . Visit the site here : http://www.modernizr.com/

1
  • That would certainly be a great solution but my question is really about using markup in browsers that support HTML 5
    – ad rees
    Commented Mar 30, 2011 at 8:45
0

Video for Everybody's test page indicates that Firefox 3.5 can only play OGG. You might want to add a flash version if you really don't want to add OGG. VfE also does not use JavaScript, so it might be worth looking into.

1
  • 1
    VfE still requires a OGG version because Firefox won't default to the Flash version, or anything else for that matter, if you don't have an OGG for it.
    – ad rees
    Commented Oct 9, 2010 at 17:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.