在调整浏览器大小时调整视频大小

时间:2015-12-13 16:17:39

标签: flash flex h.264 netstream

更新:我试图让FitVids与SWFObject动态发布(它确实支持)一起工作。

这是包装SWF的HTML:

NaN

这是SWF对象嵌入代码(我确实传递了视频显示组件的初始宽度/高度和流大小):

<div id="vidContainer" class="center-block">
<div id="primaryVideo" class="center displayNone">
    <div id="videoWrapper">
        <div id="flashContent"></div>
    </div>
</div>

在我的JS中,我为对象包装器设置了一个初始维度,它将宽度设置为浏览器宽度,然后初始化FitVids:

        flashvars.availableWidth = window.innerWidth;
        flashvars.availableHeight = .56 * window.innerWidth;
        flashvars.incomingStreamWidth = "1200";
        flashvars.incomingStreamHeight = "679";

        swfobject.embedSWF(
                "/path/to/my.swf", 
                "flashContent",
                "100%", "100%",
                swfVersionStr, xiSwfUrlStr,
                flashvars, params, attributes);

在我的Flash文件中,我不再进行大小调整,我只是将所有内容设置为100%宽度:

       $(document).ready(function(){
            setVidWrapperDimensions();
            $("#videoWrapper").fitVids();           
        });

    function setVidWrapperDimensions(){
        width = $("#vidContainer").width();
        height = Math.floor(.56 * width);               

        $("#videoWrapper").width(width);
        $("#videoWrapper").height(height);
    }

所以视频的初始大小很好但是当我调整浏览器大小时它根本没有响应;它只是保持大小。我在这里做错了什么?

我正在从Adobe Media Server流式传输视频并通过Flash播放器播放它,效果很好。我喜欢的是视频在用户调整浏览器大小时调整大小。

在我当前的实现中,只要用户调整到较小的大小,它就会很好用。在这种情况下,视频会正确调整大小。但是,如果他们调整大小,那么视频本身就不会调整大小。

我的猜测是,我并没有真正调整流的大小,而且我必须删除现有的网络流并将其替换为另一个。这是正确的方法吗?这样做会导致重大的性能问题吗?我这样做的尝试如下所示,但没有成功。

这就是我在JS中所拥有的:

<s:Group percentHeight="100" percentWidth="100">
    <s:VideoDisplay id="videoHolder" width="{this.availableWidth}" height="{this.availableHeight}"/>
</s:Group>

这是包装SWF的HTML:

$(window).resize(function(){
        var w = $("#vidContainer").width();
        var h = .56 * w;    

        var theApp = getFlexApp(attributes.name);
        theApp.jsResizePlayer(w,h);

        $("#videoWrapper").css("width",w);
        $("#videoWrapper").css("height",h);
    }); 

这是SWF对象嵌入代码:

<div id="vidContainer" class="center-block">
<div id="primaryVideo" class="center displayNone">
    <div id="videoWrapper">
        <div id="flashContent"></div>
    </div>
</div>

这是Flash文件中的调整大小代码:

swfobject.embedSWF(
                "/path/to/my.swf", 
                "flashContent",
                "100%", "100%",
                swfVersionStr, xiSwfUrlStr,
                flashvars, params, attributes);

这是MXML:

/**
     * Handles the js call if the user is resizing the browser window
     */
    public function jsResizePlayer(w:int,h:int):void
    {
        this.availableWidth = w;
        this.availableHeight = h;

        this.video.height = h;
        this.video.width = w;

        this.adjustStream(w,h);
    }

    private function adjustStream(w:int,h:int):void {
        video.attachNetStream(null);
        nsPlayer = new NetStream(nc);
        var videoStreamSettings:H264VideoStreamSettings = new H264VideoStreamSettings();
        videoStreamSettings.setMode(w, h, this.incomingStreamFPS);

        nsPlayer.videoStreamSettings = videoStreamSettings;

        video.attachNetStream(nsPlayer);
        nsPlayer.play(incomingStream, "live");
        this.validateNow();
    }

0 个答案:

没有答案