Chrome 中的 HTML5 视频边框半径不起作用

HTML5 Video Border Radius in Chrome Not Working

本文关键字：不起作用 边框 视频 中的 HTML5 Chrome      更新时间：2023-09-26

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

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

如何在不降低视频性能的情况下使边框半径在谷歌浏览器中处理 HTML5 视频？

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

引用另一篇文章：

WebKit中有一些突出的错误与它与边框半径一致的内容剪辑有关，例如这个或专门关于视频元素的这个。

如果您将边框半径应用于环绕视频的元素，并添加-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>

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

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

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

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

在这里现场小提琴

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

当然，这只是最小的例子：您还需要正确检查其他类型（即.webm）的canPlayType参数（某些浏览器说"no"，因此也请检查这一点或用空字符串替换 no 以使用此处的长度）。

但需要注意的是：这不适用于 Safari 浏览器，因为它们不符合（目前撰写）Canvas 标准。在这种情况下，它们不支持以视频元素作为源的绘图图像。

我们有一个带有圆角和投影的视频，它就像

：

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中进行测试并工作

相关文章：