Wednesday, May 28th, 2008

HTML5 Video tag implemented in Flash

Category: HTML, Standards

>Mike Chambers has create a nice proof of concept that implements the HTML 5 tag using JavaScript and Flash:

asically, 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.

To get it working, you just need to include the shim along with the video tag:

  1. <script type="text/javascript" src="swfobject/src/swfobject.js"></script>
  2. <script type="text/javascript" src="html5_video.js"></script>
  3.  
  4. <video src="http://onair.adobe.com.edgesuite.net/onair/raulph_hauwert_papervision3d.flv"
  5.     controls
  6.     poster="testpattern.png"
  7.     autoplay="true"
  8.     width="640"
  9.     height="360"
  10.     playcount="500">
  11. </video>

To see an example, go here, and then take a peak at the shim code itself.

Related Content:

Posted by Dion Almaer at 8:08 am
3 Comments

++++-
4.6 rating from 9 votes

3 Comments »

Comments feed TrackBack URI

Mike knows that Flash doesn’t meet the requirements for the tag, so this feels like Adobe is pulling a Microsoft by hijacking the tag before it’s even been established. If that hadn’t occurred to him, 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.

Comment by CharlesW1 — May 28, 2008

@CharlesW1

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

-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

Comment by mikechambers — May 28, 2008

Maybe this would be okay if VIDEO is not supported. That makes it be like Screaming Monkey or Dean Edwards’ IE7 or…

Comment by jamienk — May 28, 2008

Leave a comment

You must be logged in to post a comment.