Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 Video and degradation?

Tags:

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?

like image 486
ad rees Avatar asked Dec 14 '09 21:12

ad rees


People also ask

Why video is not playing in HTML5?

What is HTML5 Video “File not Found” Error? If you encountered “HTML5 video not found” error while playing a video on any website then it implies your browser doesn't support the HTML5 format codecs or your browser doesn't have the proper video codec installed.

How does HTML5 video work?

HTML5 video works by allowing the person uploading the video to embed it directly into a web page. It works in a variety of internet browsers, including Internet Explorer 9+, Firefox, Opera, Chrome and Safari. Unfortunately, the technology is not compatible with Internet Explorer 8 and earlier versions.

Can we play video in HTML5?

With the introduction of HTML5, you can now place videos directly into the page itself. This makes it possible to have videos play on pages that are designed for mobile devices, as plugins like Adobe Flash Player don't work on Android or iOS. The HTML <video> element is used to embed video in web documents.

Which video format is not allowed by HTML?

wmv" video files are not supported by any browser. That is the only way for WMV video files.


2 Answers

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.

like image 167
r00fus Avatar answered Nov 10 '22 00:11

r00fus


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/

like image 37
Jaseem Avatar answered Nov 10 '22 00:11

Jaseem