Step 1 - Converting the Movie File Using Macromedia Flash

The first step of embedding a video is encoding a video in .flv format. Almost all online web players use .flv as the standard for playing files. For this tutorial you can download the sample video I've used called Trusted Computing at archive.org( Directed by: Benjamin Stephan and Lutz Vogel.)

If you don't have Macromedia Flash then skip to 1b.

Open Macromedia Flash Video Encoder and add the video to the queue File > Add. Then click Start queue at File > Start Queue and you are finished encoding the file into .flv format. Note: The customization on this step is minimal. For more control of video size and compression skip to step 1b, or 1c.

Step 1b - Converting the Movie File Using Riva FLV Encoder for Microsoft Windows

There are many options when encoding into FLV. The Windows option for this tutorial is the Riva FLV Encoder because it is free and customizable.

Download and install the Riva FLV Encoder from Riva's website.

Once opened, add the video to the input video box by using the browse button. The program will automatically output the video into the same directory. Next, we will adjust the preferences on the right section. For this simple video we will use the video size of 320x240 and keep all other settings as default. To start the encoding, click FLV Encode at the bottom of the program. Note: Try and keep the file size lower by adjusting the settings and keeping the resolution down. The larger the video, the longer it takes to load.

Step 1c - Converting the Movie File using Riva FLV Encoder for Mac OSX

The choice for Mac in this tutorial is ffmpegX.

Download and install the ffmpegX encoder from their website.

Once opened, add the video to the input video box by using the open button. The program will save the output the video into the same directory, but you will have to update the file name to TrustedComputing_LAFKON_LOW.flv. Next change the target format to FLV and click encode. To make any changes to the video size and compression, click on the different tabs. Note: Try and keep the file size lower by adjusting the settings and keeping the resolution down. The larger the video, the longer time it takes to load.

Step 2 - Download the Player

In this tutorial we will be using the open source MPW Player for playing our flash files. The main reasons are because the MPW player is open source and offers both easy customization and more in depth customizing. To download the player, visit the MPW Player website. The website is in spanish but just click the blue download button.

The necessary files are mpw_player.swf and the includes folder. Note: Place the encoded flv file, TrustedComputing_LAFKON_LOW.flv, in the same folder as the player and html file.

Step 3 - Embed the Flash Player Using SWFObject

Create a blank html document and add script tags for swfobject in the head of the document. The swfobject.js file is located in the includes folder in the download from mpw player.

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

Next, we will insert the actual flash player and edit one line. Place the name of the video file, TrustedComputing_LAFKON_LOW.flv, under the variable flv.

<div id="flvplayer">This div is replaced by the javascript using swfobject</div>
<script type="text/javascript">
	var so = new SWFObject("mpw_player.swf", "swfplayer", "400", "327", "9", "#000000"); // Player loading
	so.addVariable("flv", "TrustedComputing_LAFKON_LOW.flv"); // File Name
	so.addParam("allowFullScreen","true"); // Allow fullscreen, disable with false
	so.write("flvplayer"); // This needs to be the name of the div id
</script>

Now we have a functioning player with the default look.

Step 4 - Customize the Look of the Player

Customizing the player is very important and is the reason why we are using the MPW Player. To make updates to the player all we need to do is add variables in the JavaScript.

The first customization to the player will be adding a preview photo for the video. To add a photo, add the variable jpg and then the location of the photo. The photo used in the tutorial is named trusted.jpg - a screenshot from the video. Note: Don't forget the script tags in the head of the document.

<div id="flvplayer">This div is replaced by the javascript using swfobject</div>
<script type="text/javascript">
	var so = new SWFObject("mpw_player.swf", "swfplayer", "400", "327", "9", "#000000"); // Player loading
	so.addVariable("flv", "TrustedComputing_LAFKON_LOW.flv"); // File Name
	so.addVariable("jpg","trusted.jpg"); // Preview photo
	so.addParam("allowFullScreen","true"); // Allow fullscreen, disable with false
	so.write("flvplayer"); // This needs to be the name of the div id
</script>

In order to make further changes, add more variables. Here is a sample of all default variables added with comments explaining each purpose.

