0

Silverlight ビデオ プレーヤーがあります。ページの幅が 960px 未満の場合、プレーヤーは 100% 幅になります。幅に合わせて高さを調整しようとしています(コントロールの場合、幅/1.77777778 + 40px)。

caniuse.comcalc()は、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()とvw.calc()

calc()、vw、および流体の高さの除算を組み合わせたチュートリアルまたは例をまだ見ていないので、組み合わせが問題になる可能性があります。

私のコードに何か問題がありますか、それともこれでうまくいくはずですか (バグを見つけたのかもしれません)。

提案を思いとどまらせるために、私はすでにJQueryを試しheight()ました（変更を有効にするたびに更新する必要があるため、流動的ではありません）。ページの幅を常に監視する機能を含めることができると思います。ただし、私の努力はCSSでそれを行うことです。

別の質問で、 FitVid.JSへの参照を見ました。Vimeo、YouTube などへの言及がありますが、ローカルの Silverlight プレーヤーで動作するかどうかは疑問です (非常に多くの WMV に Silverlight が必要です)。

4

1 に答える 1

0

高さの計算は、相対的なパディングを使用して完全にcssで実行できます。この手法は、FoundationFrameworkがFlexVideoに使用しています。詳細な説明については、http：//alistapart.com/article/creating-intrinsic-ratios-for-videoを確認してください。

于 2013-02-11T17:52:45.590 に答える