Video HTML5 trong IE9 đang hiển thị viền đen ở cả hai bên

Question

Tôi đang sử dụng thẻ video HTML5 trong trang web của mình. Video đó đang phát hoàn hảo với tất cả các trình duyệt, nhưng trong IE9 nó hiển thị đường viền màu đen (phần mở rộng màu đen). Nó giống như một trong những thường người chơi video sẽ hiển thị một số phần mở rộng màu đen trên cả hai mặt của nó khi kích thước của người chơi là nhiều hơn kích thước của video.

Answer 1

Tôi đã gặp sự cố này trước đây, thường sự cố nằm trong chính video đó. Khi bạn mã hóa video của mình, hãy thử so khớp các cài đặt càng chặt chẽ càng tốt với những gì bạn sẽ sử dụng trong thẻ của mình. Nó không phải là một rào cản cho bạn, một khi bạn kiểm tra video một chút gần hơn, bạn sẽ thấy một sự khác biệt.

Answer 2

Đây là giải pháp chúng tôi sử dụng.

Đối với video, chúng tôi hiển thị HTML5 theo mặc định được lưu trữ trong bộ nhớ CDN. Chúng tôi cũng đã quay trở lại cho Flash và sau đó rơi trở lại cho không flash. Vì vậy, nó kiểm tra HTML5 đầu tiên, sau đó flash thất bại và sau đó không có nội dung cho hỗ trợ không flash cho thấy một số thông báo về người dùng để nâng cấp máy Fred Flintstones của họ, chúng tôi cũng cung cấp một thay thế để họ có thể di chuyển ra khỏi BedRock!

Mã

<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> 

Mã Thông

Mã của chúng tôi là ở trên (loại bỏ đèn flash vì vậy nó rất dễ đọc hơn). Một điều cần lưu ý là chúng tôi thêm cột div bên trái và bên phải đi qua đường viền màu đen của video. Bạn có thể tinh chỉnh những điều này và thậm chí thêm phần dưới cùng và trên cùng nếu cần.

Ảnh

Biên giới xanh thực sự là div trắng đục, do đó bạn có thể ngồi ảnh hưởng. Nó có thể là hacky nhưng nó là giải pháp tốt nhất chúng tôi tìm thấy.

cuối cùng

Kết quả là tốt hơn nhiều như bạn có thể xem dưới đây: