<?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" viewSourceURL="srcview/index.html">

    <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('assets/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>