<div id="flvplayer">This div is replaced by the javascript using swfobject</div>
<script type="text/javascript">
	var so = new SWFObject("mpw_player.swf", "swfplayer", "400", "327", "9", "#000000"); // Player loading
	so.addVariable("flv", "TrustedComputing_LAFKON_LOW.flv"); // File Name
	so.addVariable("jpg","trusted.jpg"); // Preview photo
	so.addVariable("autoplay","false"); // Autoplay, make true to autoplay
	so.addParam("allowFullScreen","true"); // Allow fullscreen, disable with false
	so.addVariable("backcolor","000000"); // Background color of controls in html color code
	so.addVariable("frontcolor","ffffff"); // Foreground color of controls in html color code
	so.write("flvplayer"); // This needs to be the name of the div id
</script>

Step 5 - Support Users Without Flash and JavaScript

Embedding the player with SWFObject allows us to use a placeholder image or text in case the user doesn't have flash or javascript. A big reason for this is many computers or devices like the iPhone don't have Flash or JavaScript enabled.

In this example we will use a simple image, however any code will work. SWFObject replaces all content inside of a referenced div. When a user is missing JavaScript or Flash, the browser simply displays the div's content. In this case, the content displayed is just the same jpg file, trusted.jpg, that we used for a preview.

<div id="flvplayer"><img src="trusted.jpg"></div>
<script type="text/javascript">
	var so = new SWFObject("mpw_player.swf", "swfplayer", "400", "327", "9", "#000000"); // Player loading
	so.addVariable("flv", "TrustedComputing_LAFKON_LOW.flv"); // File Name
	so.addVariable("jpg","trusted.jpg"); // Preview photo
	so.addVariable("autoplay","false"); // Autoplay, make true to autoplay
	so.addParam("allowFullScreen","true"); // Allow fullscreen, disable with false
	so.addVariable("backcolor","000000"); // Background color of controls in html color code
	so.addVariable("frontcolor","ffffff"); // Foreground color of controls in html color code
	so.write("flvplayer"); // This needs to be the name of the div id
</script>

Step 6 - Adding Multiple Players on a Single Page

In order to put more than one player on a single page, just make sure each referenced div has a unique name. Then update the JavaScript reference to match the div id.

<div id="flvplayer2"><img src="trusted.jpg"></div>
<script type="text/javascript">
	var so = new SWFObject("mpw_player.swf", "swfplayer", "400", "327", "9", "#000000"); // Player loading
	so.addVariable("flv", "TrustedComputing_LAFKON_LOW.flv"); // File Name
	so.addVariable("jpg","trusted.jpg"); // Preview photo
	so.addVariable("autoplay","false"); // Autoplay, make true to autoplay
	so.addParam("allowFullScreen","true"); // Allow fullscreen, disable with false
	so.addVariable("backcolor","000000"); // Background color of controls in html color code
	so.addVariable("frontcolor","ffffff"); // Foreground color of controls in html color code
	so.write("flvplayer2"); // This needs to be the name of the div id
</script>

Step 7 - Using the Audio Player

The MPW player can also be used as an audio player. All we need to do is add the variable mp3 instead of flv.

<div id="audioplayer"><img src="trusted.jpg"></div>
<script type="text/javascript">
	var so = new SWFObject("mpw_player.swf", "swfplayer", "400", "327", "9", "#000000"); // Player loading
	so.addVariable("mp3", "audio.mp3"); // File Name
	so.addVariable("jpg","trusted.jpg"); // Preview photo
	so.addVariable("autoplay","false"); // Autoplay, make true to autoplay
	so.addParam("allowFullScreen","true"); // Allow fullscreen, disable with false
	so.addVariable("backcolor","b54645"); // Background color of controls in html color code
	so.addVariable("frontcolor","ffffff"); // Foreground color of controls in html color code
	so.write("audioplayer"); // This needs to be the name of the div id
</script>

Step 8 - Further Customization

MPW Player is open source, which means that anybody can download and make changes to the player. In order to download the source code for the player visit this webpage and download "MPW Player SRC".

Alternative Players

MPW Player is not perfect for every web video. Try out these other free players as they might work better for you.

• FLV Flash Fullscreen Video Player - No volume controls as of yet is a downside, but it is easy to use and open source.
• OS FLV - This open source player is updated very often and has some specific development for Joomla.
• Flow Player - The player has lots of perks, but you have to pay an upgrade license to remove branding
• JW FLV Media Player - This player is free to use and customizable. Works great for personal use but needs a license to be used commercially.

Conclusion

This tutorial showed you how to encode a video in flv and customize an open source flash player in order to display video and audio on the web.

• Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.