我在网站上使用HTML5视频标签。该视频可以在所有浏览器上完美播放,但在IE9中显示为黑色边框(黑色扩展名)。就像通常情况下,当视频播放器的尺寸大于视频尺寸时,视频播放器的两侧都会显示一些黑色的扩展名。

最佳答案

这就是我们使用的解决方案。
对于视频,默认情况下,我们在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>
代码信息
我们的代码在上面(删除了Flash,因此更具可读性)。需要注意的另一件事是,我们在视频黑色边框上方添加了一个左和右div列。您可以调整它们,甚至在需要时添加底部和顶部。
照片

绿色边框实际上是不透明度的白色div,因此您可以放置​​效果。它可能很骇人,但它是我们找到的最好的解决方案。
最后
如下面所示,结果要好得多:

10-07 19:06
查看更多