css - IE9 の HTML5 ビデオの両側に黒い境界線が表示される

Question

Web サイトで HTML5 ビデオ タグを使用しています。そのビデオはすべてのブラウザーで完全に再生されますが、IE9 では黒い境界線 (黒い拡張子) が表示されます。これは通常、プレーヤーのサイズがビデオのサイズよりも大きい場合に、ビデオ プレーヤーの両側に黒い色の拡張が表示されるようなものです。

Answer 1

これが私たちが使用するソリューションです。

ビデオについては、デフォルトで CDN ストレージに裏打ちされた HTML5 を表示します。また、Flash にフォールバックしてから非 Flash にフォールバックします。そのため、最初に HTML5 をチェックし、次に Flash が失敗し、Fred Flintstones マシンをアップグレードするユーザーに関するメッセージを示す非 Flash サポートのコンテンツがありません。BedRock から移動できる代替手段も提供しています!

コード

<style type="text/css">
.videobox{position:relative;width:300px;500px}
#video_box_id_css, .video_box_class{border:0px !important}
/* BACKGROUND SHOULD BE PAGE BACKGROUND */
.left{position:absolute;width:3px;height:500px;left:1px;z-index:10;background:#fff}
.right{position:absolute;width:3px;height:500px;right:1px;z-index:10;background:#fff}
</style>


<div class="videobox">

    <video id="video_box_id_css" class="video_box_class" autoplay loop width="300" height="500">
        <source src="http://video.cdn.com/xxxxxxxxxx/704_black_VP8.webm" type='video/webm'/>
        <source src="http://video.cdn.com/xxxxxxxxxx/704_black_libtheora.ogv" type='video/ogg'/>
        <source src="http://video.cdn.com/xxxxxxxxxx/704_black_x264.mp4" type='video/mp4'/>
        <!--
                ALTERNATIVE CONTENT LIKE SWF
                VIDEOS FOR NON HTML5 BROWSER
        //-->
    </video>
    
    <div class="left"></div>
    <div class="right"></div>


</div>

コード情報

私たちのコードは上記のとおりです (読みやすいようにフラッシュを削除しました)。注意すべき点は、ビデオの黒い境界線を超える左右の div 列を追加することです。これらを微調整したり、必要に応じて上下を追加したりすることもできます。

写真

緑の境界線は、実際には不透明な白い div であるため、エフェクトを座ることができます。ハックかもしれませんが、私たちが見つけた最良の解決策です。

最後の

以下に示すように、結果ははるかに優れています。

Answer 2

以前にこの問題が発生したことがあります。通常、問題はビデオ自体にあります。ビデオをエンコードするときは、設定をタグで使用するものにできるだけ近づけるようにしてください。ビデオをもう少し詳しく調べると、矛盾が見られるはずです。