This next example will show you how to use our YMVideoContainer component.  This component allows you to load an array of videos, navigate through them, and control their playback with a built-in control panel.  If you have not already done so, download and unzip our Component Library, and make sure your classpath points to it.  A preview of this component is available here.  You can download the YMVideoContainer example FLA here, or grab the code below:

import yourminis.api.IWidget; import yourminis.components.YMVideoContainer; var widget:IWidget; var ymvc:YMVideoContainer; //You can replace these with your own urls here to create a playlist of FLV movies var myMovies:Array = [ "http://a123.g.akamai.net/7/123/10742/v0001/emergstor.download.akamai.com/8872/vmtv/videos/widget/vmtv_metacafe_driving_slated_320.flv", "http://a123.g.akamai.net/7/123/10742/v0001/emergstor.download.akamai.com/8872/vmtv/videos/widget/vmtv_metacafe_sink_slated_320.flv", "http://a123.g.akamai.net/7/123/10742/v0001/emergstor.download.akamai.com/8872/vmtv/videos/widget/mt_rt117604_its_on_320.flv", "http://a123.g.akamai.net/7/123/10742/v0001/emergstor.download.akamai.com/8872/vmtv/videos/widget/mt_rt117604_a_kiss_320.flv" ] addEventListener("widget-loaded",onWidgetLoaded); function onWidgetLoaded(evt:Event):void { widget.chrome.resizable = true; widget.addEventListener(widget.WIDGET_RESIZED,onWidgetResize); widget.syndication.allowFullScreen = true; widget.chrome.setBounds(240,180,1000,1000); widget.chrome.editEnabled = true; widget.initWidget(240,180,0x000000); widget.chrome.setTitle("Video Player Sample"); //Create the video player //YMVideoContainer(_widget=null, _themeColor:uint=0xAADE0E,_showStart:Boolean=false,_alignment=2,_playerW=160,_playerH=120,_padding=3) ymvc = new YMVideoContainer( widget, //_widget:* -- Reference to your widget instance 0xFFFFFF, //_themeColor:uint -- The color of the video player buttons true, //_showStart:Boolean -- if true, shows a big play button before starting, otherwise it autoplays 2, //_alignment:uint -- alignment of the controls //7:top_left,8:top_center,9:top_right, //4:middle_left,5:middle_center,6:middle_right, //1:bottom_left,2:bottom_center,3:bottom_right 236, //_playerW:Number -- the initial player width 176, //_playerH:Number -- the initial player height 3 //_padding:Number -- the amount of padding (in pixels) between player buttons ); addChild(ymvc); ymvc.setVideos(myMovies); resizeAll(); } function resizeAll() { var w = widget.width; var h = widget.height; if (ymvc) { ymvc.x = 4; ymvc.y = 26; ymvc.setSize(w-8,h-30); } } function onWidgetResize(evt:Event):void { resizeAll(); }

Once you have constructed an instance of the YMVideoContainer, you can set the list of videos it uses with the setVideos() function, which takes in a single array as a parameter.  This array should only contain string values, and each string should be a full URL linking to an FLV file.  The YMVideoContainer will treat this array like a playlist.  If a movie is playing, it will pause automatically if you hide the movie player (in this case, ymvc.visible = false would do this).  You can also tell it to play a particular video in the playlist with the setIndex function, which takes a uint as a parameter designating the array index of the video to play.  Lastly, you can resize the video with the setSize() function, which as usual takes a width and a height value as parameters.  The video will always be resized proportionately.

Both the ImageLoader and YMVideoContainer components should help you with loading media, but what if you want to display a list of media?  The next example will show you how to use our SkinList component, which will allow you to easily create customizable ("skinnable") lists.