OSMF PLAYER with 4 videos and 1 control bar

Question

I have a requirement where i need to show 4 contents of video playing parallely i achieved it through parallel element but here the main challange is that i want to show all the 4 videos in different panels and a common controlbar to play/pause the video. When i am trying to add the mediaplayer as Uicomponent to hbox/vbox its throwing runtime exception.

Please help me.

Answer 1

You can download the OSMF trunk and there are samples folder in

which a project ExamplePlayer is there in which many different

way to playing video. The following code is extracted from there

                 var parallelElement:SynchronizedParallelElement = new SynchronizedParallelElement();
                        var layout:LayoutMetadata = new LayoutMetadata();
                        layout.horizontalAlign = HorizontalAlign.CENTER;
                        layout.verticalAlign = VerticalAlign.MIDDLE;
                        parallelElement.addMetadata(LayoutMetadata.LAYOUT_NAMESPACE, layout);

                        var mediaElement1:MediaElement = new VideoElement(new URLResource(REMOTE_PROGRESSIVE));
                        layout = new LayoutMetadata();
                        layout.left = 0;
                        layout.top = 0;
                        layout.percentWidth = 50;
                        layout.percentHeight = 50;
                        mediaElement1.addMetadata(LayoutMetadata.LAYOUT_NAMESPACE, layout);
                        parallelElement.addChild(mediaElement1);

                        var mediaElement2:MediaElement = new VideoElement(new URLResource(REMOTE_STREAM));
                        layout = new LayoutMetadata();
                        layout.left = 0;
                        layout.bottom = 0;
                        layout.percentWidth = 50;
                        layout.percentHeight = 50;
                        mediaElement2.addMetadata(LayoutMetadata.LAYOUT_NAMESPACE, layout);
                        parallelElement.addChild(mediaElement2);

                        var mediaElement3:MediaElement = new VideoElement(new URLResource(REMOTE_STREAM));
                        layout = new LayoutMetadata();
                        layout.right = 0;
                        layout.top = 0;
                        layout.percentWidth = 50;
                        layout.percentHeight = 50;
                        mediaElement3.addMetadata(LayoutMetadata.LAYOUT_NAMESPACE, layout);
                        parallelElement.addChild(mediaElement3);

                        var mediaElement4:MediaElement = new VideoElement(new URLResource(REMOTE_PROGRESSIVE2));
                        layout = new LayoutMetadata();
                        layout.right = 0;
                        layout.bottom = 0;
                        layout.percentWidth = 50;
                        layout.percentHeight = 50;
                        mediaElement4.addMetadata(LayoutMetadata.LAYOUT_NAMESPACE, layout);
                        parallelElement.addChild(mediaElement4);

                        return parallelElement; 

Try this you will get the 4 video playing or download the sample and use the FlashBuilder to run the project.

Answer 2

protected function initPlayer():void
        {
            // Create a mediafactory instance



            var leftcontainer:Panel = new Panel(); 
            leftcontainer.percentHeight=50;
            leftcontainer.percentWidth=50;




            mediaFactory = new DefaultMediaFactory();

            //Marker 1: Create a LayoutMetaData object stup up to even out the 2 parellel streams initially
            var layoutData:LayoutMetadata = new LayoutMetadata();
            layoutData.percentWidth = 50;
            layoutData.percentHeight = 50;
            layoutData.scaleMode = ScaleMode.LETTERBOX;

            //Marker 2: Create the left side Media Element to play the LOGO_VID and apply the meta-data
            var leftElement:MediaElement = mediaFactory.createMediaElement( new URLResource( LOGO_VID ) );
            leftElement.metadata.addValue( LayoutMetadata.LAYOUT_NAMESPACE, layoutData );

            //Marker 3: Create the right side Media Element to play the STREAMING_PATH and apply the meta-data
            var rightElement:MediaElement = mediaFactory.createMediaElement( new URLResource( STREAMING_PATH ) );
            rightElement.metadata.addValue( LayoutMetadata.LAYOUT_NAMESPACE, layoutData );          

            //Marker 4: Create the ParallelElement and add the left and right elements to it
            var parallelElement:ParallelElement = new ParallelElement();
            parallelElement.addChild( leftElement );
            parallelElement.addChild( rightElement );

            //Marker 5: Reinstantiate the layoutData to clear it out and set the layout data for the parallel element
            layoutData = new LayoutMetadata();
            layoutData.layoutMode = LayoutMode.HORIZONTAL;
            layoutData.horizontalAlign = HorizontalAlign.CENTER;
            layoutData.verticalAlign = VerticalAlign.MIDDLE;
            layoutData.width = 800;
            layoutData.height = 600;
            parallelElement.metadata.addValue( LayoutMetadata.LAYOUT_NAMESPACE, layoutData );

            //the simplified api controller for media
            player = new MediaPlayer( parallelElement );



            //the container (sprite) for managing display and layout
            container = new MediaContainer();
            container.addMediaElement( parallelElement );


            //Adds the container to the stage

            var ui:UIComponent = new UIComponent();
            ui.addChild(container as DisplayObject);
            leftcontainer.addElement(ui);

            this.addChild(container);
        }