HTML5 Video – Another Take
As I’ve been getting more and more into HTML5 and thereby also native video, I’ve come to realize that it’s a lot easier said than done. Of course, we all know about the need for multiple encodings in order to provide for the variety of browsers that proliferate the market. But even after encoding H.264, Ogg and WebM, we’re still left with the need to provide a fallback for our Internet Explorer 6, 7 and 8 users – which means using Flash.
There are several approaches to provide this fallback, but the “recommended” way to do this is as follows. We begin with the <video> element, and then a list of <source> elements providing the multiple encodings. Of course, you have to remember to list the MP4 file first, because iDevices are so damned arrogant that they won’t look further if they don’t see their desired format first. Not that Firefox is much better — if you don’t provide an ogg-encoded video, Firefox won’t fall back to the Flash video. Which, of course means you must encode your video in two formats (at least for now, as we wait to see the impact/support for WebM). Finally, you need the <object> element for Flash which loads and plays the H.264 video in a SWF wrapper.
<video height="270" width="340" controls> <source src="assets/video/odysseyAdv.mp4" type="video/mp4" /> <source src="assets/video/odysseyAdv.ogg" type="video/ogg"/> <object id="FlashID2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="340" height="270"> <param name="movie" value="assets/video/videoPlayer.swf"> <!-- other parameters intentionally omitted --> </object> </video>
This got me to thinking… there’s got to be an easier way to deliver video to everyone – especially given that I don’t (currently) have any way to encode ogg or webm video from within Creative Suite 5. Since we are already encoding video into H.264 for consumption in Flash, couldn’t we just stop there? With the penetration of Flash at over 96% on desktop computers, Flash is the predominent video delivery vehicle on the desktop web. On mobile, Flash is already available both in the browser, as well as via AIR, on Android devices and will soon be available on other smartphone platforms like RIM, Palm, Nokia – so delivering via Flash is viable. So it’s only the iDevices that seem to be a problem – but the solution is so simple it’s almost laughable that we haven’t thought of it before.
For years we have “sniffed” for the presence of the proper Flash Player version on the desktop, and provided the opportunity to do an express install to update to the most current version. And for visitors without the Flash player, we’ve even provided alternate content such as the Flash Player badge and verbiage to suggest that the visitor install Flash. Hello, solution!
Instead of burying the Flash version of the video in the <video> element as a fallback for Internet Explorer 8 and below, we can provide Flash as the first option, and fall back to the native <video> element for iDevices.
<object id="FlashID2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="340" height="270"> <param name="movie" value="assets/video/videoPlayer.swf"> <!-- other parameters intentionally omitted --> <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. --> <div> <h4>You must be on an iDevice, because you are seeing native HTML5 video — everyone else sees the video in the Flash Player!</h4> <video height="270" width="340" controls> <source src="assets/video/odysseyAdv.mp4" type="video/mp4" /> <source src="assets/video/odysseyAdv.ogg" type="video/ogg"/> </video> </div> </object>
You can see that I’ve simply put the <video> element in the place provided for alternate content. And, if you want, you can still provide all three video formats (mp4, ogg, webm) in case someone on Firefox has a Flash blocker turned on, for example. But if you only want to encode once as H.264, this solution is so simple, you’re probably kicking yourself as hard as I was when I “discovered” it.
Don’t believe me? Here’s an example that shows the native video with Flash fallback and there’s also a link to the Flash with native video fallback. And if you have any problems with these examples, definitely let me know!
October 11th, 2010 at 1:19 pm
Sounds practical, and does put the iPad cart after the horse. Some people who evangelize VIDEO will likely be offended that it’s not the outermost tag, but that’s their issue.
(The example doesn’t include the EMBED tag. Last I heard some of the non-Microsoft browsers were still wonky when invoking a plugin via OBJECT… wmode issues, screenreader issues, JavaScript/Flash communication, that kind of thing. Do you know of a good current piece of testing on doing away with EMBED….?)
tx, jd/adobe
October 11th, 2010 at 4:02 pm
Well put. Thanks for this! It’s such a shame all of this work has to be done to display video, I can’t wait until there is one standard across mobile and web. But until then, ill have a nice career as a compressionist…
October 11th, 2010 at 4:21 pm
I like this idea as it support the most popular requirement first. It would be great to see some more CSS3 tips as well. I’m always learning from your posts, thats learned pepe.
October 12th, 2010 at 11:46 pm
[...] – Adobe Evangelist TV – Assorted Garbage (voice in video) This entry was posted in HTML5. Bookmark the permalink. ← Adobe Air One App [...]
October 13th, 2010 at 10:03 am
Nice article, but IMHO the way that Lee Brimelow used the VIDEO tag with SWFObject is the cleanest way to do this.
http://www.gotoandlearn.com
October 13th, 2010 at 10:33 am
If all you’re doing is just delivering video, sure. But the real power of the native video element lies in its keyboard accessibility (as there are still major issues with tabbing in/out of a Flash movie in certain browsers), playing nice with the rest of the page (being stylable like any other HTML element, including layering and changing its opacity etc) and the powerful and simple APIs.
October 13th, 2010 at 11:02 am
Very well done. True HTML5 apologists would cry about how this isn’t best practice, etc, yadda yadda yadda.
I don’t understand why anyone would focus on the iDevices first, when they are the vast minority in content share. I say, always go for the biggest audience first, then use other tools for fallback.
October 13th, 2010 at 2:25 pm
John, as far as I know, we no longer need the as we’ve been using swfobject to insert the swf as I show it for years. Let me know if you know of it being required in some scenario.
October 13th, 2010 at 2:26 pm
If I could ever get off the road for a bit, I might be able to catch up on the backlog of tips that I’d like to write!
October 13th, 2010 at 2:42 pm
Agree – there are numerous ways to provide the functionality. My point is simply that we don’t “need” to encode three times and/or we can deliver Flash first, thereby allowing the widest audience to experience that optimum video/quality/experience/bandwidth-optimized content.
October 14th, 2010 at 12:48 pm
Hi, thanx for the article.
i have a question about subtitle,
can i add subtitle the video with html5 player?
December 12th, 2011 at 12:43 pm
[...] – Adobe Evangelist TV – Assorted Garbage (voice in video) This entry was posted in Uncategorized. Bookmark the permalink. ← CSS3 Hover Text [...]