【问题标题】：HTML5 Video Border Radius in Chrome Not WorkingChrome 中的 HTML5 视频边框半径不起作用
【发布时间】：2013-11-17 23:49:23
【问题描述】：

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

经过多次尝试，我偶然发现了这个答案：https://stackoverflow.com/a/16470150/1115367 但我很快发现这会在圆角处填充颜色，而不是使其透明。

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

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

【问题讨论】：

标签： javascript jquery css html

【解决方案1】：

引用another post：

WebKit 中有一些突出的错误与它与边框半径、~~like this one~~ 或 this one specifically about the video element 一致地剪切内容有关。

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

Demo（透明背景）：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>

【讨论】：

因为我给了div.outer 一个背景色来表明它是透明的。看第二个演示。
啊.. 我错过了。但在 Chrome 31 中，我得到了圆角控件（两个版本均为 21/22）：imgur.com/YIYsQG3 Chrome 的剪裁有点时髦，这是肯定的。
所有浏览器都会发生这种情况。如果他想要一个没有圆形控件的圆形视频，他将需要自定义视频控件，就像画布视频没有可点击控件一样。此外，OP 想要一个圆角视频，我们都提供了。

【解决方案2】：

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

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

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

然后手动创建和加载视频（或者您可以使用 HTML 加载视频并隐藏原始视频元素）：

Live fiddle here

var video = document.createElement('video'),
    url;

/// setup video instance    
video.preload = 'auto';
video.addEventListener('canplaythrough', start, false);

/// check what we can play and borrow some online video link
if (video.canPlayType('video/ogg').length > 0 ) {
    url = 'http://www.w3schools.com/html/movie.ogg';
} else {
    url = 'http://www.w3schools.com/html/movie.mp4';
}

/// start loading video
video.src = url;

/// start the loop
function start(e) {

    /// get canvas and context
    var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d'),
        w = canvas.width,
        h = canvas.height,
        toggle = false;

    /// start video and loop
    video.play();
    loop();
    
    function loop() {
        
        /// we won't need 60 FPS so reduce to 30 FPS
        toggle = !toggle;
        if (toggle === false) {
            requestAnimationFrame(loop);
            return;
        }
        
        /// draw video frame onto canvas
        ctx.drawImage(video, 0, 0, w, h);
        requestAnimationFrame(loop);
    }
}

这当然是最小的例子：对于其他类型，您需要正确检查 canPlayType 参数（有些浏览器说“不”，所以也检查这个或用空字符串替换 no 以使用长度，如这里）好吧（即 webm）。

但请注意：这不适用于 Safari 浏览器，因为它们不符合（在当前编写时）Canvas 标准。在这种情况下，它们不支持以视频元素为源的 drawImage。

【讨论】：

+1 感谢您的意见。但是，为简单起见，我决定采用@Brian Graham 的回答。但看起来赏金会朝着你的方向发展。

【解决方案3】：

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

border-radius: 22px; overflow: hidden; -webkit-transform: translateZ(0); box-shadow: 0 19px 51px 0 rgba(0,0,0,0.16), 0 14px 19px 0 rgba(0,0,0,0.07);

密钥是-webkit-transform: translateZ(0)。这行代码告诉浏览器在 GPU 上进行渲染，而不是在 CPU 上进行渲染，从而允许更多类似这样的进程繁重的样式。

从 Safari 11、Chrome 65、Firefox 59、Edge Win 10 和 IE 11 开始测试和工作

【讨论】：