调整弹出视频的大小，保持 flex 中的纵横比

Question

我有一个 TitleWindow 弹出窗口，当我单击拇指时，它会打开一个 videoDisplay 来播放视频。我想要的是我的弹出窗口调整大小和其中的视频，但要保持其原始纵横比而不是拉伸...

有什么想法吗？

非常感谢！这是我的弹出窗口：

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx"
           close="CloseWindow(event)" >
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<fx:Script>
    <![CDATA[
        import mx.events.CloseEvent;
        import mx.events.ResizeEvent;
        import mx.managers.PopUpManager;


        [Bindable]public var mediaServerUrl:String;
        [Bindable]public var videoFolder:String;
        [Bindable]public var filename:String;
        [Bindable]public var comments:String;


        private var ns:NetStream;
        private var nc:NetConnection;
        private var video:Video;
        private var meta:Object;

        private function ns_onMetaData(item:Object):void {
            trace("meta");
            meta = item;
            // Resize Video object to same size as meta data.
            video.width = item.width;
            video.height = item.height;
            // Resize UIComponent to same size as Video object.
            myVid.width = video.width;
            myVid.height = video.height;

        }

        private function fetch_rec():void {
            var nsClient:Object = {};
            nsClient.onMetaData = ns_onMetaData;


            nc = new NetConnection();
            nc.connect(null);
            ns = new NetStream(nc);
            ns.client = nsClient;

            video = new Video(myVid.width,myVid.height);
            video.attachNetStream(ns);
            video.smoothing=true;
            myVid.addChild(video);
            ns.play(mediaServerUrl+"/"+videoFolder+"/"+filename+".flv");

        }

        protected function CloseWindow(event:CloseEvent):void
        {
            ns.close();
            nc.close();
            PopUpManager.removePopUp(this);

        }

    ]]>
</fx:Script>

<mx:VideoDisplay id="myVid" visible="true" x="0" bottom="50" width="100%" height="100%"
                 maintainAspectRatio="true"
                 autoPlay="true" 
                 creationComplete="fetch_rec()"
                 playheadUpdate="progBar.setProgress(myVid.playheadTime,myVid.totalTime)"/>

<mx:ProgressBar id="progBar" left="10" right="10" bottom="60" height="10" label="" mode="manual"/>
<s:Label x="10" bottom="30" text="Σχόλια:"/>

<s:Label x="10" bottom="10" text="{comments}"/></s:TitleWindow>

调用这个弹出窗口：

 protected function launchPopUp(event:MouseEvent):void
        {
            if(list.selectedItem){
                win = new ViewVideoPopUp();
                win.width = this.width;
                win.height = this.height;

                //give what is needed to play the video selected
                win.videoFolder = videoFolder;              // the video's folder name
                win.mediaServerUrl = mediaServerUrl;        // the media server url
                win.filename = list.selectedItem.filename;  // the file to be played
                win.comments = list.selectedItem.comments;  // the comments left for that
                win.title = list.selectedItem.name+" στις "+list.selectedItem.date; //title of the window

                this.addEventListener(ResizeEvent.RESIZE, window_resize);
                PopUpManager.addPopUp(win,this,true);
                PopUpManager.centerPopUp(win);

            }
        }

Answer 1

编辑（12/15）： 好的，我尝试了您的代码并添加了一种方法来根据父容器的纵横比强制视频的纵横比。我在 VideoDisplay 组件周围放置了一个 HGroup，并用它来确定视频的大小。如果窗口和视频的大小不同，它还会在弹出窗口中居中显示视频。

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" 
           close="CloseWindow(event)" autoLayout="true">
<fx:Script>
    <![CDATA[
        import mx.events.CloseEvent;
        import mx.events.ResizeEvent;
        import mx.managers.PopUpManager;


        [Bindable]public var mediaServerUrl:String;
        [Bindable]public var videoFolder:String;
        [Bindable]public var filename:String;
        [Bindable]public var comments:String;


        private var ns:NetStream;
        private var nc:NetConnection;
        private var video:Video;
        private var meta:Object;

        private function ns_onMetaData(item:Object):void {
            trace("meta");
            meta = item;

            var vidAspectRatio:Number = item.width / item.height;
            var titleWindowAspectRatio:Number = vidContainer.width / vidContainer.height;

            // Resize Video object to same size as meta data.
            if ( vidAspectRatio < titleWindowAspectRatio ) // TitleWindow too wide
            {

                video.height = vidContainer.height;
                video.width = video.height * vidAspectRatio;
            } 
            else if ( vidAspectRatio > titleWindowAspectRatio )  // TitleWindow too tall
            {
                video.width = vidContainer.width;
                video.height = video.width / vidAspectRatio;
            } 
            else // TitleWindow and Video have same aspect ratio and fits just right
            {
                video.width = vidContainer.width;
                video.height = vidContainer.height;
            }

            // Resize UIComponent to same size as Video object.
            myVid.width = video.width;
            myVid.height = video.height;

        }

        private function fetch_rec():void {
            var nsClient:Object = {};
            nsClient.onMetaData = ns_onMetaData;

            nc = new NetConnection();
            nc.connect(null);
            ns = new NetStream(nc);
            ns.client = nsClient;

            video = new Video(myVid.width,myVid.height);
            video.attachNetStream(ns);
            video.smoothing=true;
            myVid.addChild(video);

            ns.play("../swf/barsandtone.flv");
        }

        protected function CloseWindow(event:CloseEvent):void
        {
            ns.close();
            nc.close();
            PopUpManager.removePopUp(this);

        }

    ]]>
</fx:Script>
<s:HGroup id="vidContainer" verticalAlign="middle" horizontalAlign="center" height="100%" width="100%" bottom="50" >
    <mx:VideoDisplay id="myVid" visible="true"
                     autoPlay="true" 
                     creationComplete="fetch_rec()"
                     playheadUpdate="progBar.setProgress(myVid.playheadTime,myVid.totalTime)"/>
</s:HGroup>

<mx:ProgressBar id="progBar" left="10" right="10" bottom="60" height="10" label="" mode="manual"/>
<s:Label x="10" bottom="30" text="Σχόλια:"/>

<s:Label x="10" bottom="10" text="{comments}"/>
</s:TitleWindow>