IE9中的HTML5视频在其两侧显示黑色边框
问题描述:
我在我的网站中使用了HTML5视频标记。该视频与所有浏览器完美播放,但在IE9中显示黑色边框(黑色扩展名)。它就像通常那样,当播放器的尺寸大于视频尺寸时,视频播放器将在其两侧显示一些黑色的扩展。IE9中的HTML5视频在其两侧显示黑色边框
答
我以前有过这个问题,通常问题出在视频本身。在对视频进行编码时,尽可能将您的视频设置与您在标签中使用的内容进行匹配。它不应该成为你的障碍,一旦你仔细检查视频,你会发现一个差异。
答
这是我们使用的解决方案。
对于视频,我们默认显示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列,它覆盖了视频黑色边框。你可以调整这些,甚至如果需要添加底部和顶部。
照片
绿色边界实际上是不透明的白色格,所以你可以坐在效果。这可能很不方便,但它是我们找到的最佳解决方案。
最后
结果要好得多,你可以看到如下:
什么是视频的实际尺寸和容器的尺寸是多少? – 2012-04-18 05:46:50
其实我已经将视频尺寸转换为592 X 280,并且容器也具有相同的尺寸。 – Sakeer 2012-04-18 05:53:05
是的,视频的底部与播放器的底部正确对齐。现在我用其他一些虚拟视频替换了视频,这些视频播放的是正确的宽度和高度。我认为问题出在我的视频上。 – Sakeer 2012-04-18 06:43:03