SemanticMetadata.net

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?

• 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
  

Creating Mosaic Images with LIRe

As 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: