resize video child of VideoDisplay to the same size

Question

i have the following code to play a video stored in the media server:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx"
         width="592" height="372">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.events.ResizeEvent;

            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();
                video.attachNetStream(ns);
                video.smoothing=true;
                myVid.addChild(video);
                ns.play("http://localhost:5080/oflaDemo/recordings/firstattempt.flv");

            }



        ]]>
    </fx:Script>

    <mx:VideoDisplay id="myVid" bottom="0" width="100%" height="100%"                   
    /*??how to make the progressbar work???*/                playheadUpdate="progBar.setProgress(myVid.playheadTime,myVid.totalTime)"/>

    <s:HGroup right="10" top="7">
        <mx:Button id="button4" x="498" y="250" label="Play/Reload" click="fetch_rec();"/>
        <mx:Button id="button5" x="512" y="279" label="Pause" click="ns.pause()"/>
    </s:HGroup>

    <mx:ProgressBar id="progBar" left="10" right="10" bottom="7" height="10" label="" mode="manual"/>


</s:Group>

and i would like to know 1)how to make the video follow the resizing of the myVid VideoDisplay and does not show small inside it as it does and 2)how to make the progressbar work with the streamed video...

Thanks in advance for your help!

score 1 · Answer 1 · edited Jan 03 '12 at 22:12

I can't answer for progress bar. For scaling video to video display I use Transform and Matrix, when VideoDisplay size is changed I just replace old Matrix with new scaled one. If your video will be smaller then target then it should expand.

Here are snippets of code (I skip creation, etc):

<!-- language: lang-xml -->

protected function scaleVideoToDisplay():void {
     var ratio:Number;
     if (video == null) {
        return;
     }else if (video.width == 0 || video.height == 0) {
        ratio = 0.0;
     }else {
        ratio = Math.min(
                videoDisplay.width / video.width,
                videoDisplay.height / video.height);
    }
    video.transform.matrix = new Matrix(ratio, 0, 0, ratio);
}
<s:VideoDisplay width="100%" height="100%" resize="scaleVideoToDisplay()"/>
<!-- langugae:lang-none -->

For video creation I use:

<!-- language: lang-xml -->

video.transform = new Transform(video);

In addition to this You will probably need to scale video after creation.

resize video child of VideoDisplay to the same size

1 Answers1