Flex: Dynamically create a preview image for a video

Question

I'm using the VideoDisplay to play flv's, mov's, and mp4's and everything is working great. They are all being loaded via progressive download and are not being streamed. What I'd like to do is to grab a single specified frame (like whatever is being shown at the 10 second mark), convert it to a bitmap and use that bitmap as the preview image for the video. I'd like to do this at runtime so I don't have to create a preview image for every video that would be shown.

Any idea's on how to do this? I'd rather not fake it by playing it - seeking for that specific frame and then pausing it but I may have no other choice?

Answer 1

Ryan and James are correct -- the right way's probably to extract frames at upload/transcode-time. But if that's not an option, you could opt for using some sort of a default/placeholder image of your own (something generic or somehow suitable for all videos whose thumbs haven't yet been captured), and just use VideoDisplay's DisplayObject-ness to grab and then upload a frame to your server, e.g.:

<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, it's perhaps not the most elegant solution, but it certainly works. This way, the first user sees the generic image, but every user thereafter gets the generated thumbnail. (Which, of course, you'll have uploaded and properly associated by then.) Make sense?

Answer 2

I'm pretty sure this isn't possible. It may well be... but don't think so. I think the only way to load in video is to use the NetStream and NetConnection object, which as you know just kicks off the loading of the video.

If this is user generated video i think the best bet is to have some serever side script that generates the preview image. Have no idea how this is done but think this is how most clip sites work.

If all the videos are in your control it may be possible to write a script for one of the video editing programs to automate generating the image for a specific frame from a list of files. I think this is probably your best route as alternative that you could get up and running quickly.

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