1 Reply Latest reply on Sep 19, 2012 12:24 AM by RongieZeng

    How to change the display ratio of a video file in OSMF


      Hi all


      The video file I want to play has an incorrect width and height embedded in the video meta file (if you get the metadata of that video file, the width and height are incorrect). I'm now able to get the correct width and height, but I don't know how to apply them to OSMF. I'm using the MediaContainer for video display, the default behavior of that container keeps the original (which is incorrect) ratio (get from the video metadata) even I set the width and height. I'd appreciate if anyone can provide suggestion on how to do it.



        • 1. Re: How to change the display ratio of a video file in OSMF

          You can modify the OSMF library's ScaleModeUtils class to do this, here's the path:

          OSMF > org.osmf > layout > ScaleModeUtils.as .


          My code to implement the 16:9 and 4:3 ratios.


                                                           case ScaleMode.STRETCH:
                                                                      = new Point
                                                                                ( availableWidth
                                                                                , availableHeight
                                                  case ScaleMode.NONE:
                                                                      = new Point
                                                                                ( intrinsicWidth          || availableWidth
                                                                                , intrinsicHeight          || availableHeight
                                                           // ****custom begin
                                                  case ScaleMode.FourToThree: 
                                                            var availableRatio1:Number= availableWidth/ availableHeight; 
                                                            if(availableRatio1 > 4/3){
                                                                      result = new Point( availableHeight * 4/3, availableHeight);
                                                                      result = new Point( availableWidth , availableWidth * 3/4);
                                                  case ScaleMode.SixteenToNine:
                                                            var availableRatio2:Number= availableWidth/ availableHeight; 
                                                            if(availableRatio2 > 16/9){
                                                                      result = new Point( availableHeight * 16/9, availableHeight);
                                                                      result = new Point( availableWidth , availableWidth * 9/16);
                                                  // ****custom end


          And then you can set the container's scalemode to apply a ratio:

          layoutMetadata.scaleMode = ScaleMode.STRETCH;


          layoutMetadata.scaleMode = ScaleMode.FourToThree;