4 Replies Latest reply on Jun 16, 2010 9:25 AM by jcastelain

    MediaContainerUIComponent resizing and positionning

    jcastelain Level 1

      Hi all,

       

      Hope you're all doing good.

      I'm getting a weird behavior with the MediaContainerUIComponent in a Flex project. I'm using the Flex 3 SDK and the latest source from OSMF svn repo.

       

      Basically I have an instance of the MediaContainerUIComponent nested in a VBox who's width and height are set to 800 * 600 pixels, I create a video element, create a "MediaContainer" for my MediaContainerUIComponent, and the using the LayoutMetadata, try to set the with and height of the MediaContainerUIComponent too the same as the VBox, but each time it looks like the MediaContainerUIComponent is not correctly positionned, it's on the left of the VBox (like if it was no "included" in the VBox) and the size is not the same.

       

      Could you please help me understand/fix this.

       

      Thanks in advance and cheers

      Julien

        • 1. Re: MediaContainerUIComponent resizing and positionning
          bringrags Level 4

          Can you post a small, runnable example that shows the problem?  Thanks!

          • 2. Re: MediaContainerUIComponent resizing and positionning
            jcastelain Level 1

            Hi Brian,

             

            Actually, I have a simple runnable example, I played a bit more with it before posting, and it seems to work, but I thought I'd post it just to know if I'm using the LayoutMetadata properly, any feedback/advice is as usual the most welcome.

             

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:WindowedApplication 
                 xmlns:mx="http://www.adobe.com/2006/mxml" 
                 xmlns:samples="org.osmf.samples.*"
                 layout="absolute"
                 width="800" height="600"
                 applicationComplete="applicationCompleteHandler()"
                 horizontalScrollPolicy="off"
                 verticalScrollPolicy="off"
                 >
                 
                 <mx:Script>
                      <![CDATA[
                           import org.osmf.layout.ScaleMode;
                           import org.osmf.layout.LayoutMode;
                           import org.osmf.layout.LayoutMetadata;
                           import org.osmf.media.MediaPlayer;
                           import org.osmf.net.NetLoader;
                           import org.osmf.media.URLResource;
                           import org.osmf.elements.VideoElement;
                           import org.osmf.containers.MediaContainer;
                           
                           
                           private var _videoElement:VideoElement;
                           private var _mediaPlayer:MediaPlayer;
                           private var _layoutMetadata:LayoutMetadata;
                           
                           private function applicationCompleteHandler():void {
                                
            //                    var url:String = "http://mediapm.edgesuite.net/osmf/content/test/logo_animated.flv";
                                var url:String = "file:///Users/julien/Desktop/final.mp4";
                                
                                _videoElement = new VideoElement(
                                     new URLResource(url),
                                     new NetLoader());
                                     
                                _mediaPlayer = new MediaPlayer();
                                
                                mediaContainer.container = new MediaContainer();
                                
                                _mediaPlayer.media = _videoElement;
                                _mediaPlayer.loop = true;
                                mediaContainer.container.addMediaElement(_videoElement);
                                
                                var w:Number = Math.max(mainBox.getExplicitOrMeasuredWidth(), mainBox.width);
                                var h:Number = Math.max(mainBox.getExplicitOrMeasuredHeight(), mainBox.height);
                                
                                trace("Box dimensions : ", w, h);
                                
                                
                                _layoutMetadata = _videoElement.getMetadata(LayoutMetadata.LAYOUT_NAMESPACE) as LayoutMetadata;
                                /*
                                _layoutMetadata.bottom = 0;
                                _layoutMetadata.left = 0;
                                _layoutMetadata.right = 0;
                                _layoutMetadata.top = 0;
                                */
                                
                                _layoutMetadata.paddingBottom = 0;
                                _layoutMetadata.paddingLeft = 0;
                                _layoutMetadata.paddingRight = 0;
                                _layoutMetadata.paddingTop = 0;
                                
                                // layoutMetadata.layoutMode = LayoutMode.NONE;
                                _layoutMetadata.scaleMode = ScaleMode.LETTERBOX;
                                _layoutMetadata.width = w;
                                _layoutMetadata.height = h;
                                _layoutMetadata.includeInLayout = true;
                                mediaContainer.setActualSize(w, h);
                                
                                nativeWindow.addEventListener(NativeWindowBoundsEvent.RESIZE, nativeWindowResizeHandler);
                                // nativeWindow.addEventListener(
                           }
                           
                           private function nativeWindowResizeHandler(event:NativeWindowBoundsEvent):void {
                           //     trace("nativeWindowResizeHandler : ", event.afterBounds, event.beforeBounds);
                                
                                var bounds:Rectangle = event.beforeBounds;
                                var pw:Number = bounds.width * .8;
                                var ph:Number = bounds.height * .8;
                                
                                mediaContainer.setActualSize(pw, ph);
                                
                                _layoutMetadata.width = pw;
                                _layoutMetadata.height = ph;
                                // Doesn't seem to work so well
                                // _layoutMetadata.percentWidth = pw;     
                                // _layoutMetadata.percentHeight = ph;
                                // _layoutMetadata.percentX = 0;     
                                //_layoutMetadata.percentY = 0;     
                                _layoutMetadata.percentWidth = 100;     
                                _layoutMetadata.percentHeight = 100;
                                
                           }
                      ]]>
                 </mx:Script>
                 
                 <mx:VBox id="mainBox" 
                      width="80%" height="80%"
                      borderStyle="solid"
                      borderColor="0x0000ff" 
                      horizontalAlign="center"
                      horizontalCenter="0"
                      horizontalGap="0" 
                      verticalAlign="middle"
                      verticalCenter="0"
                      verticalGap="0"
                      >
                      <samples:MediaContainerUIComponent 
                           id="mediaContainer"  
                           horizontalCenter="0" 
                           verticalCenter="0" />     
                 </mx:VBox>
                 
            </mx:WindowedApplication>
            
            Thanks a lot,
            Cheers,
            Julien

            • 3. Re: MediaContainerUIComponent resizing and positionning
              bringrags Level 4

              Looks good to me.  Note that you probably don't need to set all of the layout metadata that you're currently setting.  I think you only need to set the scaleMode to LETTERBOX to get the desired behavior.

              • 4. Re: MediaContainerUIComponent resizing and positionning
                jcastelain Level 1

                Thanks Brian,


                Actually setting the ScaleMode to ScaleMode.LETTERBOX and resizing the MediaContainerUIComponent's container did exactly what I wanted, and thanks for those tips about the LayoutMetadata.

                 

                Cheers,

                Julien