Flex Examples

The other day I was playing with the VideoDisplay control in Flex and was curious why my simple test cases were not working. Well, as it turns out, my remote server wasn’t available so the Flash Video (FLV) couldn’t be loaded. So I quickly typed up the following code to listen for the stateChange event to see if my VideoDisplay control was getting into the dreaded connectionError state (represented by the VideoDisplay.CONNECTION_ERROR constant).

Full code after the jump.

The following example listens for the stateChange event to determine if the VideoDisplay control entered the VideoEvent.CONNECTION_ERROR state:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/07/23/detecting-a-connection-error-when-loading-an-flv-with-the-videodisplay-control/ -->
<mx:Application name="VideoDisplay_stateChange_connectionError_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white" >    

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.VideoEvent;

            private function videoDisplay_stateChange(evt:VideoEvent):void {
                switch (evt.state) {
                    case VideoEvent.CONNECTION_ERROR:
                        evt.currentTarget.visible = false;
                        Alert.show(evt.currentTarget.source, "Unable to connect to video");
                        break;
                }
            }
        ]]>
    </mx:Script>

    <mx:VideoDisplay id="videoDisplay"
            source="http://www.helpexamples.com/flash/video/404.flv"
            stateChange="videoDisplay_stateChange(event);" />    

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/07/23/detecting-a-connection-error-when-loading-an-flv-with-the-videodisplay-control/ -->
<mx:Application name="VideoDisplay_stateChange_connectionError_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">    

    <mx:Script>
        <![CDATA[
            import mx.controls.VideoDisplay;
            import mx.controls.Alert;
            import mx.events.VideoEvent;

            private var videoDisplay:VideoDisplay;

            private function init():void {
                videoDisplay = new VideoDisplay();
                videoDisplay.addEventListener(VideoEvent.STATE_CHANGE,
                            videoDisplay_stateChange);
                videoDisplay.source = "http://www.helpexamples.com/flash/video/404.flv";
                addChild(videoDisplay);
            }

            private function videoDisplay_stateChange(evt:VideoEvent):void {
                switch (evt.state) {
                    case VideoEvent.CONNECTION_ERROR:
                        evt.currentTarget.visible = false;
                        Alert.show(evt.currentTarget.source, "Unable to connect to video");
                        break;
                }
            }
        ]]>
    </mx:Script>

</mx:Application>