調整彈出視頻保持縱橫比在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

EDIT（12/15）： OK，我想你的代碼，並添加了一個方法來強制的長寬比該視頻基於父容器的寬高比。我在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>