Embedding FLV Files into HTML

There was a need this week to embed a FLV file into an HTML page and we had no experience in directly embedding this kind of content. I’ve embedded YouTube videos before into posts using Windows Live Writer or the embed code that YouTube provides. But actually hosting the file and finding the right embed for this kind of file and the server that is hosting the site was a challenge.

I found this great download that is super small and wraps the Adobe Media Player on the page using javascript. It is from longtailvideo.com and it’s called the JW FLV Media Player. After downloading the code, installing is just as simple as playing the contents of a folder on the server. The embed code is provided on the site:

<p id='preview'>The player will show in this paragraph</p>
<script type='text/javascript' src='swfobject.js'> </ script>
<script type='text/javascript'>
var s1 = new SWFObject('player.swf','player','400','300','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=video.flv');
s1.write('preview');
</script> 

You need to change the video.flv to the location and name of the video file you want to display. Also modify the location of the swfobject.js and the player.swf if they are not available in the same directory as the web page. There was an additional parameter I needed to change for this specific file and that was the stretching value. The exactfit value modified a flat and narrow video into a normal box video.

s1.addParam('flashvars','stretching=exactfit');

One final step allowed the FLV file to be recognized by Windows IIS. I found these instructions on It.Toolbox.com to add the .FLV Mime type to ISS. Once the Mime Type was added the file loaded perfectly and the player performed nicely for our organization. I don’t recommend hosting your own video files as the bandwidth and storage size are large. But if you need to host a few files locally, this is a very good solution.