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. <?xmlversion="1.0"encoding="utf-8"?>
2. <videos>
3. <videoname="France"id="france"xlink="assets/videos/france.flv"/>
4. <videoname="Japan"id="japan"xlink="assets/videos/japan.flv"/>
5. </videos>

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

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <mx:VBoxxmlns:mx="http://www.adobe.com/2006/mxml"
3. width="100%"height="100%">
4. <mx:Script>
5. <![CDATA[
6. [Bindable]privatevar_vidData:String;
8. publicfunctionsetvidData(video:String):void{
9. _vidData=video;
10. }
11. ]]>
12. </mx:Script>
13. <mx:VideoDisplayid="vid"
14. autoPlay="false"source="{_vidData}"/>
15. <mx:HBox>
16. <mx:Buttonlabel="Play"click="vid.play();"/>
17. <mx:Buttonlabel="Pause"click="vid.pause();"/>
18. <mx:Buttonlabel="Stop"click="vid.stop();"/>
19. </mx:HBox>
20. </mx:VBox>

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

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"
3. creationComplete="init()"xmlns:comp="components.*">
4. <mx:Script>
5. <![CDATA[
6. importmx.collections.XMLListCollection;
7. importmx.rpc.events.ResultEvent;
9. [Bindable]publicvarvideosDP:XMLListCollection=newXMLListCollection();
11. privatefunctioninit():void{
12. videosRequest.send();
13. }
15. privatefunctionvideosResultHandler(event:ResultEvent):void{
16. varlist:XMLList=newXMLList(event.result..video);
17. videosDP=newXMLListCollection(list);
18. }
19. ]]>
20. </mx:Script>
21. <mx:HTTPServiceid="videosRequest"useProxy="false"resultFormat="e4x"
22. result="videosResultHandler(event)"url="data/videoData.xml"/>
23. <mx:Repeaterid="myRepeater"dataProvider="{videosDP}">
24. <mx:Labeltext="{'Path:'+myRepeater.currentItem.@xlink}"/>
25. <comp:VideoCompvidData="{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