Web Developer Class: Embedding a Flash player in Your Web Site

Many people have requested the code for embedding a Flash player in their web site. This is not a simple task, as a universal standard does not exist. I did, however, recently find Flowplayer 3.1.

They have free version of their player available with the tradeoff that their logo appears on the player in your site. That’s a very fair trade off, considering that the paid versions range in cost from $95 to $1450. Flowplayer has all the options you want, including full screen, volume control, and of course pause and play with a bar that shows how much video has loaded.

So as not to repeat already published content, Flowplayer provides detailed instructions for set up here.

The directions are very simple and easy to follow. I didn’t have any issue at all. The only thing that concerned me a little, is that in the code, you have to use a URL for the video (from wherever you have your files hosted), you can’t simply point to a video file sitting on your hard drive or on your web host like an embed tag. You might be able to tweak the code to support an embed tag but that’s for another article.

The Flowplayer will play mp4 files; so no conversion is necessary. Plus, I found the video streamed much faster through the Flowplayer as compared to QuickTime.

One last note, if you have more than one video on a single page, you’ll probably want autoplay turned off. It took some digging around on how to figure this out, but here’s the answer:

{clip:{autoPlay:false}

You insert it like this:

<script language=”JavaScript”>
    flowplayer(“player”, “flowplayer/flowplayer-3.1.5.swf”,{clip:{autoPlay:false}});   
</script>

In the same manner, you can turn off autobuffering.

Now you know how to embed a Flash player on your web pages–it’s simple to add, and enables you to post those games, videos and Flash applications that your site’s visitors are clamoring about. Come back next week for more tips!