我试图让我的 HTML5 视频具有透明的左上角和左下角圆角，就像使用 border-radius 时的行为一样。不幸的是，在 Chrome 中，由于某种原因，border-radius 在 HTML 视频标签上不起作用，但在 IE10 和 Firefox 中却起作用。
经过多次尝试实现这一目标后，我偶然发现了这个答案：https://stackoverflow.com/a/16470150/1115367 https://stackoverflow.com/a/16470150/1115367但我很快发现这会填充圆角的颜色，而不是使其透明。
如何在 Google Chrome 中使边框半径适用于 HTML5 视频而不降低视频性能？
如有必要，我愿意使用 javascript / jQuery。
去引用另一个帖子 https://stackoverflow.com/a/6239565/711416:
There are some outstanding bugs in WebKit to do with it clipping content in concert with border-radius, like this one https://bugs.webkit.org/show_bug.cgi?id=50072 or this one specifically about the video element https://bugs.webkit.org/show_bug.cgi?id=29824.
如果将边框半径应用于环绕视频的元素，并添加-webkit-mask-image，然后就可以在Chrome中完成了。这是一个遮罩透明 png 并剪辑视频角的演示：
Demo（透明背景）：http://jsfiddle.net/pe3QS/24/ http://jsfiddle.net/pe3QS/24/
Update：我将 HTML/CSS 更改为仅使用一个包装元素，并且它适用于（至少）IE9+、FF 和 Chrome。
CSS:
div.outer {
float: left;
height: 240px;
}
div.outer video {
width: 320px;
height: 100%;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
border-radius: 32px 0 32px 0;
}
HTML:
<div class="outer">
<video src="http://www.w3schools.com/html/movie.ogg" type="video/ogg" controls></video>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
