HTML5 Video Element: Implemented using JavaScript and Flash

Mike Chambers has writen a post that show us the “Implementing HTML 5 Video Element using JavaScript and Flash” — “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 […]

Mike Chambers has writen a post that show us the “Implementing HTML 5 Video Element using JavaScript and Flash” — “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”. [Full spec]

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>

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.

Mike Chambers | Demo | JavaScript code

Source:→ Ajaxian