Flex Examples
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:
<?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:
<?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>
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:
<?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>
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
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.
adam,
Excellent tip! I totally forgot about the
use namespacesolution. It really could apply to any of the solutions above, but since pption 1 is probably the most easily copy-paste-able:Peter
very helped thank you
great video display control tips.
I may apply this tips on one of my site project.
thanks
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?
How to add volume control? Is it possible?
gustavo,
The VideoDisplay control has a
volumeproperty that you can set to a value between 0 and 1 which sets the volume.I can probably post an example in a couple minutes: “Setting the volume on a VideoDisplay control in Flex”.
Peter
peterd,
Thanks, thanks so much!
But, there is also a bug in Flash Player:
http://bugs.adobe.com/jira/browse/SDK-11262
Sometimes Video.clear not works as we expecting.
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
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
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!
Anyone know how to clear a videoDisplay that has been showing a live stream? .pause() does not seem to have any effect
@jerome,
If
clear()doesn’t work, maybe try setting a null source.Peter
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)
ok nevermind I got clear() working. I had to use .clear() on the Video object that was attached to the VideoDisplay
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
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 .
is it supported on Flex3?
because I copied the 1st example and paste but I got an error, it is not working!!
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….