Posting Flash Videos with FFmpeg and FlowPlayer

Jul 27 2006

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.

41 Comments

Tom on 28 Jul 2006 at 9:35 am #

So will we get to see videos of you performing Satriani’s songs soon?
scotty on 28 Jul 2006 at 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 :)
mike on 2 Aug 2006 at 11:07 pm #

nice tutorial

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

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

el_salmon on 11 Aug 2006 at 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

scotty on 11 Aug 2006 at 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.
ryan H on 31 Aug 2006 at 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!
scotty on 31 Aug 2006 at 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…
Pingback: Batch encode video for iPod under Linux | SYP
Pingback: Anthony Dahanne’s blog » Blog Archive » Convertir ses vidéos avec Linux
Anthony on 28 Sep 2006 at 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 !
Mike on 1 Nov 2006 at 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
scotty on 1 Nov 2006 at 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.
SiMomma on 16 Nov 2006 at 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!
SiMomma on 16 Nov 2006 at 11:02 am #

Sorry, this is the correct url…

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

please help, thanks!
scotty on 16 Nov 2006 at 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″.
Pingback: Vie de Malchance
zucker on 20 Jan 2007 at 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 . . .
angelo on 22 Jan 2007 at 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
Belf on 16 Feb 2007 at 9:00 pm #

install mp3lame with ffmpeg
Designer on 24 Mar 2007 at 1:40 am #

can someone help me install ffmpeg on my godaddy linux hosting.
Pingback: log.446b.org » Flash Videos kostenlos erzeugen
Jan on 15 May 2007 at 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…
alif on 22 Jun 2007 at 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
Jimbo on 25 Jun 2007 at 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
Jag on 30 Oct 2007 at 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
jim on 12 Nov 2007 at 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.
Pingback: techblog » Blog Archive » First flash video (using ffmpeg flowplayer)
Pingback: Convert MPEG video to Flash | Barry’s Tsewdry
mike on 15 Mar 2008 at 1:01 pm #

i dont see flowplayer.swf in the unzip file i have version 2.0.1
renato gallo on 19 May 2008 at 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 ?
Marlon on 3 Jun 2008 at 1:07 am #

Thanks for this resource. I was able to get my video up and running in no time at all. Great writeup
mike.e on 22 Jun 2008 at 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.
Vince Julier on 2 Dec 2008 at 3:45 am #

Hi

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!
joe on 6 Feb 2009 at 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
phim online on 11 Feb 2009 at 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 :)
netpoint on 19 Mar 2009 at 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
Pingback: Video editing with Linux - J-Doc
VideoTester on 21 Apr 2009 at 7:43 pm #

yamdi – Yet Another MetaData Injector for FLV
is better than FLVTool2. Does not need RUBY, uses less memory and is faster.
mohamed on 20 Jun 2009 at 6:08 am #

if i need to make it autmaticaly from php i would use exec function?
vismundo on 5 Aug 2009 at 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
dharin on 2 Sep 2009 at 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…

Scott Yang's Playground