Posting Flash Videos with FFmpeg and FlowPlayer

Anna showing on FlowPlayer 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 3^rd 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 Works^TM — 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.

The Basis

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.

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

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 all as 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.

FlowPlayer

FlowPlayer is an open source Flash video player that is light-weight (at around 22kb), and pretty easy to configure. Download the latest version from SourceForge.

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]&amp;videoFile=movie.flv
    &amp;autoPlay=false&amp;loop=false&amp;autoBuffering=false
    &amp;splashImageFile=movie.jpg"/>
</object>

[your site] is the URL to where you keep the FlowPlayer.swf. [base URL] is the directory where you keep the FLV and JPEG files. For example, the final URL to FLV file will be [base URL]/movie.flv.

Paste that onto your website, or into your blog post, and check whether it works!

Please check FlowPlayer documentation on the options going to flashvars.

Conclusion

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.

Category: General | Thu, 27 July 2006 11:28 pm

Tags: Linux, Open Source, Video, Webmastery

Links to This Article

Thu, 31 August 2006 11:50 am
Batch encode video for iPod under Linux | SYP
Thu, 28 September 2006 5:42 am
Anthony Dahanne’s blog » Blog Archive » Convertir ses vidéos avec Linux
Fri, 17 November 2006 1:55 pm
Vie de Malchance
Fri, 27 April 2007 2:17 am
log.446b.org » Flash Videos kostenlos erzeugen
Mon, 19 November 2007 10:24 pm
techblog » Blog Archive » First flash video (using ffmpeg flowplayer)
Wed, 9 January 2008 5:29 pm
Convert MPEG video to Flash | Barry’s Tsewdry
Wed, 8 April 2009 1:35 am
Video editing with Linux - J-Doc

Comments

Posted by Tom on Fri, 28 July 2006 9:35 am

So will we get to see videos of you performing Satriani’s songs soon?

Posted by scotty on Fri, 28 July 2006 9:48 am

Sure.

I can play the Satch song in the background off a track, and do air guitar improvisation on top of that. Won’t be that much fun watching it though :)

Posted by mike on Wed, 2 August 2006 11:07 pm

nice tutorial

I just built a GUI for OS X (with flv tool):

http://kunden.allink.ch/flv/FLVConverter.dmg

Posted by el_salmon on Fri, 11 August 2006 9:12 pm

Hi,

I’m trying to play FLV videos in my Gentoo laptop but ffplay doesn’t recognize this format. I have different use flags in my Gentoo:

$ equery uses ffmpeg [ Searching for packages matching ffmpeg... ]
[ Found these USE variables for media-video/ffmpeg-0.4.9_p20051216 ]
 U I
 - - a52      : Enables support for decoding ATSC A/52 streams used in DVD
 + + aac      : Enables support for MPEG-4 AAC Audio
 - - altivec  : Adds support for optimizations for G4 and G5/ppc970 processors
 - - debug    : Tells configure and the makefiles to build for debugging. Effects vary across packages, but generally it will at least add -g to CFLAGS. Remember to set FEATURES=nostrip too
 - - doc      : Adds extra documentation (API, Javadoc, etc)
 - - dts      : Enables libdts (DTS Coherent Acoustics decoder) support
 + + encode   : Adds support for encoding of audio or video files
 - - ieee1394 : Enable FireWire/iLink IEEE1394 support (dv, camera, ...)
 + + imlib    : Adds support for imlib, an image loading and rendering library
 + + mmx      : Adds support for optimizations for Pentium MMX and Athlon class processors
 - - network  : Enables network streaming support
 + + ogg      : Adds support for the Ogg container format (commonly used by Vorbis, Theora and flac)
 - - oss      : Adds support for OSS (Open Sound System)
 + + sdl      : Adds support for Simple Direct Layer (media library)
 - - test     : Workaround to pull in packages needed to run with FEATURES=maketest / FEATURES=test
 - - theora   : Adds support for the Theora Video Compression Codec
 - - threads  : Adds threads support for various packages. Usually pthreads
 + + truetype : Adds support for FreeType and/or FreeType2 fonts
 - - v4l      : Enables video4linux support
 + + vorbis   : Adds support for the OggVorbis audio codec
 + + xvid     : Adds support for xvid.org's open-source mpeg-4 codec
 + + zlib     : Adds support for zlib (de)compression

