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).
