Clearing the video on a Flex VideoDisplay control

I posted this in response to a forum question the other day and thought I’d share the code here.

The following example shows you how you can clear a VideoDisplay control’s content using the videoPlayer property in the mx_internal namespace.

Full code after the jump.

Option 1: Call the videoDisplay.mx_internal::videoPlayer.clear() method directly from our MXML file:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/15/clearing-the-video-on-a-flex-videodisplay-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical">

    <mx:VideoDisplay id="videoDisplay"
            source="http://www.helpexamples.com/flash/video/cuepoints.flv" />

    <mx:Button label="pause"
            click="videoDisplay.pause();" />
    <mx:Button label="clear"
            click="videoDisplay.mx_internal::videoPlayer.clear();" />

</mx:Application>

View source is enabled in the following example.

Option 2: Extend the VideoDisplay class in ActionScript, and add a custom clear() method which calls the mx_internal::videoPlayer.clear() method:

package {
    import mx.controls.VideoDisplay;
    import mx.core.mx_internal;

    public class MyVideoDisplay extends VideoDisplay {
        public function MyVideoDisplay() {
            super();
        }

        public function clear():void {
            pause();
            mx_internal::videoPlayer.clear();
        }
    }
}

Then, in our MXML file, we simply add our MyVideoDisplay custom component and call our clear() method directly:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/15/clearing-the-video-on-a-flex-videodisplay-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:custom="*"
        layout="vertical">

    <custom:MyVideoDisplay id="myVideoDisplay"
            source="http://www.helpexamples.com/flash/video/cuepoints.flv" />

    <mx:Button label="clear"
        click="myVideoDisplay.clear();" />

</mx:Application>

View source

Option 3: Create a custom component in MXML that extends the VideoDisplay control. Again, we add our own custom clear() method which calls the mx_internal::videoPlayer.clear() method:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/15/clearing-the-video-on-a-flex-videodisplay-control/ -->
<mx:VideoDisplay xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            import mx.core.mx_internal;

            public function clear():void {
                pause();
                mx_internal::videoPlayer.clear();
            }
        ]]>
    </mx:Script>

</mx:VideoDisplay>

View source

Tagged as: clear(), mx internal, videoPlayer