Setting a background image on a VideoDisplay control in Flex

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>

Tagged as: backgroundImage

{ 4 comments… read them below or add one }

1 delta August 28, 2008 at 2:18 am: Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…

2 kevin October 6, 2008 at 1:42 pm: Hi,

Is it possible to load image on the fly and display as background image, instead of hard coding “[Embed("assets/Fx2.png")]“?

Thanks.

3 Alexander Krasilnikov January 12, 2009 at 11:21 pm: kevin,
Yes, it is possible, just use image path in flexLogo variable in this string:

videoDisplay.setStyle(“backgroundImage”, flexLogo);

But note, that each time this picture will be downloaded.

4 Diny February 25, 2009 at 3:22 am: hi,

I would like to load a image in my application itself.. how it is possible?

Thanks in advance
Diny