Multiple VideoDisplay and playback controls for each using repeater

 

Problem Summary

I want to dynamically generate a VideoDisplay control and playback controls for each using repeater and data in an XML file.

Solution Summary

Use a component housing the VideoDisplay control and an HBox with Play, Stop, and Pause buttons, and use the component in a Repeater, that takes data from an XML file.

Explanation

See the zip file for the exported project.

----- assets/videos/france.flv -----

----- assets/videos/japan.flv -----
 

----- data/videoData.xml -----

1. <?xml version="1.0" encoding="utf-8" ?>
2. <videos>
3.   <video name="France" id="france" xlink="assets/videos/france.flv" />
4.   <video name="Japan" id="japan" xlink="assets/videos/japan.flv" />
5. </videos>

----- components/VideoComp.mxml -----

 

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
3.   width="100%" height="100%">
4.   <mx:Script>
5.     <![CDATA[
6.       [Bindable] private var _vidData:String;
7.       
8.       public function set vidData(video:String):void{
9.         _vidData = video;
10.       }
11.     ]]>
12.   </mx:Script>
13.   <mx:VideoDisplay id="vid" 
14.     autoPlay="false" source="{_vidData}"/>
15.   <mx:HBox>
16.     <mx:Button label="Play" click="vid.play();"/>
17.     <mx:Button label="Pause" click="vid.pause();"/>
18.     <mx:Button label="Stop" click="vid.stop();"/>
19.   </mx:HBox> 
20. </mx:VBox>

----- MultipleVideos.mxml -----

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3.   creationComplete="init()" xmlns:comp="components.*">
4.   <mx:Script>
5.     <![CDATA[      
6.       import mx.collections.XMLListCollection;
7.       import mx.rpc.events.ResultEvent;
9.       [Bindable] public var videosDP:XMLListCollection = new XMLListCollection();
10.             
11.       private function init():void{
12.         videosRequest.send();
13.       }
14.       
15.       private function videosResultHandler(event:ResultEvent):void{
16.         var list:XMLList = new XMLList(event.result..video);
17.         videosDP = new XMLListCollection(list);
18.       }
19.     ]]>
20.   </mx:Script>      
21.   <mx:HTTPService id="videosRequest" useProxy="false" resultFormat="e4x"
22.     result="videosResultHandler(event)" url="data/videoData.xml"/>
23.   <mx:Repeater id="myRepeater" dataProvider="{videosDP}">
24.     <mx:Label text="{'Path:' + myRepeater.currentItem.@xlink}"/>
25.     <comp:VideoComp vidData="{myRepeater.currentItem.@xlink}"/>
26.   </mx:Repeater>
27. </mx:Application>

 

Related files for download

You need to have two flv files, france.flv and japan.flv.
MultipleVideos.zip