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

Question

我在我的网站上使用HTML5视频标签。该视频与所有浏览器完美播放，但在IE9中它显示黑色边框（黑色扩展名）。当播放器的大小超过视频大小时，通常视频播放器会在其两侧显示一些黑色延伸。

Answer 1

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

对于视频，我们默认在CDN存储中显示HTML5。我们也有退回Flash，然后退回非闪存。所以它首先检查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，因此您可以坐下来效果。它可能是hacky，但它是我们找到的最佳解决方案。

最终

结果要好得多，如下所示：

Answer 2

之前我遇到过这个问题，通常问题出在视频本身。对视频进行编码时，请尽可能将设置与您在标记中使用的设置尽可能匹配。它不应该是你的障碍，一旦你仔细检查视频，你应该看到差异。