In this tutorial you will learn how to insert accessible videos into your websites with a YouTube style interface. I used to use Quicktime for displaying videos on my site, but a lot of people who use PC don't have Quicktime installed, and people had to wait for the whole video to load. Using Flash the video is streamed and people can watch it before it has completely downloaded.

I thought of uploading the videos to YouTube and embeding them on my site, but I'm not a big fan of the Youtube interface. Luckily I found OutsideOfSociety's awesome flvPlayer which let's you have playlists of multiple videos from an XML file, and let's you pass loads of variables which let you hide the interface or loop the videos for example.

One of the things I don't like about Flash is that if you embed videos through for example Dreamweaver the code won't be XHTML valid. There are method's around this like the Satay Method from A List Apart, but for me the best one is Geoff Stearns' SWFObject script.

These awesome resources are included in the zip file attached to this post, and if you want instructions go to the flvPlayer and SWFObject websites. You can see a demo @ http://ipwa.net/accessibleflash/index.html

Step 1: Transform your video to a .flv file, to do this you can use Flash, Quicktime or even free web services like media-convert. Place this file in you assets folder.

Step 2: Copy the flvPlayer.swf and swfobject.js files to your assets folder. This could be another folder you just need to change the paths to suit your set up. Make sure your .flv files and the flvPlayer are in the same folder.

Step 3: Include the SWFObject JavaScript file to the head of your website.

<script src="assets/swfobject.js" type="text/javascript"></script>

Step 4: Make a div called flashcontent, this will hold you Flash movie and you can style it with CSS. You can add some text that will be displayed in case the user doesn't have Flash Player or the version that your video was encoded with.

<div id="flashcontent">
<strong>You need to upgrade your Flash Player</strong>
This is replaced by the Flash content.
</div>

Step 5: Insert some JavaScript right below your flashcontent div that holds the parameters for your video.

<script type="text/javascript">
// <![CDATA[

var so = new SWFObject("assets/flvPlayer.swf", "flvPlayer", "400", "225", "8", "#FFFFFF");
so.addVariable("flvToPlay", "suitcase.flv"); // this path has to be relative to the flvPlayer.swf and not to the page.
so.addVariable("hiddenGui", "false");
so.addVariable("showScaleModes", "false");
so.addVariable("autoStart", "false");
so.addVariable("startImage", "assets/suitcase.jpg");
so.addParam("allowFullScreen", "true");
so.write("flashcontent");

// ]]>
</script>

You can see a demo of how it works @ http://ipwa.net/accessibleflash/index.html

Downloads

accessibleflash.zip

465.65 KB