Since Adobe Flash Player 9 Update 3Flash can play back MP4 files with H.264 video and AAC audio streams [see here], so we can just focus on this one. First step is to get a ffmpeg version compiled with libx264 and libfaac. You might check this on the command line, just execute ffmpeg without parameters:

FFmpeg version SVN-r16573, Copyright (c) 2000-2009 Fabrice Bellard, et al.
configuration: [...] –enable-libfaac –enable-libgsm –enable-libx264 [...]

The bold ones should be there to support the needed codecs. I used FFmpeg Revision 16537 from this page, which works fine.

If the libraries are there you can proceed to the next step:

ffmpeg -i <inputfile> -b 1024k -vcodec libx264 \\
-acodec libfaac -ab 160k <output.mp4>

This converts your input file to the needed mp4 file. You can also change the size of the file with the switch “-s”, like for instance “-s 320×240″. Take a close look on the switches “-b” and “-ab” which define video and audio bitrate. If the sum of both bitrates is too high for the network the user will not be able to watch the video smoothly.

One might think s/he’s finished, but no … unfortunately progressive download doesn’t work with too many mp4 files. The file index (an atom == “mp4 metadata unit”) containing the file index (== the description where the video and the audio stream are located in the file and how they are stored) is at the end of the MP4 file. So the flash player has to download the whole file before starting the playback, ka-ching!

Fortunately there is an ffmpeg tool called qt-faststart (linux users will find it in the tools folder of ffmpeg) moving the index from end to start. For windows user a precompiled binary can be found here. Use this to move the metadata:

qt-faststart <infile.mp4> <outfile.mp4>

Now you are done with the file. Use for instance the JW FLVPlayer setup wizard to create an HTML snippet. Note that in height you have to add 19 pixels to your video dimensions, as this is the height of the control bar of the player

Now for the meat: How to get your AVC files into a web page?

• Encode your video file. Use MediaCoder or any other tool to create an iPod or PSP compatible video. Take care that you select AVC for your target codec. It’s called MPEG-4 AVC in the PSP as well as in the iPod extension of Mediacoder for example (see screenshot).
• Download the FLV Mediaplayer and unzip it somewhere.
• Create a website where your video should be played and move the FLV Mediaplayer along with associated files and the video in a subdirectory of the page’s directory.
• Use the setup wizard to create the code for embedding your player.
  • Select “Mediaplayer with a single FLV”
  • Source: [relative subdirectory]/mediaplayer.flv
  • Fill in width & height (you chose it in your encoding tool)
  • Put down the path to the .mp4 file
• Copy the resulting code to your web page and test it in a browser

That’s the easiest way to present a video. More sophisticated methods include streaming or configuring the player with JavaScript. You can also add playlists, show a logo and jump to timepoints.

Related Links

•  Here is also a tutorial on how to embed the mediaplayer on your page
  

So how can one make such an mosaic image: (i) A first step is to select an input image. (ii) Then configure the number of tiles per row and column of the mosaic. (iii) Click “Start” to run the mosaic  engine. (iv) After some processing time, which can be rather long depending on the number of tiles and the size of the input image you will see the result. (v) Save using the button on the bottom right corner.

For visual people I’ve put together a flash tutorial: