openwebworks

Saturday, June 21, 2008

I really liked RealVideo, OK?  For years it just worked, had SureStream going for it, and a great server product in Helix.  Alas, many people got sick and tired of dealing with Real Player for a variety of well-known reasons.  So the player install base dropped and well, it became obvious that the Real format was in demise.  With YouTube and most other media sites deploying Flash video, and with a Flash install base of something like 98%, the choice was clear.

But I soon discovered that delivering Flash video wasn't totally simple. For one thing, Macromedia gives you great tools to create the elements for publishing Flash video on websites. Just walk thru the steps, upload the files and code, and you're done right? And then your web pages don't validate.

So I spent some time looking for best practices for publishing Flash video, for those of us who care about web standards which should be all of us. But that's another harangue. This here is a recipe for publishing Flash video using valid code and open source elements.

Code Issues

There are several methods for putting Flash video on your site. They all require:

1. some html code in an object tag
2. a Flash player which is your SWF file
3. the Flash video file which is the FLV file

The official Adobe method uses both an object tag and an embed tag. The Adobe method works fine but, um, actually there is no embed tag in any version of html or xhtml. The embed tag simply isn't valid code. Should we care? Can we do better? The answer to both questions, for the sake of future compatibility when browsers become actually standards-compliant, is Yes!

Also, the Adobe code works great if Flash is installed, but if not it won't issue a prompt to install. Users may just see something ugly and broken.

A better method was published as an article on A List Apart called Flash Satay: Embedding Flash While Supporting Standards. This code validates but it has a number of other drawbacks, and may actually be less accessible to screen readers.

The better-yet solution was developed by Geoff Stearns, a Flash engineer at YouTube. It's called SWFObject: Javascript Flash Player detection and embed script, and you can read all the details here.

The basic idea is you use a JavaScript file to assist the browser. You specify a few variables and parameters like the video file location, player window size, autostart, player color, etc., in the call to the script. The script then generates a new object containing the player, feeds the .flv video file into it, and everything gets rendered on your web page. Geoff has made everything you need (SWFObject JavaScript file, code examples, instructions, and examples) freely available on the SWFObject site. Sweet!

Cutting to the Chase

Here's an actual code example based on SWFObject:

<div class="flv"> <p id="{title}"><a href="http://www.macromedia.com/go/getflashplayer">Get Flash</a> to see this video.</p> <script type="text/javascript"> var so = new SWFObject('{./flash/flvplayer.swf','player','360','260','8'); so.addParam("allowfullscreen","true"); so.addParam("allowscriptaccess","always"); so.addVariable("file","http://mediaserver.yourdomain/flash/{title}.flv"); so.addVariable("image","{coverimage}"); so.addVariable("displaywidth","360"); so.addVariable("displayheight","240"); so.addVariable('linkfromdisplay','true'); so.addVariable('callback','analytics'); so.write('{title}'); </script> </div>

Notice the curly brackets enclosing the word "title." This should be the filename of your Flash video, and it also serves to connect that video file to this specific instance of the Flash player/object. So you can have any number of Flash player/objects on one web page, and the JavaScript connects the right video files to the right player windows. (Don't use the curly brackets; they're merely a placeholder in this example.) It also frees you to use a CMS to automatically generate any number of player/objects dynamically. You can see an example of this on this here site I designed.

The parameters in the object tag control the size, color, and behavior of the Flash player (the .swf file). You have many options, which you can read in exhaustive detail on the Adobe site.

So you use this code, along with the SWFObject JavaScript file, to control the player. Put the JavaScript file somewhere on your web server, link to it in the head section of your web page, and you have a solid Flash video foundation that actually validates.

Open Source Flash Players

But you still need a Flash player, which is your .swf file. You can build one yourself using Adobe Flash CS3 or something. You can buy one from several sources, which might include features like automatic user bandwidth detection, etc. Or you can use the outstanding free open source JW Flash video player provided by Jeroen Wijering. (Jeroen has lots of other helpful guidance and resources on his site.)

The JW Flash Player can also stream mp3 audio files. You can also control it with an XML playlist. I also set it up to be fed videos via clickable thumbnail images, and I'll write that up sometime soon. You'll recognize this player all over the freakin' Internet because it's free, it works, and it's good.

However, if you want a small Flash audio player with a different look, here's a nice one created by Mindy McAdams. You'll need her JavaScript file as well, which she provides freely with the player, along with full instructions for using and customizing everything.

You can see many examples of this player on one of my sites. It validates, and works flawlessly with my CMS feeding it unique mp3 filenames to create new player instances on the fly.

A Flash Media Future?

Will Flash be the default online media format in the years ahead? Hard to know, but it appears dominant for the moment. My approach now is to offer Flash video and audio for streaming, and mpeg4 video and mp3 audio for downloads wherever possible. I'm currently in the business of publishing about 40 hours of news, interviews, and other audio content every week, and I manage other sites containing hundreds of hours of video. It's all done with a CMS, and using the simple, valid, and open source Flash tools described above. Good luck with your projects!

(0) Comments/Permalink | Categories: media • technology