Category Archives: Flash

Converting video for flash video players to H.264/AAC

Have you ever tried to put a video online? Well actually it is quite easy if you user YouTube. No matter what codec you use you have a good chance to get a decent result. If you want to host the video yourself you basically need a flash video player (assuming that flash is the most widely spread tool on multiple platforms) like the JW FLVPlayer. Finally you’ll need to get your video file to a format flash can play using progressive download (which means you can watch it while downloading, just like on YouTube).

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 😀

Presenting MPEG-4 AVC / H.264 Videos on the Web with Flash 9

While Adobe Flash (former Macromedia Flash) managed to take the top position of WWW based tools for watching video it was stuck with these flv video files for a long time. With version 9 now H.264 (or AVC as it is called in context of MPEG-4) encoded videos are supported along with popular container formats like mp4, mov or 3gp. Or in short words: Flash can now play iPod and PSP videos.

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

  • ipod-extension-mediacoder.pngEncode 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

Creating Mosaic Images with LIRe

mosaic-example.pngAs already noted in the last post, LireDemo – the Swing based demonstrator of the capabilities of the LIRe library – includes now a mosaic creation option. So what actually is the mosaic? Let’s explain it this way: You have one input image, which should be resented through multiple other images (in the index). The mosaic image tries to look like the input image but replaces segments of the input image with images from the index. The example in above image shows the input image left and the mosaic on the right hand side (click for a larger version). Special thanks got to Lukas Esterle and Manuel Warum, who contributed the mosaic-engine!

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:

demo-screenshot.png