Chrome中的HTML5视频边框半径无法正常工作 [英] HTML5 Video Border Radius in Chrome Not Working

问题描述

我试图使我的HTML5视频具有透明的左上角和左下角圆角，就像使用边框半径时的效果一样.不幸的是，由于某种原因，Chrome中的border-radius不能在HTML video标签上使用，而在IE10和Firefox中却可以使用.

I am trying to make my HTML5 video have top-left and bottom-left rounded corners with transparency, just like how it would act when using border-radius. Unfortunately in Chrome the border-radius does not work for some kind of reason on the HTML video tag, but does in IE10 and Firefox.

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

After several attempts of trying to achieve that I stumbled upon this answer: https://stackoverflow.com/a/16470150/1115367 But I quickly found out that this will fill in a color in the rounded corners, instead of making it transparent.

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

How can I make the border radius working on a HTML5 video in Google Chrome without decreasing the video performance?

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

I'm willing to use javascript / jQuery if necessary.

推荐答案

引用另一篇帖子:

WebKit中有一些出色的bug可以与边界半径一致地剪切内容， 像这样 或这一个特别是关于视频元素.

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

If you apply the border-radius to an element that wraps around the video, and adds a -webkit-mask-image, then it can be done in Chrome. Here's a demo that masks a transparent png and clips the corners of the video:

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

更新:我将HTML/CSS更改为仅使用一个包装元素，并且它至少在IE9 +，FF和Chrome上可用.

Update: I changed the HTML/CSS to only use one wrapping element, and it works on (at least) IE9+, FF and 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>

这篇关于Chrome中的HTML5视频边框半径无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！