Using ControlBarSample to Play Multiple Videos

Question

I'm trying to modify the ControlBarSample to play multiple videos and I'm running into a wall. I've made a few simple modifications to the control bar sample to try to play a second video file. The problem I'm having is the control bar doesn't have a reference to the new video I play and therefore can't update it's view. I'd like to be able to remove the video element playing in the ParallelElement and add a new child MediaElement and have the controlbar refresh it's reference to the new target. Also the controlbar shouldn't have to reload itself, but should stay right where it is in the display list and in the root parallel element. Can someone guide through this? Here is my simple modification to the ControlBarSample class as a starting point.
package
     import flash.display.Sprite;
     import flash.events.MouseEvent;
     import flash.text.TextField;
     import org.osmf.elements.ParallelElement;
     import org.osmf.events.MediaFactoryEvent;
     import org.osmf.layout.HorizontalAlign;
     import org.osmf.layout.LayoutMetadata;
     import org.osmf.layout.VerticalAlign;
     import org.osmf.media.*;
     import org.osmf.metadata.Metadata;
     [SWF(width="640", height="360", backgroundColor="0x000000",frameRate="25")]
     public class ControlBarPluginSampleMod extends Sprite
          public function ControlBarPluginSampleMod()
               // Construct an OSMFConfiguration helper class:     
               osmf = new OSMFConfiguration();
               // Construct the main element to play back. This will be a
               // parallel element, that will hold the main content to
               // playback, and the control bar (from a plug-in) as its
               // children:
               osmf.mediaElement = constructRootElement();
               osmf.view = this;
               // Add event listeners to the plug-in manager so we'll get
               // a heads-up when the control bar plug-in finishes loading:
               osmf.factory.addEventListener(MediaFactoryEvent.PLUGIN_LOAD, onPluginLoaded);
               osmf.factory.addEventListener(MediaFactoryEvent.PLUGIN_LOAD_ERROR, onPluginLoadError);
               // Ask the plug-in manager to load the control bar plug-in:
               osmf.factory.loadPlugin(pluginResource);
               // button to play the next item
               var label:TextField = new TextField();
               label.text = "PLAY NEXT";
               label.x = 10;
               label.y = 3;
               label.mouseEnabled = false
               button = new Sprite();
               button.buttonMode = true;
               button.addChild( label );
               button.graphics.beginFill(0x00FFFF,1);
               button.graphics.drawRect(0,0,90,20);
               button.addEventListener(MouseEvent.CLICK, onButtonClick);
               addChild(button);
          // Internals
          private var osmf:OSMFConfiguration;
          private var rootElement:ParallelElement;
          private var button:Sprite;
          private function onPluginLoaded(event:MediaFactoryEvent):void
               // The plugin loaded successfully. We can now construct a control
               // bar media element, and add it as a child to the root parallel
               // element:
               rootElement.addChild(constructControlBarElement());
          private function onPluginLoadError(event:MediaFactoryEvent):void
               trace("ERROR: the control bar plugin failed to load.");
          private function constructRootElement():MediaElement
               // Construct a parallel media element to hold the main content,
               // and later on, the control bar.
               rootElement = new ParallelElement();
               rootElement.addChild( constructVideoElement(VIDEO_HTTP) );
               // Use the layout api to set the parallel element's width and
               // height. Make it as big as the stage currently is:
               var rootElementLayout:LayoutMetadata = new LayoutMetadata();
               rootElement.addMetadata(LayoutMetadata.LAYOUT_NAMESPACE, rootElementLayout);
               rootElementLayout.width = stage.stageWidth;
               rootElementLayout.height = stage.stageHeight;
               return rootElement;
          private function constructVideoElement(url:String):MediaElement
               // Construct a metadata object that we can append to the video's collection
               // of metadata. The control bar plug-in will use the metadata to identify
               // the video element as its target:
               var controlBarTarget:Metadata = new Metadata();
               controlBarTarget.addValue(ID, "mainContent");
               // Construct a video element:
               var video:MediaElement = osmf.factory.createMediaElement(new URLResource(url));
               // Add the metadata to the video's metadata:
               video.addMetadata(ControlBarPlugin.NS_CONTROL_BAR_TARGET, controlBarTarget);
               return video;
          private function constructControlBarElement():MediaElement
               // Construct a metadata object that we'll send to the media factory on
               // requesting a control bar element to be instantiated. The factory
               // will use it to parameterize the element. Specifically, the ID field
               // will tell the plug-in what the ID of the content it should control
               // is:
               var controlBarSettings:Metadata = new Metadata();
               controlBarSettings.addValue(ID, "mainContent");
               // Add the metadata to an otherwise empty media resource object:
               var resource:MediaResourceBase = new MediaResourceBase();
               resource.addMetadataValue(ControlBarPlugin.NS_CONTROL_BAR_SETTINGS, controlBarSettings);
               // Request the media factory to construct a control bar element. The
               // factory will infer a control bar element is requested by inspecting
               // the resource's metadata (and encountering a metadata object of namespace
               // NS_CONTROL_BAR_SETTINGS there):
               var controlBar:MediaElement = osmf.factory.createMediaElement(resource);
               // Set some layout properties on the control bar. Specifically, have it
               // appear at the bottom of the parallel element, horizontally centererd:
               var layout:LayoutMetadata = controlBar.getMetadata(LayoutMetadata.LAYOUT_NAMESPACE) as LayoutMetadata;
               if (layout == null)
                    layout = new LayoutMetadata();
                    controlBar.addMetadata(LayoutMetadata.LAYOUT_NAMESPACE, layout);
               layout.verticalAlign = VerticalAlign.BOTTOM;
               layout.horizontalAlign = HorizontalAlign.CENTER;
               // Make sure that the element shows over the video: element's with a
               // higher order number set are placed higher in the display list:
               layout.index = 1;
               return controlBar;
          private function onButtonClick(event:MouseEvent):void
               playNext(VIDEO_RTMP);
          private function playNext(url:String):void
               rootElement.removeChildAt(0);
               rootElement.addChild( constructVideoElement(url) );
          /* static */
          private static const VIDEO_HTTP:String = "http://mediapm.edgesuite.net/osmf/content/test/logo_animated.flv";
          private static const VIDEO_RTMP:String = "rtmp://cp67126.edgefcs.net/ondemand/mediapm/strobe/content/test/SpaceAloneHD_sounas_640_500_short";
          private static var ID:String = "ID";
          // Comment out to load the plug-in for a SWF (instead of using static linking, for testing):     
          //private static const pluginResource:URLResource = new URLResource("http://mediapm.edgesuite.net/osmf/swf/ControlBarPlugin.swf");
          private static const pluginResource:PluginInfoResource = new PluginInfoResource(new ControlBarPlugin().pluginInfo);

Answer 1

It appears that this may be accomplished more easily if I do something similar to the StrobeMediaPlayback implementation. Looking at the StrobeMediaPlayback source code it looks like Adobe has done something a little different than their ControlBarPlugin, placing the controlbar and root media element inside separate MediaContainers and then adding those containers to the display list. Is this recommended over using the frameworks ParallelElements? If so, is communication between the control bar and root media element still a matter of just updating the target reference via metadata?