Flex: dynamically creates a preview image for video

Question

I use VideoDisplay to play flv, mov and mp4 and everything works fine. All of them are loaded using progressive loading and are not streamed. What I would like to do is to capture one specified frame (for example, everything that appears on the 10 seconds mark), convert it to a bitmap and use this bitmap as a preview image for the video. I would like to do this at runtime, so I don’t need to create a preview image for every video that will be shown.

Any idea on how to do this? I would prefer not to fake it while playing it - it searches for this particular frame and then stops it, but I may have no other choice?

Answer 1

Ryan and James are true - the correct way is probably to extract frames at boot / recode. But if this is not an option, you can choose to use your own default image / placeholder (something common or somehow suitable for all videos whose thumbs have not been shot yet), and just use DisplayDobject-VideoDisplay to capture, and then upload the frame to your server, for example:

<mx:Script> <![CDATA[ var captured:Boolean; private function creationCompleteHandler(event:Event):void { videoDisplay.source = "http://yourserver/yourvideo.flv"; } private function videoDisplay_playheadUpdate(event:VideoEvent):void { if (!captured && videoDisplay.playheadTime >= 10) capture(); } private function capture():void { var bmpData:BitmapData = new BitmapData(videoDisplay.width, videoDisplay.height); bmpData.draw(videoDisplay); captured = true; // Now just upload the byte array to your server for the next user var loader:URLLoader = new URLLoader(); loader.dataFormat = URLLoaderDataFormat.BINARY; // ... etc. } ]]> </mx:Script> <mx:VideoDisplay id="videoDisplay" playheadUpdate="videoDisplay_playheadUpdate(event)" /> 

Again, this may not be the most elegant solution, but it certainly works. Thus, the first user sees the overall image, but each user after that receives the generated thumbnail. (Which, of course, you will be loaded and properly connected by then.) Do you make sense?

Answer 2

I am sure this is not possible. It may be ... but do not think so. I think the only way to download video is to use the NetStream and NetConnection object, which, as you know, just starts downloading the video.

If this is a user-created video, I find it best to have some part of a serever script that generates a preview image. I don’t know how to do this, but I think that most click sites work this way.

If all the videos are under your control, it may be possible to write a script for one of the video editing programs to automate the generation of the image for a specific frame from the file list. I think this is probably your best route as an alternative so you can get up and run quickly.

Sorry for the vague answer ... it can point you in the right direction if you need a quick solution.

Answer 3

I agree with James, the only way to do this is to do it from the server side of the script and pull certain frames from the video. Even if you can do it with flex, you really would not want to put a burden on it (which would be more intense than I thought) on the client machine. Not to mention the fact that it will be much more efficient to create an image before the start of the game than to flexibly determine the thumbnail to display at each load.