Steinruck Design

• Work
• Blog
• Contact

Insightful. Witty. The Blog.

It's Subscribalicious

• Viget Labs is looking for a Design Director
• Lessons of a small biz owner
• Word of Mouth
• Building a better Flash video player
• Christmas Trivia for Designers

January 03, 2008

Building a better Flash video player

I recently had the challenge of creating a Flash video player that can play multiple videos anywhere on a site. Because these videos would be changing on a consistent basis, I wanted to make it as easy as possible to add, modify, and remove video. Using Flash, a jQuery plugin, and ExpressionEngine, I was able to build a Flash video player that can play any FLV on my site. The best part is that this can all be done by simply adding a new entry into ExpressionEngine’s control panel without getting elbow deep in code.

We’ll break it down step-by-step so that hopefully you can replicate the player and maybe even make it better. I’ll admit up front that Actionscript isn’t my strong point, so all of you super Flash gurus who find this remedial can probably help. I’m just showing what worked for me.

Step 1: Make the Flash movie

I’m using Flash CS3 Professional which has some different naming conventions for Components and Actionscript. You should still be able to get this to work, but you’ll have to figure out the nomenclature in your version.

Create a Flash movie and set it to the size that you want your final movie output to be. Create two layers labeling the top layer Actionscript and the bottom layer Component.

Open the Components panel (Windows > Components), find the Media group and open it. You’ll see a few options there, but the one that we’re interested in is the MediaPlayback component. Make sure that you have the first frame of the Component layer selected and drag an instance of this to the stage. At this point your stage should look something like this.

Click on the MediaPlayback instance on the stage and give it an instance name. I used the instance name myFLVPlybk since this is commonly used throughout the Actionscript help examples. Also make sure that you set the X and Y values to 0.

While you still have the MediaPlayback component on the stage selected, open the Component Inspector. Most of these things will be controlled by the actionscript that we write in the next step, but the critical thing that we need to pay close attention to is the contentPath. If there is a value present, delete it and make sure that the value is blank.

Click on the first frame of the actionscript layer and add the following code.

import mx.video.*;
my_FLVPlybk.skin = "/flash/ClearOverAll.swf";
my_FLVPlybk.skinAutoHide = true;
my_FLVPlybk.autoSize = true;
my_FLVPlaybk.scaleMode = exactFit;
my_FLVPlybk.contentPath = file;
}

You might notice that my_FLVPlybk.contentPath = file; has a value of file. This can be almost anything that you want it to be, but it has to be a name that will be accepted as a variable. Later in the process we’ll pass a value to this variable in the HTML. (It sounds a lot fancier than it is, don’t bail out yet. The fun is just about to begin.)

That’s all that we need with Flash, so export your SWF and put it somewhere on the server where it can be called later.

Step 2: Configure the jQuery goodness

You actually have the option to use SWF Object if you prefer not to use jQuery. Just know that if you’re using other jQuery scripts on your site, your best bet is to use jQuery for compatibility. There was a conflict between SWF Object and jQuery that caused my demo to break early on. I happened onto Luke Lutman’s jQuery Flash Plugin which does essentially the same thing as SWF Object.

Download the latest version of jquery and the jQuery Flash plugin. Add the following lines of code to the head of your page making sure to edit the paths correctly.

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.flash.js"></script>

Now we’re ready to write the script that makes the magic happen. Props go to my jQuery genius friend Rob Soulé for figuring this out. Add this chunk of code to the head of your page or just create another external javascript file (this is the best way) and link to it just like we did above.

$(document).ready(function() {  
$('#flash_video_content').flash(null, , function(htmlOptions) {
var $this = $(this);
	var flashDir = unescape("%2fflash%2f");
	var params = $this.attr('rel').split(':');
	htmlOptions.src = params[0];
	htmlOptions.width = params[1];
	htmlOptions.height = params[2];
	htmlOptions.flashvars.file = flashDir + params[3];
	htmlOptions.wmode = params[4];    
	$this.html($.fn.flash.transform(htmlOptions));
});
});  

When it’s all said and done, this script will output an embed tag that looks like the code below. (Note: Do not copy the following code into your page. It will be generated by the javascript when the HTML is rendered. It’s only shown as an example.)

<div id="flash_video_content" rel="/flash/myVideoPlayer.swf:320:240:myMovie.flv:transparent">
<embed flashvars="file=/flash/myMovie.flv" 
pluginspage="http://www.adobe.com/go/getflashplayer" 
src="/flash/newsplayer.swf" 
type="application/x-shockwave-flash" 
wmode="transparent" 
height="240" 
width="320">
</div>

But how does the javascript get the values to output in the embed tag? Read on my padawan, the answer is coming up next. Open your HTML page, find the area where you want the video to appear, and place this code into it.

<div id="flash_video_content" rel="/flash/myVideoPlayer.swf:320:240::transparent"></div>

Each value in this line of HTML is separated by a colon, passed to the javascript, and output as an embed tag in the HTML. The name of the video file (shown above as tag) will be supplied with ExpressionEngine (explained in Step 3), and will be passed to the file variable that we discussed in Step 1 using flashVars. This will fill the contentPath which tells the SWF file which video you want to play. It should be starting to make sense that you can place the above line of HTML anywhere on your site, change any value(s), and have different videos play through the same SWF shell. Feel free to change any of the values like the height and width values if you prefer.

Step 3: Rock it with ExpressionEngine

I suppose that you could use a variety of different CMS solutions out there to achieve the same goal. The beauty of ExpressionEngine is the ability to create custom fields for data input (I know that you can do this with Texpattern too). For the purpose of this demo I’m going to assume that you have some basic working knowledge of creating custom fields. If not, it’s really pretty simple and can be learned easily by reading the ExpressionEngine documentation.

In the code above I placed as the fourth parameter to be filled. By creating a custom field named my_video, I can now fill in the filename of the video that I want to be played in a given page. For example, by typing in the filename cnn_interview.swf for a particular weblog entry, that video will now be played when the entry is published.

If you wanted the other parameters to be just as dynamic as the filename, you could create custom fields for all of them and just fill in the values on an entry-by-entry basis.

That’s a wrap

That’s all there is to it. Just remember that the line of HTML placed on the page is passing the values through the javascript, which is outputting an embed tag that passes the necessary values to the SWF file, and voila...you have an SWF file that can play multiple videos.

One problem that I haven’t figured out is how to dynamically size the Flash player if the size of the video changes from time to time. If anyone knows how to do this and can incorporate it into the current framework, I would really be interested in hearing how that would work.

I hope that this was helpful and can give you a little jump start on your next project where you need to play multiple videos on a site. 

Comments

Be a commenter

Name

E-mail

Website

Comment

Remember me

E-mail me follow-ups