Flex Examples

The following example shows how you can specify a background image for a Flex VideoDisplay control by setting the backgroundImage style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/28/setting-a-background-image-on-a-videodisplay-control-in-flex/ -->
<mx:Application name="VideoDisplay_backgroundImage_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.VideoEvent;
            import mx.utils.StringUtil;

            private const src:String =
                    "http://www.helpexamples.com/flash/video/water.flv";

            private function loadBtn_click(evt:MouseEvent):void {
                videoDisplay.source = src;
            }

            private function playBtn_click(evt:MouseEvent):void {
                videoDisplay.stop();
                videoDisplay.play();
            }

            private function videoDisplay_ready(evt:VideoEvent):void {
                loadBtn.enabled = false;
                playBtn.enabled = true;
            }

            private function videoDisplay_playheadUpdate(evt:VideoEvent):void {
                var playTime:Number = videoDisplay.playheadTime;
                var totTime:Number = videoDisplay.totalTime;
                progressBar.setProgress(playTime, totTime);
                progressBar.label = StringUtil.substitute("{0} of {1}",
                                                    playTime.toFixed(3),
                                                    totTime.toFixed(3));
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="loadBtn"
                label="Load"
                click="loadBtn_click(event);" />
        <mx:Button id="playBtn"
                label="Play"
                enabled="false"
                click="playBtn_click(event);" />
    </mx:ApplicationControlBar>

    <mx:VideoDisplay id="videoDisplay"
            autoPlay="true"
            backgroundImage="@Embed('Fx2.png')"
            width="230"
            height="220"
            ready="videoDisplay_ready(event);"
            playheadUpdate="videoDisplay_playheadUpdate(event);" />

    <mx:ProgressBar id="progressBar"
            mode="manual"
            label="{videoDisplay.state}"
            labelPlacement="center"
            width="{videoDisplay.width}" />

</mx:Application>

View source is enabled in the following example.

You can also set the backgroundImage style in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/28/setting-a-background-image-on-a-videodisplay-control-in-flex/ -->
<mx:Application name="VideoDisplay_backgroundImage_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        VideoDisplay {
            backgroundImage: Embed("assets/Fx2.png");
        }
    </mx:Style>

    <mx:VideoDisplay id="videoDisplay"
            source="http://www.helpexamples.com/flash/video/water.flv"
            autoPlay="true"
            width="230"
            height="220" />

</mx:Application>

Or, you can set the backgroundImage style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/28/setting-a-background-image-on-a-videodisplay-control-in-flex/ -->
<mx:Application name="VideoDisplay_backgroundImage_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

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

            [Embed("assets/Fx2.png")]
            private var flexLogo:Class;

            private var videoDisplay:VideoDisplay;

            private function init():void {
                videoDisplay = new VideoDisplay();
                videoDisplay.autoPlay = true;
                videoDisplay.source = "http://www.helpexamples.com/flash/video/water.flv";
                videoDisplay.width = 230;
                videoDisplay.height = 220;
                videoDisplay.setStyle("backgroundImage", flexLogo);
                addChild(videoDisplay);
            }
        ]]>
    </mx:Script>

</mx:Application>