Spark VideoDisplay with long wait high CPU usage in Google Chrome (and Opera)

Question

I've created a Flex website that plays a video using the Spark VideoDisplay component. When selected, the VideoDisplay loads in the PopUpManager.

This works fine in all the browsers, except Google Chrome take significantly longer to start playing, during which the CPU usage peaks, then goes back down once video starts playing.

I've traced the player states it goes through and they are as follows:

1. Loading
2. ready (hangs for ages with high cpu)
3. buffering
4. playing (immediately after buffering, CPU usage goes down, video plays smoothly)

What could be causing this to temporarily hang for so much longer in Chrome? I thought I could expect the same functionality and behaviour throughout all the browsers, as Flash is simply a plugin that runs as a separate process?

Thanks!

Edit: It seems that it's the same in Opera too. Is there any commonality between the two that would explain this behaviour?

Edit 2: Thanks for your reply, here's the relevant code:

MXML:

    <s:Group id="videoPopup"
             click="closePopupHandler(event)">

        <s:Rect width="100%" height="100%">
            <s:fill>
                <s:SolidColor color="#2a2a2a"/>
            </s:fill>
        </s:Rect>

        <spinner:Spinner id="spinner" 
                         tickColor="#ffffff"
                         horizontalCenter="0" verticalCenter="0"/>

        <s:VideoDisplay id="videoDisplay" width="100%" height="100%"
                        updateComplete="videoDisplay_updateCompleteHandler(event)"
                        mediaPlayerStateChange="videoDisplay_mediaPlayerStateChangeHandler(event)"
                        complete="videoCompleteHandler(event)"/>

        <graphics:CloseButton id="closeVideoButton" visible="false" width="60" height="60" top="10" right="10"/>

        <s:Label id="videoCredit" text="Filmed &amp; produced by Engine Creative"
                 bottom="25" right="10" alpha="0"
                 fontFamily="HelveticaEmbedded" fontSize="11" color="#cccccc"/>

    </s:Group>

Initiating actionscript:

                        PopUpManager.addPopUp(this.videoPopup, FlexGlobals.topLevelApplication as DisplayObject, true);
                        videoPopup.width = Math.min(1280, stage.stageWidth * 0.9);
                        videoPopup.height = Math.min(720, stage.stageHeight * 0.9);
                        PopUpManager.centerPopUp(this.videoPopup);

                        hidePlayOverlay.play();
                        showVideoCredit.end();
                        spinner.play();
                        showCreditTimer.addEventListener(TimerEvent.TIMER_COMPLETE, showCredit);
                        showCreditTimer.reset();
                        showCreditTimer.stop();             

                        if(!videoDisplay.source || videoDisplay.source != _asset.source)
                            videoDisplay.source = _asset.source;

                        videoDisplay.seek(0);
                        videoDisplay.play();

And relevant event handlers:

        protected function videoDisplay_updateCompleteHandler(event:FlexEvent):void
        {
            Debug.log("video update complete");
            if (videoDisplay.videoObject)
                videoDisplay.videoObject.smoothing = true;
        }

        protected function videoDisplay_mediaPlayerStateChangeHandler(event:MediaPlayerStateChangeEvent):void
        {
            Debug.log("player state: " + event.state);

            showCreditTimer.reset();
            if (event.state == MediaPlayerState.PLAYING)
            {
                showCreditTimer.start();                    
                showCloseButton();
                spinner.stop();
            }                   
        }

Thanks again!

Answer 1

Hardware acceleration is partially supported by default if you have a supported GPU. If you want full 3d support, you need to use StageVideo and need to set the 'wmode' param in html to 'direct'. You should read up more on it.