Last night I have posted my very first flash video on the web — and it was Anna sitting there watching, her own video for 2 minutes (which probably would only interest the parents and grand-parents). Anna’s video aside, I was also having fun figuring out getting that video online.
There are many ways putting videos online. You can either:
- Upload your AVI/QuickTime/WMV files onto a folder somewhere inside your hosting account.
- Use a third party video hosting service like Google Video or YouTube.
Personally I don’t like (2). You need to upload your videos to that 3rd party, and you have little control over how the final outcome will be encoded (bit rate, frame rate, quality, etc). Moreover, there are terms and conditions that you need to read through, let along agreeing to. At the end, who owns the rights to uploaded video?
Being a control freak (well, only over the systems that I need to manage), I have always preferred option (1) by hosting video files inside my own accounts, which has some crazy amount of space and data transfer anyway. Except you don’t get that nice Flash applet which you can embed into your own pages, so visitors can <click> and watch the video without leaving the page. They don’t need to worry about saving onto the desktop, which media player to use, whether codec has been installed, etc. They Just WorksTM — perfect for the grand-parents :)
With a bit of time wasted on research and mocking around, it turns out that you can easily achieve the effect of embedded flash video, and yet host the video files on your own server. And there’s zero penny you need to spend — all can be done via these open source software, FFmpeg and FlowPlayer.
Here’s a summary of what needs to be done.
- Convert the video file into a suitable format for Flash players.
- Upload the converted file onto hosted account.
- Upload the Flash player if hasn’t been done.
- Paste HTML code snippet into the web page.
Flash players can only play video files encoded into the FLV (Flash Video) format, which is also the format used by Google Video and YouTube. To do so the open source way is use the universal encoder, FFmpeg.
Installing FFmpeg is trivial — at least on my Gentoo boxes :) Make sure appropriate
USE flags are used during emerge. For example I have:
USE="aac amr encode ogg vorbis x264 xvid zlib" emerge ffmpeg
Other Linux distribution? Not using Linux? Err. Good luck.
To convert a movie using FFmpeg, do the following:
$ ffmpeg -i movie.avi movie.flv
It will then convert the AVI file into FLV Flash Video. FFmpeg can also handle many different container types, for example QuickTime, WMV1 (not WMV3 at the moment), MPEG4, etc, so just throw the video at it and see whether it handles it.
There are many command line options that you can use to alter the encoding behaviour. For example if I wish to rescale the movie to 320×240, with 15 frame/sec, at video at 250kbps and audio down-sampling to 22,050Hz at 48kbps, I just tell FFmpeg to do it on the command line:
$ ffmpeg -i movie.avi -s 320x240 -r 15 -b 250 -ar 22050 -ab 48 movie.flv
There are many more options so do check out their manual if you are interested.
There is another thing that we need to do — create a JPEG thumbnail for previewing. This will be displayed in the otherwise empty canvas of the flash player, before [Play] is pressed. For convenience sake, we’ll take the very first frame of the video.
$ ffmpeg -i movie.avi -f mjpeg -t 0.001 movie.jpg
FLVTool2 is needed to calculate and update meta data in the FLV file. Well, you don’t really need it as you can already play the FLV file spill out from FFmpeg, but because of the missing info, Flash player cannot show the buffering status and current playing position, etc.
I was hesitated to install FLVTool2 because (1) it depends on Ruby which I need to emerge (2) it does not have an
ebuild for it. But anyway, having it running is still trivial.
- Make sure you already have Ruby installed.
- Download the latest FLVTool2
- Unpack the tarball, change into its directory, and run
ruby setup.rb allas root.
Now just run
$ flvtool2 -U movie.flv
Well, installation is actually optional. You can pretty much run FLVTool2 from inside its unpacked directory, for example.
$ RUBYLIB=lib ruby bin/flvtool2 -U <path to>/movie.flv
Your FLV is ready to go! Upload both FLV and generated JPEG thumbnail onto your web hosting account. Make sure they are in the same folder.
Unpack the ZIP will give you the player file
FlowPlayer.swf. Upload it somewhere on your website.
Now you need to cut and paste this HTML code snippet onto the web page you wish to show the video:
<object type="application/x-shockwave-flash" data="[your site]/FlowPlayer.swf" width="320" height="263" id="FlowPlayer"> <param name="allowScriptAccess" value="sameDomain"/> <param name="movie" value="[your site]/FlowPlayer.swf"/> <param name="quality" value="high"/> <param name="scale" value="noScale"/> <param name="wmode" value="transparent"/> <param name="flashvars" value="baseURL=[base URL]&videoFile=movie.flv &autoPlay=false&loop=false&autoBuffering=false &splashImageFile=movie.jpg"/> </object>
[your site] is the URL to where you keep the
[base URL] is the directory where you keep the FLV and JPEG files. For example, the final URL to FLV file will be
Paste that onto your website, or into your blog post, and check whether it works!
Please check FlowPlayer documentation on the options going to
In fact those steps can be easily automated with a bit of scripting. I shall be posting more movies on Anna’s website.
If your hosting companies are not very generous quota (i.e. small timers who can’t really oversell), or if you think your video will get digged and slashdotted and become overnight hit, then maybe having Google Video or YouTube to host for you is a wiser idea, just in case a huge hosting bill landing on your credit card statement.
Otherwise, you might choose to host those videos on your own account, and regain a bit of control.