Blog: Our thoughts, in no particular order.

There’s a lot of talk about the lack of Adobe Flash on the iPod and the iPad.  In the interests of full disclosure, I have an iPhone 3GS and plan on buying an iPad on April 3rds.  Sure, like most iPhone users, I miss the animations and games, but the thing that I miss most is video.  So what can be done about this?

The answer only requires two basic steps: (1) use HTML5 video and (2) use Flash video if the user is not using a browser that supports HTML5 video.  The beauty of this solution is that it is seamless; your visitors will never know that any determination about their browser capabilities has been made.

Now this seems like a bit of a hassle, and frankly it is.  But unless you aren’t worried about possibly alienating an ever-growing user segment, it is something that Mr. Jobs has required web developers to do, constructively, of course.

Nuts & Bolts

The problem with emerging technologies is a lack of standardization, and the video element is no exception.  In specific, the video format that is supported by Firefox differs from the format supported by Safari.  As such, we need to specify one file for Firefox and one for Safari.

 

<video controls>

<source src="video.ogg" type="video/ogg" /> <!-- Firefox -->

<source src="video.m4v" type="video/mp4" /> <!-- Safari -->

</video> 

 

But what about people not using the most current versions of Firefox & Safari?   Well, because we know those people aren’t using iPhones are iPads, we will allow Flash to play the video.  We will use SWFObject and enclose the video element in a div that Flash will overwrite if it the user’s browser doesn’t support HTML5 video.  The required mark-up will similar to the following:

  

<div id=”video-player”>

<video controls>

<source src="video.ogg" type="video/ogg" /> <!-- Firefox -->

<source src="video.m4v" type="video/mp4" /> <!-- Safari -->

</video>

</div> 

 

Next, we will use some JavaScript to test if the browser support HTML5 video:

 

<script type="text/javascript">

// Determine whether the browser supports the video element

var b = document.createElement("video");

// Check to see if user’s browser will play the video element

if (!b.play)

{ 

var params = { allowfullscreen: "true" };

       var flashvars = { file: "video.m4v" };

       swfobject.embedSWF("video_player.swf", "video-player", "640", "360", "9.0.0", "expressInstall.swf", flashvars, params);

}

</script> 

 

The thing that is actually nice about this implementation is that both Flash and Safari can play the same video file, so we only need to create 2 video files.  Moreover, if your major reason for doing this is to support iPhone and iPad users, you aren’t worried about Firefox users having to see the video in Flash, you only need to use 1 video file.