How to Embed a Flash Video Player with Standards
MAY 15th 2008 • 0 Comments
Nobody would deny the fact that Flash has become the de facto standard for video on the web. However, I don't think there's ever been more confusion as to how to actually do that, as well as have a good set of video controls that actually work and maintain web standards in the process. This tutorial will outline the process that I've started using for serving video on the web with Flash.
The End Result
Below is an example of the end result that I'm shooting for. It's been generated with the SWFObject 2.0 dynamic publishing method. If you don't know what that is, it's ok, I'll do my best to explain it later.
The video in this example was created by my talented brother, Daniel. If you like it, show him some love in the comments on youtube
It looks like you don't have flash, no worries, watch the original Quicktime file.
Step 1: Create Your .flv Movie File
If you have a regular movie file, you need to convert it to flash. Quicktime can do this for you very easily. Simply go to "File > Export..." and choose the "Movie to Flash Video" option. Press "options" to fine tune the settings for the final file if you desire.
Step 2: Get the Video Player and Skin Set Up
I'm using the Free Progressive Flash FLV Video Player Extension and a prebuilt skin - both of which are provided by Dreamweaver by default. I've provided the plugin and the skin for download below.
If you'd like to create a custom skin, I recommend reading this article on Adobe by Dan Carr. It should help get you started.
Step 3: Generate the Markup
As I said earlier, I'm using SWFObject 2.0 to generate the html for the flash movie. There's a JavaScript generator that can automatically create the code needed. Most of the fields are self explanatory. These are the ones you should be most concerned about:
Flash (.swf):
This field should contain the path to the "FLVPlayer_Progressive.swf" extension.
Publishing Method:
You can choose between static publishing and dynamic publishing. I chose to use dynamic publishing.
Flashvars: skinName
There are a couple of Flashvars that you'll need to add in order for the skin and player to operate correctly. You'll have to click "more" to see all the options.
The first is "skinName", the value of which should be the path to the location of the Clear_Skin_3.swf file, minus the ".swf" extension (i.e. "/flash_player/Clear_Skin_3").
Flashvars: streamName
The second value is "streamName", the value of which should be the path to the location of the .flv movie file relative to the location of the FLVPlayer_Progressive.swf file (minus the ".flv" extension). It's important, if you're using relative paths to realize that this path is not set relative to the location of wherever you end up placing this javascript, but rather from the location of the player extension (the FLVPlayer_Progressive.swf file).
You can avoid all that confusion by simply using absolute paths if you like.
The Generated Content
Once you've generated the content, you should have something that looks like this:
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.skinName = "examples/Clear_Skin_3";
flashvars.streamName = "north_by_northwest";
var params = {};
params.wmode = "transparent";
params.play = "true";
var attributes = {};
attributes.id = "main_movie";
swfobject.embedSWF("examples/flash_player/FLVPlayer_Progressive.swf", "alt_content", "640", "368", "9.0.0", false, flashvars, params, attributes);
</script>
<div id="alt_content">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<p>It looks like you don't have flash, no worries, watch the original <a href="north_by_northwest.mp4">Quicktime file</a>.</p>
</div>
The Case for Standards
I think this is a great solution for standards and accessibility, because the markup is generated dynamically by the javascript. If javascript is unavailable, the flash won't work. But in most cases where flash is available, javascript is as well. So I think it's fine. And the alternate content displayed if flash is unavailable could also contain a link to a quicktime movie file if you wish, so anybody can have access. Ain't accessibility grand?
posted in: Development | Tutorials |
No comments have been made yet for this entry