IE9中的HTML5视频两侧都显示黑色边框 [英] HTML5 video in IE9 is showing a black border on its both sides

问题描述

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

I am using a HTML5 video tag in my website. That video is playing perfectly with all browsers, but in IE9 it shows a black border(black extension). It is like the one usually the video players will show some black color extension on its both the side when the size of the player is more than the size of the video.

推荐答案

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

This is the solution we use.

对于视频，我们在CDN存储中默认显示HTML5。我们也有退回Flash，然后退回非闪存。所以它首先检查HTML5，然后闪存失败，然后没有非闪存支持的内容指示有关用户升级他们的Fred Flintstones机器的一些消息，我们还提供替代方案，以便他们可以搬出BedRock！

For video, we display HTML5 by default backed in CDN storage. We also have fall back for Flash and then fall back for non-flash. So it checks HTML5 first, then flash failing that and then no content for non-flash support indicating some message about the user to upgrade their Fred Flintstones machine, we also offer an alternative so they can move out of 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列，它跨过视频黑色边框。您可以调整这些，甚至可以根据需要添加底部和顶部。

Code Info

Our code is above (removed the flash so it is more readable). A side thing to note is we add a left and right div column which goes over the video black borders. You can tweak these and even add a bottom and top if needed.

绿色边框实际上是不透明度的白色div所以你可以坐下来效果。这可能是hacky，但它是我们找到的最佳解决方案。

The green border is actually the white div in opacity so you can sit the effect. It may be hacky but it the best solution we found.

结果好多了，因为你可以看到：

The result is much better as you can see below:

这篇关于IE9中的HTML5视频两侧都显示黑色边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！