7

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

4

2 回答 2

2

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

对于视频，我们默认显示支持 CDN 存储的 HTML5。我们也有 Flash 的后备方案，然后非 Flash 方案的后备方案。所以它首先检查 HTML5，然后 flash 失败，然后没有非 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 列，该列越过视频黑色边框。如果需要，您可以调整这些，甚至添加底部和顶部。

照片

在此处输入图像描述

绿色边框实际上是不透明的白色 div，因此您可以坐下效果。它可能很老套，但它是我们找到的最佳解决方案。

最后

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

在此处输入图像描述

于 2012-12-05T15:40:35.670 回答
0

我以前遇到过这个问题，通常问题出在视频本身。当您对视频进行编码时，请尽量使设置与您将在标签中使用的设置相匹配。它不应该成为您的障碍，一旦您仔细检查视频，您应该会看到差异。

于 2012-06-01T21:00:36.313 回答