我在我的代码中使用了视频标签
<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 中也显示在一个圆圈中？
最佳答案
IE 的 border-radius 可能很棘手，看来有人遇到过类似的问题:here
对于 IE9 之前的 CSS3 兼容性，有一些解决方法，许多人会建议 Modenizer - 一个 super 简单的尝试方法是 CSS3Pie
关于css - IE 中的 HTML5 视频标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22611824/