OSMF PLAYER有4个视频和1个控制栏

时间:2013-02-08 11:33:07

标签: flex4 osmf

我有一个要求,我需要平行显示视频播放的4个内容,我通过并行元素实现它,但这里主要的挑战是我要显示不同面板中的所有4个视频和一个公共控制栏来播放/暂停该视频。 当我试图将媒体播放器作为Uicomponent添加到hbox / vbox时抛出运行时异常。

请帮帮我。

2 个答案:

答案 0 :(得分:0)

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);
        }

答案 1 :(得分:0)

您可以下载OSMF主干,

中有样本文件夹

哪个项目ExamplePlayer在哪里有很多不同的

播放视频的方式。从那里提取以下代码

                 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; 

尝试此操作,您将获得4个视频播放或下载示例,并使用FlashBuilder运行该项目。