How to Embed Flash Video on Your Web Page with a Control Bar

My last article described how to embed SWF in your web page. The main problem associated with this is that the flash video plays automatically. If the video is 10 minutes long viewers will need to wait patiently for it to finish or click out of the web page. This can be very frustrating and may turn off your visitors. It’s better to offer them a control bar.

One of the best solutions to this problem is to use the Flash Player named Flowplayer. It enables you to easily embed a flash video file in your web page and allow visitors to control the playing (ie start or stop the video).

To see how the flash media player looks on a web page visit:
Paul Koko Fashion Design Gallery

What is Flowplayer?

It’s a flash media player that allows you to easily play and control the video from your web page. It’s hosted on a global streaming network and allows extensive customization.

Video formats supported by Flowplayer include FLV, MP4 and H.264. To convert your original video to any of these formats use youconvertit.com…a free online service that converts media files to different formats.

The free version of Flowplayer is sufficient to play your flash video however you can purchase a commercial license if you don’t want the logo displayed at the beginning of the video. (I hardly noticed it).

How to embed flash video on your web page with a control bar

1. Download the flash video player (Flowplayer)
http://flowplayer.org/download/index.html

After downloading the zipped file, unzip it it to a folder on your hard drive
The Flowplayer folder contains all these files:

flowplayer-3.2.3.swf
flowplayer.controls-3.2.2.swf
example folder

2. Upload the Flowplayer folder to your server.

This will enable you to first test if the example video works on your server. After uploading the folder insert this URL in your browser ie http://www.yourdomain.com/flowplayer/example/index.html (replace yourdomain.com with your own domain).

If it doesn’t work check you uploaded all the files correctly and used the correct file paths.

3. Create folders on the server to play your own video

Create a folder on your server named “video” and put these 3 files inside it:

flowplayer-3.2.3.swf
flowplayer.controls-3.2.2.swf
video.flv (your own video file)

Create a folder named “js” and place this javascript file inside it (taken from the example folder)

flowplayer-3.2.3.min.js

Upload both these folders to your web server.

4. Insert javascript code in your web page

To include the javascript file: flowplayer-3.2.3.min.js in your web page place this code in the HEAD section:


<script src="js/flowplayer-3.2.3.min.js"></script>


4. Create the html code to add your video file and the flash media player (Flowplayer)


<center>
<!-- this A tag is where your Flowplayer will be placed. it can be anywhere -->
<a href="video/video.flv"  
style="display:block;width:520px;height:330px"  
id="player">
</a>



<!-- this will install flowplayer inside previous A- tag. -->
<script language="JavaScript">
flowplayer("player", "video/flowplayer-3.2.3.swf");
</script>
</center>


The center tags are to center the video on the web page.
Make sure you save the web page to retain your changes.

5. Upload the web page to your server

Your video won’t play correctly if the web page containing the code is not uploaded to the server.

6. Test your video

Enter the URL of your web page in your browser. It should play immediately and display a control bar underneath so your visitors can stop the video whenever they want.

7. Customization

For most users the default behavior is sufficient however Flowplayer allows you to further configure how the video displays on your web page. Customization options may include:

• changing the background color
• use a different control bar
• place a clock on the screen
• have a splash image displayed
• load playlists

Now you have no excuse to play a cool video on your web page.

Documentation
http://flowplayer.org/documentation/installation/index.html

Related articles
Embed SWF in Your Web Page

And now I would like to invite you to claim your FREE report titled:
7 Habits of Highly Effective Traffic Generation

Herman Drost is the owner and author of
http://www.DrostDesigns.com
Web Design, SEO, Article Marketing