XML video playlist in flex

The 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.

View DemoDownload Source

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 :

Screenshot

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 :

Screenshot

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>

19 thoughts on “XML video playlist in flex

  1. avi

    Hi!!!!!!!
    This code is not running………..
    No output is coming
    Do I have to select any server for this……….

  2. admin Post author

    @AVI : Hello,
    have you created your own xml file and put the matching videos files in an “assets” directory ?

  3. Jul

    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!

  4. admin Post author

    @ 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.

  5. Jul

    @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.

  6. Dharamveer Singh

    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

  7. Under

    Hi!

    Great tut with perfect detail. Also works perfectly streaming from my media server (RTMP) instead of my local assets folder. My only questions (I’m noob to Flex/AS) are: how two auto play the first item on the XML and how to use a SMIL file instead of a XML so I can get rid of the combobox and play one video after another.

    Thanks for your time 😉

  8. 3LauraB

    Hi,

    Thanks for the tutorial, I will now be a regular visitor to this site, great resource! I have already tweeted about it.

    I have got this running great in the flex project, but need to create a similar video display as an Air project, I am having trouble getting it to read the XML. When creating an Air app an automatic app.xml is created alongside the mxml, I was thinking that I would just transfer my original XML into the automated XML document and it would run when the debug was hit, but no joy =-(.

    SO my question is HELP??? No seriously do you have any advice? am I on the right track at all?

    Thank you in advance

  9. 3LauraB

    I figured out you can have a separate XML file and run from that, I am now trying to make it so that the user can drag a still of a video and drop it and it will play on drop so any input will be gratefully received. =-)

  10. Eduardo

    Hola Buen Día que Dios los Bendiga una pregunta, como puedo hacer que de l lista de reproducción al terminar el primer vídeo se minimice la pantalla se tome un tiempo de 2 minutos y comience con el siguiente vídeo, espero respuestas gracias.

    Hello Good Day God Bless a question, as I can make playlist of l at the end of the first video display to minimize the time you take 2 minutes and start the next video, I hope answers thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *