Today, I will teach you how to display video on the web using an open source flash player. We will cover all steps, including converting a video into the flv file format, and embedding a customized player using SWFObject. The best part is that the retail Adobe Flash is not required.
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.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.












User Comments
( ADD YOURS )imko April 27th
im the first
( )THNKS ANY WAY
imko April 27th
http://simpleimran.blogspot.com/
( )kiziel May 2nd
Lame spammer :/
Myfacefriends April 27th
nice tuts., keep on coming. cheers.
( )Joe April 27th
First
( )neill cartlidge April 29th
Wrong.
( )kiziel May 2nd
Lol, thats sad. People spam with comments like ‘first! hahahahah xD lol rotfl lmao’ even they’re not
( )Chris April 27th
The link to the MPW Player website isnt working.
( )Michael Garcia April 27th
Correct link.
http://sourceforge.net/projects/mpwplayer
( )Joe April 27th
http://www.miplayweb.com/player/?c=download
dead link
( )diezko April 27th
This works. for download player
( )http://sourceforge.net/projects/mpwplayer
Joe April 27th
BTW, how to make the web video be progressive download? Just like YouTube.
( )jem April 27th
The only thing I’d recommend revising is using SWFObject version 2 which has been out for quite a while now. It includes expressInstall functionality which is another great feature for getting visitors up to date with the correction version of flash player.
The API for SWFObject2 is also completely different, but makes a lot more sense. You can find the project on googlecode.
( )Joao Joaquim April 27th
nice tut.
( )but, yep, the link is dead.
Philsbury April 27th
Any reason for not using swfObject 2?
( )Kevin Quillen April 27th
These are the kinds of tuts that are great. Running your own video is kind of a pain but this show a much simplified process.
( )Diego SA April 27th
Cool! It’s gonna be useful! Thanks!
( )Steve April 27th
I was looking for this. Cheers.
( )delphiki April 27th
Nice tut.
( )I’m using this player which is kinda great too : http://flv-player.net/
Sid April 27th
http://lmgtfy.com/?q=MPW%20Player
( )Yoosuf April 27th
ohh god, what happening to nettuts? so much of span comments :S
its a good tut, i love flower player
( )lawrence77 April 27th
nothing is spam here!
( )Chris April 27th
Perfect timing. I’ve had to look at online video for our site over the past 3-4 months. Just started the web site around 2 weeks ago and decided to go with Flowplayer because of the subtitles option. Although you have to pay to remove branding, I do think its quite cheap. Some other good alternatives listed.
I’ve got to say its quite a scary area to jump into with so many big sites doing it so well.
( )Lamin Barrow April 27th
Awesome… i really loved the tut.
( )Roderick April 27th
MPW Player Link:
http://sourceforge.net/projects/mpwplayer
It looks that the main domain name expired and the owner doesn’t know it yet.
Nice tut, but I would also recommend using SWFObject 2.1 ( ttp://code.google.com/p/swfobject/ ).
( )crysfel April 27th
Thanks for the tut!
( )Andrew McCauley April 27th
I’ve been using the jw media player for over a year now and really like it. Sure it costs some for a commercial license, but I’ve found it to be well worth the price.
( )Adam16ster April 27th
thnks…short and to the point. never heard of that player. new tool for my toolbox.
( )peewee1002 April 27th
Cool love how this ties in with the Flash tuts Video tutorial without really meaning to….
( )marcolepsy April 27th
Flowplayer has a rich Javascript API to do things like trigger JavaScript functions at predefined events (e.g. when the video plays, when a time/cuepoint is reached).
You can also interface with the player in the opposite fashion, using your own HTML/CSS player bar rather than the built in, SWF version.
That’s why I think Flowplayer is the best thing out there now and worth the license fee if your budget can afford it.
However, once HTML 5 video tag support is more common, like what is in the Firefox 3.5 nightlies now, that type of functionality will be available without having to load an external player (at least for visitors using a new browser). Can’t wait.
Here’s a couple of examples of Flowplayer implemented, taking advantage of some of the API features:
http://www.aweber.com/videos/create-email-marketing-campaign.htm
( )http://www.aweber.com/faq/questions/183/How+Do+I+Create+a+Blog+Broadcast
Eric Lin April 27th
Another great video encoder is SUPER: http://www.erightsoft.com/SUPER.html.
By the way, does the player support swf file format?
( )Carl - Web Courses Bangkok Instructor April 27th
Ohh this is very useful, when using YouTube, the code they supply is does not pass W3C and I find the other codes quite buggy. So this is great, thanks,
C
( )delphiki April 28th
You may find this interesting : http://www.lackofinspiration.com/-embed2object
( )r_jake April 28th
Useful, but running a lot of video (especially if it needs to be HD) from your own server is pretty resource intensive.
Vimeo solves this, and has all the SEO benefits as well, but you can’t easily customise the player.
How about a post about using a video sharing site API with your own custom interface (if such a thing exists?) – this would be the best of both worlds!
( )Michael Garcia May 1st
A popular solution for a video sharing with complete customization is from Brightcove. They host all the files and have a video content management system. They have a free version if you are interested.
http://www.brightcove.com/
( )Martyn Web April 28th
I was looking for something very similar to this awhile back but never did get a final solution so thanks. Is anybody aware of any software that can convert flv to .mov files?
( )r_jake April 28th
I’ve used iSquint (Mac Only). It’s discontinued but you can still download it from MacUpdate I think.
It’s free and is designed to convert FLVs for use on an iPod, but has the ability to save as straight H.264 QuickTime .movs as well.
( )thai April 28th
and…
(first, thank you)
… where can we find the list of editable variables?
could i possibly change the opacity of the controller area??
( )Michael Garcia April 28th
The full list of variables are listed in Step 4. (Also included in the .zip file from sourceforge.)
http://sourceforge.net/projects/mpwplayer
Sadly they don’t have support for opacity.
( )nemo April 28th
Thank you. This is very good tut.
( )Asif April 30th
Thanks you. It is really good tutorial.
( )Maurizio Liberato April 30th
Great! I was looking for something like that! Well done
( )Scottie May 1st
Hmm can’t seem to get this running!
The div with the id of flvplayer, do i have to move that to where i want the video placed?
Also how would you use this if you had multiple videos on a page?
Thanks
( )Scottie May 1st
Ok i have got everything in place now. But when i click play, the player goes transparent with a red background, then nothing happens!
Any ideas? Thanks
( )Scottie May 1st
Ok ignore the last message, i have finally sorted it out. Just wondered though, would there be anyway to make each individual video code external?
Danny May 1st
Scottie,
How did you get this to work? I am having the exact same problem. Thank you!
Danny May 1st
Never mind, I figured it out. For anyone in future reference if you get the red box after you hit play, if you are on a Windows server running IIS 6.0 go to your website properties and edit the MIME types to be the following:
Type: flv-application/octet-stream
Extension: .flv
Then restart the WWW service under the Administrator services. Hope this helps someone.
May want to add this to the article, this is not a default feature in IIS 6.0. I prefer Linux servers but did not have a choice here.
( )jak May 3rd
Can this open source player generate embed code for others to use on their site/blog?
( )mrc-andre menard May 3rd
Can you show us how to make a playlist with the viewer ?
( )suman May 7th
nice tuts and really like it if you can show how to create playlist if there are more that one videos.
( )marco May 29th
Hi,
How can I use the same player in diferent post on wordpress (selfhost) blog?
( )tom July 8th
edit the template (probably single and index) to include the player and use custom fields, or for simplicity the flutter plug-in to add the location of the required video for each post by echoing the variable where the link should be
( )Marc May 31st
hi, can somebody tell me wher and how i have to ad the path to my movie for using MPW with flashobjekt 2?
var flashvars = {};
( )var params = {};
var attributes = {};
attributes.id = “moviecontainer”;
swfobject.embedSWF(”player/mpw_player.swf”, “myAlternativeContent”, “420″, “340″, “9.0.0″, false, flashvars, params, attributes);
Kranthi June 5th
Hi,
( )Its a nice tutorial. I am planning to use it in my video sharing website. But before that can any one give me the websites which are already using this player and pros and cons(if any) about this MPW Player.
Thanks
Kranthi
Naveen June 13th
I really liked the explanation, it gave me a confidence to build wiki for video related files and show in wiki platform.
( )mark June 15th
is there anyway to get this player to go back to the first frame at the end of the movie? thanks
( )Sivrit June 16th
In English:
Ok, I have done all the steps and the player works well
So, I have just one question: Could we add a new Param or Variable to completely hide the control bar? That way users only would have the ‘Play’ button.. (I think if that could be done, also can make more Params or Variables to put the volume on 100% always)
En Español:
Escribo en este idioma por si me entendieras, que me explico mejor porque es mi lengua nativa
Lo dicho, sigo todos los pasos y el reproductor funciona a la perfección
Así que me estaba preguntando una cosa: ¿se podría poner alguna función tipo Param o Variable para ocultar totalmente la barra de control? Osea los botones de Play, la barra de carga, la de volumen.. todo. Así a los usuarios sólo les aparecía el bonito icono de Play.. y si esto pudiera hacerse igual también se podría poner un Param o una Variable para asegurarse de que el volumen está siempre al 100%, y cosillas así
Thanks for all your help, only this tutorial really helps
Gracias por tu ayuda, este tutorial es el único de todo Internet que de verdad aporta y ayuda con el reproductor web
Congratulations =)
( )Mi más sincera enhorabuena Michael García
Marcos June 30th
Excellent resource!! Thanks for sharing…
If you have problems with other layers, add:
so.addParam( “wmode”,”transparent” );
( )Steve October 17th
Marcos, You saved me! thanks. I have been looking everywhere for this fix. If you weren’t a dude, i’d give you a kiss.
( )ronie July 22nd
I have a problem using with internet explorer 6.
( )The player don´t work.
Neill Cartlidge September 10th
Surely you mean Adobe Flash. It hasn’t been Macromedia for a long time?
( )prathap September 16th
very much helpful
( )goemo October 9th
First of all thanks for such an easy and effective player
Question: Why does the autoplay function not work? “true” is without effect …
Thanks for your reply!
( )goemo October 9th
Sorry! “autplay”-problem solved!
Another question: Is it possible to change the value for “volume”. And which are possible values (from… to). My changes didn’t take any effect …
( )goemo October 9th
It is also no problem to give the player a transparent wmode …
so.addParam(”wmode”,”transparent”);
… works fine
Also very helpful in WYSIWYG Editors and on layers (in joint with other objects/elements and their arrangement).
( )Joe October 11th
Im Lovin It!
( )rcard October 28th
last?
( )