【问题标题】：HTML5 video tag in IEIE 中的 HTML5 视频标签
【发布时间】：2014-03-25 00:15:40
【问题描述】：

我在我的代码中使用了视频标签

<div class="mask">                                   
  <video class="circleVideo" id="video" width="423" height="423" autoplay="autoplay" style="border-radius: 220px;">
    <source src="videoconv/loginVideo.mp4" type="video/mp4" />
    <source src="videoconv/loginVideo.ogv" type="video/ogg">
    <source src="videoconv/loginVideo.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
</div>

这里我为视频和 div 添加了一些 Css。

        border-radius: 220px;
        height: 423px;
        width: 423px;
        overflow: hidden;
        position: absolute;
        top: 198px;
        right: -416px;
        background-color: rgba(255,163,25,0.3);
        -webkit-border-radius: 220px;
        -moz-border-radius: 220px;
        -ms-border-radius: 220px;
        -o-border-radius: 220px;
        /*clip: rect(1px, 423px, 423px, 0);*/
        -khtml-border-radius: 220px;
        -webkit-mask-image: url(../images/mask_img.png);
    }


    .circleVideo {
        width: 582px;
        border-radius: 220px;
        margin-top: -33px;
        margin-left: -74px;
        height: 488px;
    }

这是我添加的js，可以在IE中看到这个：

html5media.min.js

我无法将 CSS 应用到 IE 中的视频。它在 chrome 和 firefox 和 opera 中都能正常工作。

我还应该怎么做才能让视频也出现在 IE 中的圆圈中？

【问题讨论】：

标签： css html

【解决方案1】：

IE 的边界半径可能很棘手，似乎有人遇到了类似的问题：here

在 IE9 之前有一些 CSS3 兼容性的解决方法，很多人会建议 Modenizer - 一个超级简单的尝试方法是 CSS3Pie

【讨论】：

【解决方案2】：

按照@reto 的建议检查 IE 版本。

请注意，IE 的早期版本中不存在border-radius。如果您希望支持早期版本的 IE，您可能需要编写针对早期版本的样式。
在 IE 中检查元素以确保您设置样式的元素确实存在。

根据您使用的 IE 版本的年龄，我建议您采用渐进增强的方法¹。

参考文献

渐进增强：http://en.wikipedia.org/wiki/Progressive_enhancement

【讨论】：