Flex中如何设定VideoDisplay控件背景颜色(background color)的例子

在前面的 Flex的VideoDisplay基本使用方法的例子中，我们了解了VideoDisplay控件的播放，暂停，停止等的一些基本用法。接下来的例子演示了如何通过设定 backgroundColor风格，来实现修改VideoDisplay控件的背景颜色。

让我们先来看一下Demo（可以右键View Source或 点击这里察看源代码 ）

Download: main.mxml

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3.         layout="vertical"
4.         verticalAlign="middle"
5.         backgroundColor="white">
7.     <mx:Script>
8.         <![CDATA[
9.             private function loadButton_click(evt:MouseEvent):void {
10.                 var url:String = "http://blog.minidx.com/ext/getting-started-with-the-videodisplay-control/clouds.flv";
11.                 videoDisplay.source = url;
12.             }
14.             private function unloadButton_click(evt:MouseEvent):void {
15.                 videoDisplay.close();
16.                 videoDisplay.source = null;
17.                 videoDisplay.mx_internal::videoPlayer.clear();
18.             }
19.         ]]>
20.     </mx:Script>
22.     <mx:ApplicationControlBar dock="true">
23.         <mx:Form styleName="plain">
24.             <mx:FormItem label="backgroundColor:">
25.                 <mx:ColorPicker id="colorPicker" />
26.             </mx:FormItem>
27.         </mx:Form>
28.     </mx:ApplicationControlBar>
30.     <mx:VideoDisplay id="videoDisplay"
31.             backgroundColor="{colorPicker.selectedColor}"
32.             width="160"
33.             height="120" />
35.     <mx:ControlBar>
36.         <mx:Button id="loadButton"
37.                 label="Load"
38.                 click="loadButton_click(event);" />
39.         <mx:Button id="unloadButton"
40.                 label="Unload"
41.                 click="unloadButton_click(event);" />
42.     </mx:ControlBar>
44. </mx:Application>