Flex中如何监测stateChange事件，将VideoDisplay中视频当前ProgressBar中状态显示在List中

Download: main.mxml

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"
3. layout="horizontal"
4. verticalAlign="middle"
5. backgroundColor="white"viewSourceURL="srcview/index.html">
7. <mx:Script>
8. <![CDATA[
9. import mx.collections.ArrayCollection;
10. import mx.events.VideoEvent;
12. [Bindable]
13. private var arrColl:ArrayCollection = new ArrayCollection();
15. private const VIDEO_URL:String = "http://blog.minidx.com/ext/water.flv";
17. private function videoDisplay_stateChange(evt:VideoEvent):void {
18. /* videoDisplay.state == evt.state */
19. arrColl.addItem({label:videoDisplay.state});
20. progressBar.label = evt.state;
21. }
23. private function button_click(evt:MouseEvent):void {
24. /* Reset ArrayCollection object. */
25. arrColl = new ArrayCollection();
26. /* Set the Canvas container to visible. */
27. canvas.visible = true;
28. /* If video is currently playing, stop playback. */
29. if (videoDisplay.playing) {
30. videoDisplay.stop();
31. }
32. /* Set VideoDisplay control's source property and start
33. video playback. */
34. videoDisplay.source = VIDEO_URL;
35. videoDisplay.play();
36. }
38. private function videoDisplay_playheadUpdate(evt:VideoEvent):void {
39. progressBar.setProgress(evt.playheadTime, videoDisplay.totalTime);
40. }
41. ]]>
42. </mx:Script>
44. <mx:ApplicationControlBardock="true">
45. <mx:Buttonid="button"
46. label="load movie"
47. click="button_click(event);"/>
48. </mx:ApplicationControlBar>
50. <mx:Canvasid="canvas" visible="false">
51. <mx:VideoDisplayid="videoDisplay"
52. playheadUpdateInterval="50"
53. stateChange="videoDisplay_stateChange(event);"
54. playheadUpdate="videoDisplay_playheadUpdate(event);"/>
56. <mx:ProgressBarid="progressBar"
57. label=""
58. labelPlacement="center"
59. mode="manual"
60. bottom="0"
61. horizontalCenter="0"/>
62. </mx:Canvas>
64. <mx:Listid="list"
65. dataProvider="{arrColl}"
66. width="100"/>
68. </mx:Application>