4 Replies Latest reply on Mar 9, 2010 10:07 AM by mattparisi

    ScaleMode & Video Size

    JesterXL

      In my test Flex app that loads in an 2 rtmp videos, the video works just fine.  I'm proxying the MediaPlayerSprite using Flex' invalidation model, and all is well.

       

      Integrating into my app, it doesn't scale the video.  I've traced out the widths/heights + scaleMode, and it all seems fine.  I'm confused as hell since if I set the video to 500 pixels height, the MediaPlayerSprite reports that the value took, but it only draws at like 300 high, or whatever the media's true size is.  Playing with scaleMode's doesn't work; it does change the position and attempted drawing routine, but the media doesn't change it size; it refuses to go bigger than the media.

       

      ...back in my tester, everything works.

       

      SO confused.

       

      I even set the displayObject size, and it reports the correct size... but the video refuses to draw bigger.  w..t...f?

        • 1. Re: ScaleMode & Video Size
          bringrags Level 4

          Since you're on public trunk now (for better or for worse :-)), you might want to look at MediaContainerUIComponent (replacement for MediaPlayerWrapper) in conjunction with the new LayoutMetadata class.  You can assign a LayoutMetadata object to MediaContainer's constructor.  The LayoutMetadata exposes all (or most) of the layout properties you should need.  Here's a sample app that shows some simple LayoutMetadata usage (but without MediaContainerUIComponent):

           

          http://opensource.adobe.com/svn/opensource/osmf/trunk/apps/samples/framework/LayoutSample/ src/LayoutSample.as

           

          There are a few more complex examples in the same folder.

          • 2. Re: ScaleMode & Video Size
            mattparisi

            Hi everyone.  I would love to see an example of an OSMF player using MediaContainerUIComponent to scale a MediaElement.  A simple player that has a button which cycles through each of the 4 scale modes would ROCK!!  I cannot seem to get this to work properly.

             

            Thanks in advance.

             

            Matt

            • 3. Re: ScaleMode & Video Size
              Edwin van Rijkom Level 2

              Hi Matt,

               

              That would look something like this:

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application
                   xmlns:mx                ="http://www.adobe.com/2006/mxml"
                   xmlns:samples           ="org.osmf.samples.*"
                   layout                    ="vertical"
                   applicationComplete ="onApplicationComplete()"
                   horizontalAlign          ="center"
                   backgroundColor          ="333333"
                   >
                   
                   <mx:Script>
                        <![CDATA[
                             import mx.collections.ArrayCollection;
                             
                             import org.osmf.layout.ScaleMode;
                             import org.osmf.media.URLResource;
                             import org.osmf.layout.LayoutMetadata;
                             import org.osmf.elements.VideoElement;
                             import org.osmf.media.MediaPlayer;
                             import org.osmf.containers.MediaContainer;
                             
                             private const mediaContainer:MediaContainer = new MediaContainer();
                             private const mediaPlayer:MediaPlayer = new MediaPlayer();
                             private const video:VideoElement = new VideoElement(new URLResource(REMOTE_PROGRESSIVE));
                             
                             private const scaleModes:ArrayCollection
                                  = new ArrayCollection
                                       (      [ {label:"letter box", data: ScaleMode.LETTERBOX}
                                            , {label:"stretch", data: ScaleMode.STRETCH}
                                            , {label:"zoom", data: ScaleMode.ZOOM}
                                            , {label:"none", data: ScaleMode.NONE}
                                            ]
                                       );
                   
                             private static const REMOTE_PROGRESSIVE:String = "http://mediapm.edgesuite.net/osmf/content/test/logo_animated.flv";
                             
                             private function onApplicationComplete():void
                             {
                                  video.smoothing = true;
                                  
                                  mediaContainer.addMediaElement(video);
                                  mediaContainer.clipChildren = true;
                                  
                                  mediaPlayer.media = video;
                                  mediaPlayer.loop = true;
                             }
                             
                             private function onComboBoxChange():void
                             {
                                  LayoutMetadata
                                       (mediaPlayer.media.getMetadata(LayoutMetadata.LAYOUT_NAMESPACE))
                                       .scaleMode
                                            = comboBox.selectedItem.data;
                             }
                        ]]>
                   </mx:Script>
              
                   <samples:MediaContainerUIComponent
                        id                    ="flexMediaContainer"
                        width               ="100%"
                        height               ="100%"
                        container          ="{mediaContainer}"
                        />
                        
                   <mx:ComboBox
                        id                    = "comboBox"
                        dataProvider     = "{scaleModes}"
                        change               = "onComboBoxChange()"
                        selectedIndex     = "0"
                        />
              
              </mx:Application> 
              

               

              Hope it's helpful!

               

              Cheers,

              Edwin

              • 4. Re: ScaleMode & Video Size
                mattparisi Level 1

                You're a life saver!!

                 

                Thank you.

                 

                Matt