将 VideoDisplay 的视频子级调整为相同大小

Question

我有以下代码来播放存储在媒体服务器中的视频：

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

我想知道 1）如何使视频跟随 myVid VideoDisplay 的大小调整，并且不会像以前那样在其内部显示很小，并且 2）如何使进度条与流媒体视频一起使用...

预先感谢您的帮助！

Answer 1

我无法回答进度条。为了将视频缩放到视频显示，我使用变换和矩阵，当视频显示大小更改时，我只需用新的缩放矩阵替换旧矩阵。如果您的视频比目标小，那么它应该扩大。

以下是代码片段（我跳过创建等）：

<!-- 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 -->

对于视频创建，我使用：

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

video.transform = new Transform(video);

除此之外，您可能需要在创建后缩放视频。