流體的Silverlight視頻播放器計算器（100vw/1.7777778）

我有一個Silverlight video player。當頁面的寬度小於960像素，玩家達到100％的寬度。我試圖讓高度與寬度（寬/ 1.77777778 + 40像素的控件）一起調整。流體的Silverlight視頻播放器計算器（100vw/1.7777778）

caniuse.com指出在IE9 +，Firefox 14 +，Chrome 21+和Safari 6 +中支持calc()。 It還指出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()和vw不幸的是，只有IE9 +的作品（我對IE的calc()的支持水平印象深刻）

我還沒有看到教程或例子流體高度結合calc()，vw，和分裂，所以或許組合的問題。

在我的代碼中是否有問題，或者應該工作（也許我找到了一個bug）？

爲了勸阻建議，我已經嘗試過jQuery的height()（它不是流暢的，因爲你必須刷新每次更改才能生效）。我想我可以包含一個函數來觀察頁面的寬度。不過，我的努力是用CSS來完成。

我看過，in another question，參考FitVid.JS。有Vimeo，YouTube等的參考，但我質疑它是否可以與本地Silverlight播放器（我需要許多許多WMV的Silverlight）一起使用。

來源

2012-10-26 doubleJ

高度計算可以完全在CSS中使用相對填充完成。 Foundation Framework爲其Flex視頻使用此技術。有關詳細說明，請查看http://alistapart.com/article/creating-intrinsic-ratios-for-video

來源

2013-02-11 17:52:45 Dara

Hehehe ...我在另一個區域執行此操作，但沒有問題視頻播放器（'#content {padding-top：56.24％;}'）。這是一個100％寬度的橫幅圖形，隨着頁面的寬度變得更高或更短。 – doubleJ

流體的Silverlight視頻播放器計算器（100vw/1.7777778）

回答

相關問題