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?
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.
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.
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.
wmv" video files are not supported by any browser. That is the only way for WMV video files.
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.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With