POC : Implementing HTML 5 Video Element using JavaScript and Flash
Since the first leg of the European on AIR Tour wrapped up, I have had some time to take some time and research / play around with some new technologies. In particular, I have been looking into the HTML 5 draft spec, as well as some of the work that Google has been doing with Google Gears.
One thing I have been watching closely around the HTML 5 draft is the implementation of the VIDEO element / tag. This is basically a tag that would allow browsers to implement video support. However, at least based on the current draft, there is no requirement that browsers support the same codecs. From the spec:
It would be helpful for interoperability if all browsers could support the same codecs. However, there are no known codecs that satisfy all the current players: we need a codec that is known to not require per-unit or per-distributor licensing, that is compatible with the open source development model, that is of sufficient quality as to be usable, and that is not an additional submarine patent risk for large companies. This is an ongoing issue and this section will be updated once more information is available.
Which in part means that developers may have to encode the video in different formats depending on which browsers they wanted to support.
I have also been following some of the work that Google is doing around Google Gears, and have been particularly interested in some of their talk about how they aim to implement parts of HTML 5 within Google Gears. By doing so, they can implement features quicker, and can ensure that they work consistently across browsers.
Putting these two things together, gave me the idea of seeing if it would be feasible to implement the HTML 5 video tag using JavaScript and Flash in order to provide an implementation that worked consistently across browsers.
I have put together a simple proof of concept that shows that this should be possible.
Here is the markup used to display the video:
<script type="text/javascript" src="swfobject/src/swfobject.js"></script>
<script type="text/javascript" src="html5_video.js"></script>
<video
src="http://onair.adobe.com.edgesuite.net/onair/raulph_hauwert_papervision3d.flv"
controls
poster="testpattern.png"
autoplay="true"
width="640"
height="360"
playcount="500">
</video>
You can see the JavaScript code for this here.
Basically, this parses out VIDEO element / tag and its attributes, and replaces it with the appropriate OBJECT or EMBED element to display a Flash video player that loads the specified video. It has support for playing back both h264 content and FLVs.
It uses the SWFObject JavaScript library to display the Flash content.
Currently the following VIDEO attributes are implemented:
- controls
- poster
- autoplay
- width
- height
- playcount
The tricky part will be cleanly implementing the VIDEO DOM scripting API, although I believe that that should also be possible.
Again, this is just a proof of concept, and regardless of what is done with the VIDEO element in the HTML 5 draft, it shows how SWFObject could be extended to make it even easier to deploy Flash content (by using HTML markup).
[...] From Mike Chambers blog post on the topic: [...]
HTML 5 Video Element Is A Bad Joke
27 May 08 at 4:55 pm
I find it strange that they’re drafting the video tag similar to the embed tag. I thought they deprecated the embed tag because of the attribute soup it created with each vendor adding whatever they wanted to the spec. The point of the object tag was to allow for an innumerable amount of name/value pairs to be specified instead of locking down what is and isn’t allowed. Does the W3C believe they can create an end-all-be-all video tag when something similar to with would allow for expandability?
Sean Christmann
27 May 08 at 10:56 pm
mike, thanks for interested news.
Roohullah
27 May 08 at 10:58 pm
Brilliant idea, I can see how this approach could work for other elements (audio springs to mind).
I’ve been taking this progressive enhancement approach to multimedia already, but it’s always been tricky to decide on what markup to use… right now a direct link to the media seems best, but this leaves little room for configuration. It’s nice to see this is being thought of for the future.
I imagine implementing the scripting API would involve some ExternalInterface goodness.
Tom H
28 May 08 at 4:40 am
that seems to be very similar to the work done in mv_embed.
http://metavid.ucsc.edu/wiki/index.php/Mv_embed
But their goal is to support ogg theora.
What is interesting in their approach is that they detect the support of ogg playback in the browsers and then choose an appropriate mean to play the video (plugin, native html5 video support, or cortado applet)
biou
28 May 08 at 5:26 am
[...] haber terminado la vida en la faz de la tierra</ironÃa>, pero mientras tanto ya podemos hacer uso del tag <video /> destinado para futuros contenidos multimedias en cualquier navegador (recordemos que WebKit ya lo [...]
Implementando de HTML5 con Javascript | aNieto2K
28 May 08 at 5:34 am
Since you know Flash doesn’t meet the requirements for , it feels like you’re pulling a Microsoft by hijacking the tag before it’s even been established. If that hadn’t occurred to you, it still seems like bad form at the very least.
As for making it easier to embed Flash by just using HTML markup, thousands of sites use Objecty (http://wiltgen.net/objecty/) for this today. Unlike SWFObject, it supports all major video formats and services, too.
Charles
28 May 08 at 7:32 am
@Charles
-This is a proof of concept to explore the feasibility of implementing the VIDEO tag in JavaScript. This was done by me, and not Adobe (although I work for Adobe).
-Any implementation would be up to the individual developer, and affect only the developer’s sites. (and thus nothing is being “hijacked”).
-The requirements for the tag have not been finalized, so whether or not flash meets them is still up in the air.
-This isnt specific to Flash. It could also be done with any other media player.
-As I posted in my blog post, the concept of implementing HTML 5 features outside of the browser is not new. In fact, it is something that Google has been pretty active with via Google Gears.
mike chambers
mesh@adobe.com
Mike Chambers
28 May 08 at 8:14 am
[...] Mike Chambers | Demo | JavaScript code [...]
HTML5 Video Element: Implemented using JavaScript and Flash » D' Technology Weblog: Technology, Blogging, Tips, Tricks, Computer, Hardware, Software, Tutorials, Internet, Web, Gadgets, Fashion, LifeStyle, Entertainment, News and more by Deepak Gupta
29 May 08 at 1:08 am
This is an interesting Proof of Concept. I for one would be thrilled to see this more mainstream. The current offerings require way too much “tag soup”, even including SWFObject, which by default requires the “container” div to hold the SWF content.
@Charles, I have to admit your comment really has no backing. I really get tired of seeing employees of specific companies accused of doing things just because “it could mean something”…
Matthew Keefe
29 May 08 at 2:09 pm
[...] POC : Implementing HTML 5 Video Element using JavaScript and FlashA proof of concept allowing use of the ‘video’ tag from the HTML5 draft spec, and having it work, even though browsers don’t yet support it.Tags: standards, html5, webdesign, hacks, javascript, flash, video, [...]
Links of Interest (May 9th 2008 through May 29th 2008) · All the Billion Other Moments (Jason Penney)
29 May 08 at 4:30 pm
On the topic of hijacking, I think that Charles might in fact be Charles Wiltgen, the author of Objecty. Here’s a tip Charles: you might want to clean up your mess of a site (missing tags, use of the proprietary “debug” attribute etc.) before going for a stroll wearing your tin-foil hat.
Nathan de Vries
2 Jun 08 at 1:34 am
SWFobject 2 approach would work great even with JavaScript disabled. That is not the case with Objecty, which seems to be purely javascript solution.
freelancer
13 Jun 08 at 8:12 am
[...] – bookmarked by 6 members originally found by nelson on 2008-08-06 POC : Implementing HTML 5 Video Element using JavaScript and Flash [...]
Bookmarks about Html5
14 Aug 08 at 6:30 am
Hi Mike!
Your example replaces the video tag even if the browser supports it.
I tried with a nightly build of Firefox and it seems the video tag is not really replaced (still in development, I know), the video is played two times.
I am trying to detect if the browser supports the video tag, but I can’t find any way to do it.
Does someone has an idea?
Jimmy
22 Aug 08 at 8:04 am
[...] we could all start using Mike Chambers’ workaround for getting Flash to display video wherever the video tag is used, and everyone could just carry [...]
CovWatch » Blog Archive » <video> and Flash from [Ux]
9 Sep 08 at 3:07 am
[...] video tag that let developers put videos on a Web page easily. Find and early implementation here by Mike Chambers, principal product manager for developer relations for Adobe AIR. “Although [...]
Adobe CTO Unveils AIR 1.5 Update, Ichabod and HTML 5 Video Tag; Hopes to Merge AIR and Flash Lite « TechPulse 360
21 Oct 08 at 10:11 pm
It is not out-of-date information? Because I have other data on this theme. http://video-online-go.ru/map.html
videoonlinego
17 Nov 08 at 4:44 pm
[...] has attempted to put their thoughts into the mix, even by showing how the two technologies can work together, but these articles somehow never really get syndicated the way the sensationalized HTML5 pieces [...]
Tech tabloids, Project Harmony, and the proposal for a ‘Flash’ tag in HTML5 | Commented Out
17 Jun 09 at 4:06 pm
Mike, I have been using your POC for a more complete implementation of an HTML5-to-Flash-Wrapper that maps nearly the complete HTML5 mediaelement API. The source code is available from github and I wrote a blog post describing my implementation: http://gettingsoftware.posterous.com/html5flash-using-html5-video-and-audio-right
Lars Trieloff
21 Jun 09 at 2:01 pm
[...] several posts that demonstrate how to play flv files in a <video> tag. [...]
ginger’s thoughts » Javascript libraries for support
8 Jul 09 at 3:21 am
[...] course, there are already a lot of libraries out there that target some aspect of compliance for at least some [...]
Chicken (and Another Chicken) and Egg « SourceForge.net: Project modernbrowsers
26 Mar 10 at 5:11 pm