As you probably already know, I've previously posted about html5-based fallback solutions for Soundcloud's, Mixcloud's and Google's Flash-based embedded players - i.e.: if the flash-plugin isn't supported by the browser (read: "i-Whatevers and other mobile devices"), the html5 audio-tag would (sort of speak) step in instead.
html5media does actually the opposite, and will normally only use a Flash-based fallback, if and when a browser cannot use a native, HTML5-based player (a.k.a.: a fallforward solution).
But why is Dave Hall's htm5media-solution intereseting then?
Well apart from it's easy to implement (which will revealed shortly), unfortunately there are still a number of older browsers being still used out there (such as IE7 and IE8), which don't support html5 video- and audio-tags!
And just to make things even more tricky, virtually all of the (more) modern browsers don't support a consistent set of audio and video-codecs, thus making embedding audio and/or video somewhat difficult, if one whats things to work for any user that graces one's site with a visit.
So if one wants to make html5 video- and audio-tags work in all major browsers, Dave Hall's html5media is solution worth considering, as all it takes is just a single line of code to make HTML5 video and audio tags to work. And if one's browser doesn't either support html5-tags or the used media file's codecs, it'll then revert to a Flash-based player insted!
Getting things to work by using html5media is simply done by adding the following line of code somewhere in the
<head> of your document - and preferably just before the closing </head>-tag:<html>
<head>
<title>My Website</title><script src="http://api.html5media.info/1.1.5/html5media.min.js"></script> </head> <body> - - -...and that's it!
If you're (audio-wise) using mp3's and/or (video-wise) using H-264 encoded mp4's for your website, then you won't experience html5media kick in, if you view your website with IE-9, Safari or Google Chrome; the media-files will be played by these browsers' native, html5-player!
However, if you're using Firefox, IE-7 or -8, or Opera, then you will experience html5media work in full-effect, and play your mp3- and/or mp4-files using a Flash-based player (actually: a Flash-based solution from FlowPlayer)
Firefox-, IE-7 -, IE-8 - or Opera-users can see html5media work by clicking on the screen-shot below:
"O.K., so this all seems pretty cool, but are there any drawbacks or pitfalls in using html5media?", you might ask, and the answer is: "Yeah - sorta..."; just like the Yahoo! Web Player, which I previously posted about, html5media relies on javascript to work!
And again: according to the latest stats from http://riastats.com/, almost 37% of the World's Internet population could be considered as either not having Javascript enabled - or flat out do not have it installed; which in turn means that html5media will NOT work for these users out there!
And again: Something worth keeping in mind, IMHO...)
Otherwise, if you're already using/coding in html5 and do not want to save and upload your media-files in various formats (for example: mpeg AND ogg) to ensure all of your bases are covered regarding having your files played in any of the newer browsers out there - and/or you want all of the IE-7/IE-8-users to hear/see your embedded media-content, then html5media is a viable solution to take into consideration.
On an end-note: yes, I'm well-aware that there is an similar (javascript-based) solution out there by John Dyer, called mediaelement.js, which more or less does the same thing and works equally fine!
"Unfortunately" though, one has to download all - and host yourself - of the necessary files in the mediaelements.js-package to get it to work; a factor which might not appealing for blogspot-users, for example!
But before anyone gets the notion that I'm poo-poo'ing mediaelements.js in this blog-post (which is NOT the case), I'd like to add that mediaelements.js also boasts of having plugins for Wordpress, Drupal, Joomla, jQuery, and BlogEngine.NET, ruby gem, plone, which be of some interest for some of you readers out there that have your own hosting-opportunities and are already using one of these solutions/platforms already!
For the rest of you, try and give html5media a shot...
Thanks for reading this...
d.
Nice post. It would be even better if this site featured stand demos of these features so that users can get a clean look at the code. Please add a demo section containing a working implementation plus an explanation of the code.Buying and taking that plugin of html5 media player and integrating it into WP is really good for beginers
ReplyDeleteI prefer your version :)html5 video player
ReplyDelete