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

20 thoughts on “Clearing the video on a Flex VideoDisplay control

  1. Why don’t you have to use

    use namespace mx_internal;

    or better yet, when do I have to use that statement.

    thanks for this tutorial btw. i was trying to clear a videodisplay yesterday.

  2. adam,

    Excellent tip! I totally forgot about the use namespace solution. It really could apply to any of the solutions above, but since pption 1 is probably the most easily copy-paste-able:

    <?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"
            verticalAlign="middle"
            backgroundColor="white" viewSourceURL="srcview/index.html">
    
        <mx:Script>
            <![CDATA[
                import mx.core.mx_internal;
    
                use namespace mx_internal;
            ]]>
        </mx:Script>
    
        <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.videoPlayer.clear();" />
    
    </mx:Application>
    

    Peter

  3. This was a great find to be able to clear out the VideoDisplay object. However, I have found that when your video has been encoded with an alpha channel, this clear method does not work. Anyone have any ideas of why this method would not work with transparent video?

  4. Hi Peter,

    Great article. One question if you could help, please?

    I am trying to play a flv file which is pushed from blazeDS server I am using Cairngorm/modelLocator to get the array of UploadVideo objects:
    UploadVideo.as
    public var videoName:String;
    public var video:ByteArray;

    in my mxml I declare a mx:List and assign the arrayCollection objects to my list’s dataProvider
    videosOfStudents = ArrayCollection() // of UploadVideo objects

    and this is my VideoDisplay component: (videoName is the name of the flv file)

    When I click cntlDisp.play(); I get a following error:
    (TypeError)#0
    errorID = 1009
    message = “Error #1009: Cannot access a property or method of a null object reference.”

    but when I add a flv file locally it works fine.

    Any idea?

    Thanks.

    Vardan

  5. Hi Peter,

    Sorry, some of my code did not appear properly because of the tags:

    UploadVideo.as
    public var videoName:String;
    public var video:ByteArray;

    videosOfStudents = ArrayCollection() // of UploadVideo objects
    mx:List id=”cntlMovie” dataProvider=”{modelLocator.videosOfStudents}” width=”300″

    mx:VideoDisplay id=”cntlDisp” source=”{cntlMovie.selectedItem.videoName}” width=”100%” height=”100%”

    The output I get is:
    (TypeError)#0
    errorID = 1009
    message = “Error #1009: Cannot access a property or method of a null object reference.”

    Thanks again.

    Vardan

  6. This tip is not working perfectly, I recommend instead, in order to clear the video, to use the visible property (with a Fade effect is terrible!).

    Moreover, use mx_internal stuff is not recommended since it can be remove for future versions of the framework.

    ——————————————————–
    eBuildy, the web2.0 specialists!

      1. setting a null source does not seem to have any effect either. I’m using a Video attached to a VideoDisplay (something like VideoDisplay.addChild(Video)

    1. Hi Jerome.

      Thanx for the idea, but in my code don´t work and I don´t now why.

      My code is this


      private function catchCam():void{

      this._vid=new Video();
      this._vid.width=320;
      this._vid.height=240;

      this.vd_Cam.addChild(this._vid);
      this.cam=Camera.getCamera(this.cbCam.selectedIndex.toString());

      if (!this.cam) {
      this._vid.attachCamera(null);
      this._vid.clear();
      }else{
      this._vid.attachCamera(this.cam);
      }
      }

      note: vd_Cam it´s a videoDisplay Object.

      The problem is that when execute
      this._vid.attachCamera(null);
      this._vid.clear();

      The camera never deatach of the videoDisplay Object and never clear the videoDisplay Object. By the way debugging the code i´m sure that this sentences are executed.

      Why is this happening to me?, any idea?

      Thanx

  7. Why don’t extend a UIComponent class to create a custom Video Component .. According to my personal opinion VideoDisplay component of Flex 3.5 sucks .

  8. is it supported on Flex3?
    because I copied the 1st example and paste but I got an error, it is not working!!

  9. sir,
    help me out please..
    i am developing video chatting..using asp.net .
    i am using fluorine fx streaming server.
    iam going to integrate flex with asp.net….

    can you guide me for my project…

    i want to knoe how to set up the server…using iis..

    thank you….

Comments are closed.