javascript - Chrome中的HTML5视频边框半径无法正常工作

我试图使我的HTML5视频具有透明的左上角和左下角圆角，就像使用边框半径时的行为一样。不幸的是，在Chrome中，由于某种原因，border-radius在HTML video标签上不起作用，但在IE10和Firefox中却起作用。

经过几次尝试实现这一目标后，我偶然发现了以下答案:https://stackoverflow.com/a/16470150/1115367但是我很快发现，它会在圆角处填充一种颜色，而不是使其透明。

如何在不降低视频性能的情况下使边界半径适用于Google Chrome浏览器中的HTML5视频？

如有必要，我愿意使用javascript / jQuery。

最佳答案

引用another post:



如果您将边框半径应用于环绕视频的元素，并添加-webkit-mask-image，则可以在Chrome中完成。这是一个 mask 透明png并剪辑视频角落的演示:

演示(透明背景):http://jsfiddle.net/pe3QS/24/

更新:我将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>