Chrome中的HTML5视频边框半径无效

Question

我试图让我的HTML5视频具有透明度的左上角和左下角,就像使用border-radius时的行为一样.不幸的是,在Chrome中,边界半径在HTML视频标签上出于某种原因不起作用,但在IE10和Firefox中也是如此.

在尝试实现这一目标的几次尝试之后,我偶然发现了这个答案:https://stackoverflow.com/a/16470150/1115367但我很快发现这将在圆角处填充颜色,而不是使其透明.

如何在不降低视频性能的情况下使Google Chrome中的HTML5视频处理边框半径？

如果有必要,我愿意使用javascript/jQuery.

Answer 1

引用另一篇文章:

WebKit中有一些突出的错误,它与border-radius一起剪切内容,就像这一个或特别是视频元素一样.

如果将border-radius应用于环绕视频的元素,并添加a -webkit-mask-image,则可以在Chrome中完成.这是一个掩盖透明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>