Thank you in advanced for your help

Posted by scotty on Fri, 11 August 2006 9:23 pm

You should be able to use the latest VLC player to play FLV files. mplayer works as well but personally I prefer VLC.

I am currently using ffmpeg 0.4.9_p20060302. Sorry I did notice that I have ffmpeg unmasked in package.keywords file.

Posted by ryan H on Thu, 31 August 2006 1:20 am

how do you install ffmpeg exactly?

I am very novice – and i hosted my site with godaddy and 1and1
i believe they have ssh access

how do i get going at about there ?

thanks in advance!

Posted by scotty on Thu, 31 August 2006 11:38 am

Hi Ryan,

If you are running Linux, then it should come with your distribution. On Gentoo it is just a matter of emerge ffmpeg.

If you are on Mac OS X, you can install ffmpeg via Fink.

Not sure if you are on Windows…

Posted by Anthony on Thu, 28 September 2006 6:42 am

Hi !
Just to say that I really loved your tutorial (it helped me a lot) and I’ve authorized myself to translate it in french on my blog.(without asking you, shame on me,–> feel free to ask me to remove it if you want to)
You can check it out at :

http://blog.dahanne.net/2006/09/11/convertir-ses-videos-avec-linux/

Actually, this article is about video converting on linux, I’m talking about converting to flash in the last chapter “Convertir une video avec FFMPEG pour la lire sur le web avec un player flash”

Thanks again !

Posted by Mike on Wed, 1 November 2006 2:59 pm

I found this useful. It works fine on the local PC in a test page but when i try and paste the code into the HTML window in wordpress it gets truncated at the start of “param”. I tried a couple of different posts and all were the same. I note that you use wordpress – did you use the HTML editor to load the code ?

Thanks

10.

Posted by scotty on Wed, 1 November 2006 3:10 pm

Mike,

Try to join all the lines together to form one long line. I found WordPress puts paragraph and line break tags at incorrect places.

11.

Posted by SiMomma on Thu, 16 November 2006 11:00 am

What am I doing wrong?

It just buffers forever and never plays. How can I verify my path to the .flv is correct?

Here is my code…

See http://www.silasoverhalser.com

I verified the flowplayer.swf and myvideo.flv is in the exact same location.

Thanks!

12.

Posted by SiMomma on Thu, 16 November 2006 11:02 am

Sorry, this is the correct url…

http://www.silasoverhalser.com/FlowPlayer.html

please help, thanks!

13.

Posted by scotty on Thu, 16 November 2006 11:10 am

SiMomma – maybe something wrong with your FLV file? When I tried to dwonload your FLV file it is only 2 bytes saying “52″.

14.

Posted by zucker on Sat, 20 January 2007 1:16 am

Hello! I’m attempting to convert my Joomla site to drupal. One of my merchants provides .swf files for their advertising. I’ve read your posts on displaying .flv files, but unfortunately, I am only provided the .swf. How can I display a .swf file on my drupal site?

Thank you in advance . . .

15.

Posted by angelo on Mon, 22 January 2007 12:27 pm

Helo

Plis, conver video AVI to FLV whit this comand:
ffmpeg -i S3010038.AVI -s 320×240 -r 15 -b 250 -ar 22050 -ab 48 f5aa89ed3bbf8f7d68232c6307955c68.flv

and step 2 is:

flvtool2 -U f5aa89ed3bbf8f7d68232c6307955c68.flv

… Ggrrrr my out file NOT AUDIO !!! why??? plis help my

16.

Posted by Belf on Fri, 16 February 2007 9:00 pm

install mp3lame with ffmpeg

17.

Posted by Designer on Sat, 24 March 2007 1:40 am

can someone help me install ffmpeg on my godaddy linux hosting.

18.

Posted by Jan on Tue, 15 May 2007 6:31 am

Helllo,

i’ve tested ffmpeg (packman-installation) and i’ve got bad results in quality when encoding .avi in .flv (q=31). What can I do to get better results? -sameq and -qscale 7 don’t help…

19.

