flex4 - 带有 4 个视频和 1 个控制栏的 OSMF 播放器

Question

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

请帮我。

Answer 1

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

Answer 2

您可以下载 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 运行项目。