Question

我有Silverlight video player。当页面宽度小于960px时，播放器的宽度为100％。我正在尝试调整高度以及宽度（宽度/ 1.77777778 + 40px用于控件）。

caniuse.com表示IE9 +，Firefox 14 +，Chrome 21+和Safari 6+支持calc()。 It还声明IE9 +，Chrome 21+和Safari 6+（无Firefox）支持vw。

我正在使用这一点HTML：

<!-- I put silverlight first because firefox and opera won't embed an mp4/mp3
    firefox won't fall back to the silverlight install link if only mp4/mp3 is available (webm or ogg must be available for the fallback to work) -->
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2">
    <!-- load the player -->
    <param name="source" value="http://iissmooth.webcastcenter.com/SmoothStreamingPlayer.xap"/>
    <!-- note the DeliveryMethod -->
    <param name="InitParams" value="DeliveryMethod=Progressive Download, mediaurl=http://www.flcbranson.org/media/GreaterFaithConference2013-Ad.mp4" />
        <!-- silverlight install link -->
        <p><a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0"><img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight"></a></p>
        <p><a href="media/GreaterFaithConference2013-Ad.mp4">Download Video (MP4)</a></p>
</object>

这一点CSS：

@media screen and (max-width:959px) {
    .events object {
        height:-moz-calc(100vw / 1.777777778 + 40px);
        height:-webkit-calc(100vw / 1.777777778 + 40px);
        height:-ms-calc(100vw / 1.777777778 + 40px);
        height:-o-calc(100vw / 1.777777778 + 40px);
        height:calc(100vw / 1.777777778 + 40px);
    }
}

从理论上讲，它应该适用于IE9 +和Chrome 21+（支持calc()和vw。不幸的是，只有IE9 +有效（我对calc()支持的水平印象深刻IE有）。

我还没有看到将calc()，vw和分组合并为流体高度的教程或示例，因此组合可能就是问题。

我的代码中是否有问题，或者这是否有效（也许我发现了一个错误）？

为了劝阻建议，我已经尝试了JQuery的height()（因为你必须刷新每个更改才能生效）。我想我可以包含一个功能来一直观看页面的宽度。不过，我的努力是用CSS做的。

我确实看到in another question，引用了FitVid.JS。有人提到Vimeo，YouTube等......但是我怀疑它是否适用于本地Silverlight播放器（我需要Silverlight用于许多，很多，WMV）。

Answer 1

高度计算可以使用相对填充完全在css中完成。 Foundation Framework将此技术用于其Flex视频。有关详细说明，请查看http://alistapart.com/article/creating-intrinsic-ratios-for-video

流体Silverlight视频播放器与Calc（100vw / 1.7777778）

1 个答案: