Изменить размер всплывающего видео, сохраняя соотношение сторон в flex - PullRequest
Новая
       42

Изменить размер всплывающего видео, сохраняя соотношение сторон в flex

0 голосов
/ 12 декабря 2011

У меня есть всплывающее окно TitleWindow, которое открывает видео-дисплей для воспроизведения видео, когда я нажимаю на большой палец. Я хочу, чтобы мое всплывающее окно меняло размеры и видео внутри него, но сохраняло исходное соотношение сторон, а не растягивалось ...

есть идеи?

Большое спасибо! Вот мое всплывающее окно: 

<?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);

            }
        }

1 Ответ

0 голосов
/ 15 декабря 2011

РЕДАКТИРОВАТЬ (12/15): Хорошо, я попробовал ваш код и добавил метод, чтобы принудительно установить соотношение сторон видео на основе соотношения сторон родительского контейнера. Я поместил HGroup вокруг компонента 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)" 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>
...