Stream Flash videos on your site with Dreamhost FLV converter and LongTail Media Player

Posted by Matt Thommes on May 15, 2009 | Post type: Gain

With easy-to-use camcorders like the Flip gaining popularity and use, it's often helpful to be able to post recorded videos directly to your own website, without having to first post to YouTube or another video sharing site.

Dreamhost users can remove the middle-man, and quickly convert and embed video files for display on any website.

Dreamhost's Flash media utility converts any AVI, MPEG, or MOV files to web-friendly format FLV, and then, with the help of LongTail's FLV Media Player, let's you embed on any site with just a few lines of JavaScript code.

Convert the file

To convert your AVI, MPEG, or MOV file to FLV, you'll need to be a Dreamhost customer and have access to their web panel.

Once there, go to Goodies > Flash Media. Follow the instructions on screen to convert your file to FLV.

Screenshot of Dreamhost web panel

Copy code

The modified code from LongTail to embed the FLV on your site is immediately provided by Dreamhost, but it could use some improvements. Below is example code from LongTail, and modified by Dreamhost after converting a video file to FLV:

<script type="text/javascript" src="https://media.dreamhost.com/swfobject.js"></script>
<div id="my_movie.flv"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div>
<script type="text/javascript">
var sd = new SWFObject('https://media.dreamhost.com/mediaplayer.swf','mpl','480','360','8');
sd.addParam('allowscriptaccess','always');
sd.addParam('allowfullscreen','true');
sd.addVariable('height','360');
sd.addVariable('width','480');
sd.addVariable('file','http://paininthetech.com/my_movie.flv');
sd.write('my_movie.flv');
</script>

Straight out of the box, you can use this code to display your FLV file on any webpage. However, it's best to tweak some of this code for better organization and customization.

No external references

First thing you may consider doing is copying the external JavaScript files to your own server, instead of referencing media.dreamhost.com as the src attribute. This will ensure no decrease in your site's performance if media.dreamhost.com happened to be unresponsive.

This would be applicable for the very first line:

<script type="text/javascript" src="https://media.dreamhost.com/swfobject.js"></script>

So, for this site, the new src could look like:

<script type="text/javascript" src="http://paininthetech.com/javascript/swfobject.js"></script>

Also, the actual media player itself is being referenced from media.dreamhost as well:

var sd = new SWFObject('https://media.dreamhost.com/mediaplayer.swf','mpl','480','360','8');

Copy the SWF file to your own server and reference it from there.

Ensure filename and location are correct

Dreamhost's FLV converter forces you to place your video file at the root of your domain, for the conversion process. The established code is then pointing to the file at that location. However, once it's converted you can move it to another directory. Just change the pointers in the JavaScript code to the new location.

This line controls where your FLV is called from:

sd.addVariable('file','http://paininthetech.com/my_movie.flv');

Feel free to move it to a more intuitive directory, if you so desire, such as /movies/ or /videos/flv/. You get the idea. (I personally don't want random video files sitting in my site's root directory.)

Change other references to the filename

There's two other spots in the code that reference just the filename itself. You don't need to change anything if you don't adjust the actual filename. If you do change the filename, make sure to change these two references as well:

<div id="my_movie.flv">

... and:

sd.write('my_movie.flv');

Final touches

To make things even more compact, you may consider referencing the swfobject.js file as a global include on your site whenever video content is displayed. This largely depends on your CMS, but it's always good to include it once, from a single spot, rather than doing it on every page that needs it.

The same goes for the mediaplayer.swf inclusion. If you ever decided to change the name or location of mediaplayer.swf, you'd ideally like to do it once, not dozens of times - wherever you happened to include the file.

About the author(s)

Matt Thommes is an independent publishing enthusiast, mobile blogger, content creator, informative writer, web developer from a suburb of Chicago. Never one to conform, Matt intends to promote the effect the web has on our lives, in an effort to intensify, instruct, and clarify all that is happening around us.

Comments

Note: Comments may be viewed by authors, but if you have a more specific question you'd like to ask them, please email matt.thommes@paininthetech.com.

# software developers at 8/13/2009 1:04 pm cst

That was an inspiring post,

very clear and inspirong article ,I loved it so much

Keep up the good work

Quick Link to this comment: http://TTIP.me/c5263