IE9のHTML5ビデオの両面に黒い境界線が表示されています

Question

私のウェブサイトでHTML5ビデオタグを使用しています。そのビデオはすべてのブラウザで完全に再生されていますが、IE9では黒い枠線（黒の拡張子）が表示されます。通常、ビデオプレーヤーは、プレーヤーのサイズがビデオのサイズを上回ると、両側に黒色の拡張子が表示されます。

Answer 1

私はこれまでにこの問題を抱えていました。通常、問題は動画自体にあります。あなたのビデオをエンコードする際には、あなたのタグで使用するものにできるだけ近い設定を合わせてみてください。それはあなたのための障害ではないはずです。一度ビデオを少し吟味すれば、矛盾が見えます。

Answer 2

これは私たちが使用する解決方法です。

動画の場合、デフォルトでHTML5が表示され、CDNストレージにバックアップされます。我々はまた、フラッシュのために後退し、非フラッシュのために後退しています。そのため、まずHTML5をチェックしてからフラッシュをチェックし、フラッシュがサポートされていないため、ユーザーがFred Flintstonesマシンをアップグレードする旨のメッセージが表示されない場合、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要素です。それはハッキーかもしれませんが、私たちが見つけた最高の解決策です。

決勝

あなたは以下を参照することができますように、結果がはるかに優れている：