Javascript Chrome中的HTML5视频边框半径不工作

我试图使我的HTML5视频具有左上角和左下角的透明圆角，就像使用边界半径时的效果一样。不幸的是，在Chrome浏览器中，由于某种原因，边框半径在HTML视频标签上不起作用，但在IE10和Firefox中起作用

经过几次尝试后，我偶然发现了这个答案：但我很快发现，这将填充圆角中的颜色，而不是使其透明

如何使border radius在Google Chrome中处理HTML5视频而不降低视频性能

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

引用：

WebKit中有一些突出的bug，它们与按边框半径（border radius）剪切内容有关

如果将边框半径应用于环绕视频的元素，并添加

-webkit mask image

，则可以在Chrome中完成。下面是一个演示，它屏蔽了一个透明的png并剪辑了视频的各个角落：

演示（透明背景）：

更新：我将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;
}

<div class="outer">
    <video src="http://www.w3schools.com/html/movie.ogg" type="video/ogg" controls></video>
</div>

---

HTML：

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;
}

<div class="outer">
    <video src="http://www.w3schools.com/html/movie.ogg" type="video/ogg" controls></video>
</div>

---

您可以使用canvas元素来解决这个问题。它需要更多的代码，但这种方法也打开了许多其他的可能性和控制

您可以将CSS与Canvas元素一起应用：

#canvas {
    background:#000;
    border-radius:20px 0 0 20px; /* top left and bottom left as in OP */
}

然后手动创建并加载视频（也可以使用HTML加载视频，只隐藏原始视频元素）：

当然，这是一个最小的例子：对于其他类型（例如webm），您也需要正确地检查

canPlayType

参数（一些浏览器说“否”，所以也要检查这个参数，或者用空字符串替换“否”，以使用此处的长度）

---

不过需要注意的是：这不适用于Safari浏览器，因为它们不符合画布标准（在当前的编写中）。在这种情况下，他们不支持以视频元素作为源的drawImage。

我们有一个圆角和阴影的视频播放，它非常简单：

边界半径：22px；
溢出：隐藏；
-webkit转换：translateZ（0）；
盒影：0 19px 51px 0 rgba（0,0,0,0.16），0 14px 19px 0 rgba（0,0,0,0.07）

关键是
-webkit转换：translateZ（0）
。这行代码告诉浏览器在GPU上进行渲染，而不是在CPU上进行渲染，从而允许使用更多类似于这样的处理繁重的样式

从Safari 11、Chrome 65、Firefox 59、Edge Win 10和IE 11开始测试和工作
，因为我给了
div.outer
一个背景色来表示它是透明的。看第二个演示。啊。。我错过了。但在Chrome31中，我得到了全面的控制（都是rev 21/22）：毫无疑问，Chrome在剪辑方面有点时髦。这在所有浏览器上都会发生。如果他想要一个没有圆形控件的圆形视频，他需要自定义视频控件，就像画布视频没有可点击的控件一样。此外，OP需要一个圆角视频，我们都提供了。+1感谢您的输入。然而，为了简单起见，我决定采用@Brian Graham的答案。但看来赏金会朝你这边来。