我在我的网站中使用了HTML5视频标记。该视频与所有浏览器完美播放，但在IE9中显示黑色边框（黑色扩展名）。它就像通常那样，当播放器的尺寸大于视频尺寸时，视频播放器将在其两侧显示一些黑色的扩展。IE9中的HTML5视频在其两侧显示黑色边框

来源

2012-04-18 Sakeer

什么是视频的实际尺寸和容器的尺寸是多少？ – 2012-04-18 05:46:50

其实我已经将视频尺寸转换为592 X 280，并且容器也具有相同的尺寸。 – Sakeer 2012-04-18 05:53:05

是的，视频的底部与播放器的底部正确对齐。现在我用其他一些虚拟视频替换了视频，这些视频播放的是正确的宽度和高度。我认为问题出在我的视频上。 – Sakeer 2012-04-18 06:43:03

我以前有过这个问题，通常问题出在视频本身。在对视频进行编码时，尽可能将您的视频设置与您在标签中使用的内容进行匹配。它不应该成为你的障碍，一旦你仔细检查视频，你会发现一个差异。

来源

2012-06-01 21:00:36 AGE

这是我们使用的解决方案。

对于视频，我们默认显示HTML5支持CDN存储。我们也有闪回，然后回落为非闪存。因此，它首先检查HTML5，然后闪烁失败，然后没有内容提供非Flash支持，表明有关用户升级他们的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列，它覆盖了视频黑色边框。你可以调整这些，甚至如果需要添加底部和顶部。

照片

enter image description here

绿色边界实际上是不透明的白色格，所以你可以坐在效果。这可能很不方便，但它是我们找到的最佳解决方案。

最后

结果要好得多，你可以看到如下：

enter image description here

来源

2012-12-05 15:40:35 TheBlackBenzKid

IE9中的HTML5视频在其两侧显示黑色边框

回答

代码信息

照片

最后

相关问题