Displaying a video in a pop up window in Flex at Flex Examples

The following example shows how you can use the PopUpManager class to display a VideoDisplay control in a TitleWindow container in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/04/displaying-a-video-in-a-pop-up-window-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;

            private function button_click(evt:MouseEvent):void {
                var popUpVideoDisplay:PopUpVideoDisplay;
                popUpVideoDisplay = new PopUpVideoDisplay();
                popUpVideoDisplay.source = "http://www.helpexamples.com/flash/video/water.flv";
                PopUpManager.addPopUp(popUpVideoDisplay, this, true);
            }
        ]]>
    </mx:Script>

    <mx:Button id="button"
            label="Launch video"
            click="button_click(event);" />

</mx:Application>

PopUpVideoDisplay.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/04/displaying-a-video-in-a-pop-up-window-in-flex/ -->
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
        showCloseButton="true"
        styleName="noPadding"
        creationComplete="init();"
        close="titleWindow_close(event);">

    <mx:Style>
        .noPadding {
            paddingBottom: 0;
            paddingTop: 0;
            paddingLeft: 0;
            paddingRight: 0;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.managers.IFocusManagerComponent;
            import mx.controls.Alert;
            import mx.core.IFlexDisplayObject;
            import mx.events.CloseEvent;
            import mx.managers.PopUpManager;

            [Bindable]
            public var source:String;

            private function init():void {
                PopUpManager.centerPopUp(this);
            }

            private function titleWindow_close(evt:CloseEvent):void {
                PopUpManager.removePopUp(evt.target as IFlexDisplayObject);
            }
        ]]>
    </mx:Script>

    <mx:VideoDisplay id="videoDisplay"
            source="{source}"
            resize="init();" />

    <mx:ControlBar horizontalAlign="right" width="100%">
    </mx:ControlBar>

</mx:TitleWindow>

View source is enabled in the following example.

<mx:SWFLoader id="myVideo" left="0" right="0" top="0" bottom="0" source="@Embed(source='misc/video.swf')" autoLoad="true" /> <mx:Canvas id="canvas" height="100%" width="100%" verticalScrollPolicy="off" horizontalScrollPolicy="off" <mx:Button x="-21" y="244" label="Get Data ..." click="myVideo.load()" /> <mx:Canvas/>

August 2008
M	T	W	T	F	S	S
« Jul		Sep »
	1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

August 2008

« Jul

Sep »

12 Responses to “Displaying a video in a pop up window in Flex”

Feed for this Entry View blog reactions

1 Blenjar Aug 4th, 2008 at 4:08 pm

Thats sick!
2 MechanisM Aug 9th, 2008 at 7:34 am

yay!! this example is very useful 4 me!! thanxxx!!
3 MechanisM Aug 9th, 2008 at 7:35 am

did anybody seen any good example of SWFAddress??gimme da links please?
4 Mark Aug 11th, 2008 at 7:57 am
There is lots of talk about using video - but finding a post about how to *embed* video in a Flex app was a lot harder than I expected. If you can convert an .FLV to a .SWF, you can easily embed a video file just like you might embed an image. See the code below for an example. I think this warrants a post of its own…
```
<mx:SWFLoader id="myVideo" left="0" right="0" top="0" bottom="0" source="@Embed(source='misc/video.swf')" autoLoad="true" />

<mx:Canvas id="canvas" height="100%" width="100%" verticalScrollPolicy="off" horizontalScrollPolicy="off"
    <mx:Button x="-21" y="244" label="Get Data ..." click="myVideo.load()" />
<mx:Canvas/>
```
5 Erwan Sep 1st, 2008 at 5:53 am

An idea to enable fullscreen of the video in the popup ?
6 peterd Sep 2nd, 2008 at 8:20 am

Erwan,

There is an example of building fullscreen Flex applications at “Creating full-screen Flex applications” which may get you started.

If you only want to display the VideoDisplay while in fullscreen mode, you may need to set up some states or something.

Peter
7 rahul Sep 23rd, 2008 at 10:58 pm

HI well there is a bug here……the moment you keep pressing space bar…new window will load automtaiclly……can you resolve this
8 peterd Sep 23rd, 2008 at 11:18 pm
rahul,

In PopUpVideoDisplay.mxml file, change the init() method to the following:
```
private function init():void {
    PopUpManager.centerPopUp(this);
    focusManager.setFocus(this.mx_internal::closeButton);
}
```
Now, when you press the space bar, the TitleWindow will close.

Peter
9 rahul Sep 23rd, 2008 at 11:19 pm

HI well there is a bug here……the moment you keep pressing space bar…new window will load automtaiclly……can you resolve this

hi i resolved this…use this.setFocus();inside your init function.
10 Abhilash Nov 17th, 2008 at 9:56 pm

I have a form designed using Flex. The form does not fit the screen area and hence I am having scroll bars in it. When we click on some of the controls in the form, we open popups. But when the popup is opened, if we scroll the form using the form scroll bar then the popup is not getting scrolled. I want the popup to be scrolled along with the form elements. Please let me know how this can be done.

Thanks

Abhilash
11 ScottyG Mar 20th, 2009 at 2:38 pm

The video keeps playing even when the popup box is closed. How can I fix that?

-Scotty G
12 Peter deHaan Mar 20th, 2009 at 3:46 pm

ScottyG,

Oops.
The best fix is probably calling the stop() method on the VideoDisplay control when the PopUp window is closed.

Peter