0

我有一个Silverlight 视频播放器。当页面宽度小于 960px 时，播放器会进入 100% 宽度。我试图让高度与宽度一起调整（控件的宽度/ 1.77777778 + 40px）。

caniuse.com声明calc()在 IE9+、Firefox 14+、Chrome 21+ 和 Safari 6+ 中受支持。 它还声明vw在 IE9+、Chrome 21+ 和 Safari 6+（无 Firefox）中受支持。

我正在使用这段 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()和. 不幸的是，只有 IE9+ 工作（我对IEvw的支持水平印象深刻）。calc()

我还没有看到将 、 和除法组合起来以获取流体高度的教程或示例calc()，vw所以也许组合是问题所在。

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

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

在另一个问题中，我确实看到了对FitVid.JS的引用。有对 Vimeo、YouTube 等的参考，但我怀疑它是否可以与本地 Silverlight 播放器一起使用（我需要 Silverlight 用于很多很多 WMV）。

4

1 回答 1

0

高度计算可以使用相对填充完全在 css 中完成。Foundation Framework 将这种技术用于他们的 Flex Video。详细解释请查看http://alistapart.com/article/creating-intrinsic-ratios-for-video

于 2013-02-11T17:52:45.590 回答