Video TimeSlicer: Generate Multiple Thumbnails from a Video Using Flex and ImageSnapshot
At The Iona Group we have hundreds, probably thousands of videos that we have shot or somehow acquired from client asset libraries, etc. These videos are stored and logged in a pretty big legacy database (Don’t laugh, I think it’s Access). We also have some clients where stored their video assets in a big fat digital asset management system, (DAM) (One in Cumulus, the others proprietary, I believe). These tools make it easier to access the vast array of clips, tapes, etc. we have amassed over the years. Often though, all we have in the record or DAM is one lonely thumbnail image, some timecode info, the log notes about content, acquisition information (date, location, shooter, etc) and maybe, if we are lucky, a short preview clip. This makes selecting stuff for B-Roll or determining what archival footage might be needed a bit tough. Certainly time consuming, too.
This little experiment was a step towards trying to get around that by making a little utility that can take a video (currently FLV, but hopefully H.264 very soon, more on that in a moment.), timeslice it and generate the image previews that might mean the difference between a few minutes of scanning some autogenerated thumbs and several hours of digging through tapes. Storing tons of video footage on our network would be impractical, but an assortment of stills, no problem. I have the beginnings of such a utility I’d like to share as a link, but soon I hope to add to it. With Flash Player 10 on the scene and the enhanced FileReference stuff in there, I probably don’t need PHP’s GD Library as I had originally planned, so sometimes waiting just a bit actually pays off. I learned a bit while I was making my SWFShot app, too, so I’ll probably use the AS3CoreLib’s JPGEncoder to save images out of this.
The cool part of this was learning a bit more about the ImageSnapshot class (I had never worked with it before, but I am having a lot of fun with it.), and also learning about some flakiness I uncovered in the VideoDisplay component (moral of the story, don’t set or mess with the autoPlay attribute on the player, it really dinks things up). I also got a pretty good shot to learn about Flash’s handling of H.264 (H.264 clips lack a lot of useful metadata in them that I have come to rely on that are in FLV files ‚Äì which does change things, for better or worse, when working with video in Flash).
Once I have a bit more time I may connect the app to an existing DAM we have via some services, but for now, some things have popped up that will prevent me from putting real hours towards this. Check it out, view source is enabled, I actually recommend you don’t bother watching it online, as I haven’t quite got all the quirks of the VideoDisplay component ironed out for suitable online play when used in conjunction with the snapshot creation process. It’s really meant for desktop or LAN use anyway, as it it will probably end up as an AIR app when I finally get more time to iron things in it out and add image saving to it. I recommend you just download the Zip file and start messing around with it.
The video is “The Heart Races” by Architecture in Helsinki. Thanks to Mark Tovey, my cube mate who helped me work through some issues I was having with this. He’s pretty good.
He has a blog he’s starting up, I’m working on getting him posting. He has some really cool mashup stuff he’s working on. Here’s your nudge, Mark.
Let me know if you find the code useful. It’s a bit of amess really, but I’ve had it sitting around for a few weeks now, and if I don’t publish it now, I might not ever. You know how it is.
Posted on May 26, 2008


My del.icio.us




![[del.icio.us]](http://visualrinse.com/wp-content/plugins/bookmarkify/delicious.png)
![[Digg]](http://visualrinse.com/wp-content/plugins/bookmarkify/digg.png)
![[dzone]](http://visualrinse.com/wp-content/plugins/bookmarkify/dzone.png)
![[Facebook]](http://visualrinse.com/wp-content/plugins/bookmarkify/facebook.png)
![[Google]](http://visualrinse.com/wp-content/plugins/bookmarkify/google.png)
![[Newsvine]](http://visualrinse.com/wp-content/plugins/bookmarkify/newsvine.png)
![[Reddit]](http://visualrinse.com/wp-content/plugins/bookmarkify/reddit.png)
![[StumbleUpon]](http://visualrinse.com/wp-content/plugins/bookmarkify/stumbleupon.png)
![[Technorati]](http://visualrinse.com/wp-content/plugins/bookmarkify/technorati.png)
![[Twitter]](http://visualrinse.com/wp-content/plugins/bookmarkify/twitter.png)
![[Yahoo!]](http://visualrinse.com/wp-content/plugins/bookmarkify/yahoo.png)
jvc May 26
in my experience as3corelib’s pngencoder is much faster. try that one first
Chad May 26
yeah, I have found that, too… Jpg is a little more widely understood by various apps that might need to view the thumbs and they will take up less space on the server than png.
Pol Jun 5
Thanks for this. Good reading (should be obvious for most) nice that its been addressed.
Dan Jun 22
Thats a slick app…nicely done.