XML video playlist in flex
July 12th, 2009 in Flex | 13 CommentsThe next tutorial explains how to build an xml driven video playlist using Flex. In this application, the user can choose the video he wants to watch and select it from a combobox.
1. Create a new flex project named VideoCombobox, leave the name of the main MXML application as it is and set the layout to vertical.
2. Create a folder named assets where you put all of the videos that you want to display.
3. We store the datas related to the videos into an XML file which contains the source and the title for each video.
To do it, create an xml file that follows the structure below and that you fill with your own datas :
<?xml version="1.0"?>
<videolist>
<video>
<src>billiejean.flv</src>
<title>Billie Jean</title>
</video>
<video>
<src>smooth.flv</src>
<title>Smooth Criminal</title>
</video>
<video>
<src>dangerous.flv</src>
<title>Dangerous</title>
</video>
</videolist>
Save the file as data.xml in the src directory.
4. Your project should be arranged in this way :
Now that all of that is set up, we can start writing the code.
5. Open your application file so we can edit the code.
To load the datas from the xml, we use the HTTPService component. Give it an id of “service” and set its url to the xml file.
In the creationComplete event handler for the Application container, invoke the service by calling the send() method.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #000000]" creationComplete="service.send()"> <mx:HTTPService id="service" url="data.xml" result="resultHandler(event)"/> </mx:Application>
6. Now we need to write the resultHandler function. Add a script tag. First declare a bindable variable “videos” cast as an ArrayCollection to store the datas retrieved from the xml.
Next the resultHandler functions simply puts the datas from the xml into the videos variable :
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
[Bindable]
private var videos : ArrayCollection;
private function resultHandler(event:ResultEvent):void{
videos = event.result.videolist.video;
}
]]>
</mx:Script>
7. Beneath the HTTPService tag, add a VideoDisplay component with an id of “videoDisplay” and a Combobox component.
Set the prompt property of the combobox to “Select a video …”
To populate the combobox, set its dataprovider to the bindable variable videos.
However this is not not yet good as you can see :
Indeed, as our Arraycollection videos is an array of objects, we have to specify which object we want to be displayed in the combobox, in our case we want only the video’s title.
To do so, we add the labelField property that we set to “title”.
Also we call the playVideo function for the change event.
<mx:VideoDisplay id="videoDisplay" width="320" height="240"/>
<mx:ComboBox prompt="Select a video ..." dataProvider="{videos}"
labelField="title" change="playVideo(event)" width="165"/>
8. Finally we write the playVideo function in the Script tag. It simply set the source property of the videoDisplay to the path of the selected video. This path is retrieved by concatenating “assets/” which is the folder where the videos are stored with the current source of the video selected from the combobox.
private function playVideo(event:Event):void{
videoDisplay.source = "assets/" + event.currentTarget.selectedItem.src;
}
9. Last thing before testing it, we add some CSS style to the ComboBox component. To do it easily visit the Adobe Flex 3 Style Explorer.
10 Here is the final code, run the application to see it in action :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #000000]"
creationComplete="service.send()">
<mx:Style>
ComboBox {
color: #000000;
selectionColor: #ffffff;
rollOverColor: #cccccc;
textRollOverColor: #000000;
themeColor: #000000;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
[Bindable]
private var videos : ArrayCollection;
private function resultHandler(event:ResultEvent):void{
videos = event.result.videolist.video;
}
private function playVideo(event:Event):void{
videoDisplay.source = "assets/" + event.currentTarget.selectedItem.src;
}
]]>
</mx:Script>
<mx:HTTPService id="service" url="data.xml" result="resultHandler(event)"/>
<mx:VideoDisplay id="videoDisplay" width="320" height="240"/>
<mx:ComboBox prompt="Select a video ..." dataProvider="{videos}"
labelField="title" change="playVideo(event)" width="165"/>
</mx:Application>
Jul 13th, 2009
hey..thanks for the tutorial…
btw RIP JACKSON
Jul 13th, 2009
Nice work. RIP KING OF POP
Jul 15th, 2009
Good lesson, well explained, easy to follow
KEep going
Jul 19th, 2009
Excellent…. just excellent.
RIP MJ
Jul 22nd, 2009
Hi!!!!!!!
This code is not running………..
No output is coming
Do I have to select any server for this……….
Jul 24th, 2009
@AVI : Hello,
have you created your own xml file and put the matching videos files in an “assets” directory ?
Aug 12th, 2009
Hi, I type everything in code the same as here, Flex does not find any mistake, but there is no video display when I choose some title from Combobox. I think is something in function playVideo, because when I type event.currentTarget. and there is no option for choosing like selectedItem, and maybe Flex does not find it like mystake but… something unexpecting happens, because the excepted thing is some video to dispay, but… I don`t know. If someone have any suggestions for repairing the code, please share them!
Aug 12th, 2009
@ JUL: Hi Jul,
Have you done step 2: “Create a folder named assets where you put all of the videos that you want to display” because if you have dowloaded our source, we have removed the videos. You need to add your videos and create a matching xml.
Aug 12th, 2009
@Admin – Hi, I`ve done this for my videos – different names. I add them to assets folder in src folder in the project. Now I`ve done Basic Video Player in Flex tutorial from this site, but the video still do not appear. I think it`s may be from my Flash player. I think I have latest version – 10. I opened the project in Explorer and Mozilla, but there is no change – black rectangle and buttons.
Aug 14th, 2009
Hi, I found the problem. It is about converting files into .flv
Jan 22nd, 2010
hi great tut, simply suberb really explained nicely
can u please tell how can we add a feature for saving a playlist again after user has changed the playlist according to his needs
Jan 29th, 2010
thx brader! great tutor!
May 13th, 2010
Hi there!
It is great examplere. I wonder whether it is possible to read the xml files given here
http://tv.adobe.com/show/learn-after-effects-cs5/
and integrate like here in this page
http://cs5launch.adobe.com/?promoid=FDKBM
because in adobe tv too many clicks to get to see the videos.
Let me know please
Thanks
Krish