Posted by alif on Fri, 22 June 2007 2:27 am

Nice guide, Just to make it a little quicker:
Once you install ruby you should be able to just use ruby gems to install:

gem install flvtool2

As root that is, so as I did in ubuntu:

sudo gem install flvtool2

The gem installs just like a regular application in the PATH so that you don’t have to be in any specific directory to run the program. Just run in any directory:

flvtool2 -U movie.flv

20.

Posted by Jimbo on Mon, 25 June 2007 11:43 am

Hiya,

What HTML code do I need to have several clips available on one player? I’ve been trying with flowplayer black – but with no joy. It only shows one.

Thanks,
Jim

21.

Posted by Jag on Tue, 30 October 2007 8:07 pm

this is very usefule blog for me to develop the site where the video was being played. but ffmpeg is giving error to convert 3gp to flv
Please help.
Thanks in advance

22.

Posted by jim on Mon, 12 November 2007 11:44 pm

thanks for your tutorial! because of your tutorial i am able to develop a site similar to youtube.

It is underway, almost finished. It has most of youtube feature plus some.

23.

Posted by mike on Sat, 15 March 2008 1:01 pm

i dont see flowplayer.swf in the unzip file i have version 2.0.1

24.

Posted by renato gallo on Mon, 19 May 2008 12:49 am

I have made my swf successfully… now how can i embed an url into it so that clicking on it would result in opening a web page ?

25.

Posted by Marlon on Tue, 3 June 2008 1:07 am

Thanks for this resource. I was able to get my video up and running in no time at all. Great writeup

26.

Posted by mike.e on Sun, 22 June 2008 7:06 pm

For those with wind$ws, WINFF is a GUI for FFMPEG.I find it to be VERY effective,even converting strangely encoded files.

27.

Posted by Vince Julier on Tue, 2 December 2008 3:45 am

I’ve just followed your tutorial and get a lovely picture of flowplayer on my website (which is still local to my computer at the moment). I’ve placed the video file in the same directory etc.. but I just get a great picture of flowplayer but its not picking up my movie. The file name is correct. Any ideas?

I’ve been trying all sorts of things, I’m sure there is something simple I’m getting wrong. Any help would be fab! Thank you!

28.

Posted by joe on Fri, 6 February 2009 9:23 am

hi, i need to convert .flv videos from utube back to .mpg videos online using ffmpeg and php so my visitors can download any utube video and play them in media player on there pc. i just need ffmpeg scripting. i will deal with the download php scripts
but cannot figure it out?
any advice?
thanks joe

29.

Posted by phim online on Wed, 11 February 2009 3:58 pm

woah, Joe, I dont think that is such a good idea.
First, your server has to be very strong to convert back and forth. and secondly, your bandwidth will be more than double, depend on how many users is downloading.

anyways, I will interested on what happen :)

30.

Posted by netpoint on Thu, 19 March 2009 2:09 am

How about subtitles?

How i can join subtitles (.srt) in the conversion:

ffmpeg -i movie.avi -s 320×240 -r 15 -b 250 -ar 22050 -ab 48 movie.flv

thank´s in advance

31.

Posted by VideoTester on Tue, 21 April 2009 7:43 pm

yamdi – Yet Another MetaData Injector for FLV
is better than FLVTool2. Does not need RUBY, uses less memory and is faster.

32.

Posted by mohamed on Sat, 20 June 2009 6:08 am

if i need to make it autmaticaly from php i would use exec function?

33.

Posted by vismundo on Wed, 5 August 2009 1:39 pm

Hey guy,

i’ve been looking the whole net for this, thx a lot. i am going to try it out now… =)

geets

34.

Posted by dharin on Wed, 2 September 2009 12:43 am

hi,
i am using flow player to see video i uploaded bu the video is played much faster then the audio for that video ( 4:40 minute of video completes in less then 40 seconds and the audio plays at usual rate ).

could you help me for this. i have used ffmpeg for conversion.

thank you in advance…

Add a comment

Gravatar is used. Email address is required but will not be displayed. Please keep your comment on topic. No spamming and/or bad language. First time poster will be moderated. Scott reserves the right to delete/edit your comments.

Scott Yang's Playground