posting a video on the web

With all the Web 2.0 technology talk these days, you would think it would be easy to post a video on your blog. If your video is public material, then you would be fairly correct (just use YouTube). But if your video is private, then you would be dead wrong.

I’ve unsuccessfully tried to find ways to easily post videos in the past, but I’ve never found a solution that doesn’t leave the videos looking choppy and grainy like a 1970’s snuff film. Recently, I did some more research and finally came up with a working solution.

The first step to uploading your video is to convert it from whatever format it is in now into FLV (Flash) format. Of course, this means that your video will not show up on an iPad or iPhone (sorry). This is the most critical part of the whole process and the one that took me the longest to get right.

I found an open source tool called ffmpeg, which does the job beautifully. It is used by many standalone converters and players. If you are doing this on Windows, as I am, you can find a version to run on videohelp.com. I’ve tried ffmpeg with AVIs and MP4s, but it should work for many other file formats as well.

Once you have ffmpeg downloaded, just run the following command line, substituting your file name and extension:


ffmpeg -sameq -i NAME.ext NAME.flv

Now that you have the FLV file, you need a nice viewer to use that allows people to pause your video and/or view it in full screen mode. I found a free open source one called JW Player. Instead of using the embedding method it provides, I wrote a somewhat custom one. Here’s how to get it working:

Step 1: download JW Player

Step 2: Copy swfobject.js and player.swf to the directory you will be using

Step 3: Use the following html on your web page:

1
2
3
4
5
6
7
8
9

	<p id="player1">Please install the Flash Plugin</p>
 
	<script type='text/javascript' src='swfobject.js'></script>
	<script type='text/javascript'>
		var flashvars = { file: 'NAME.flv', autostart:'true', provider: 'http' };
		var params = { allowfullscreen:'true', allowscriptaccess:'always', wmode:"transparent" };
		var attributes = { id:'player1', name:'player1' };
		swfobject.embedSWF('player.swf','player1','WIDTH','HEIGHT','9.0.115','false', flashvars, params, attributes);
	</script>

Replace NAME.flv with your file name, and WIDTH/HEIGHT with the initial width/height values.

That’s it! Lather, rinse, and repeat for each video you want to show.

Update 1/3/11:
If you find that many of the people viewing your videos have slow connections, you may want to play with the bufferlength parameter by changing the following line and adding a buffer time in seconds:

1

var flashvars = { file: 'NAME.flv', autostart:'true', provider: 'http', bufferlength: 30};