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

Question

我正在努力让我的HTML5视频具有透明度的左上角和左下角，就像使用border-radius时的行为一样。不幸的是，在Chrome浏览器中，border-radius在HTML视频标签上的某种原因不起作用，但在IE10和Firefox中也是如此。

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

如何在不降低视频效果的情况下，在Google Chrome浏览器中使边框半径处理HTML5视频？

我愿意在必要时使用javascript / jQuery。

Answer 1

引用another post：

  

WebKit中有一些突出的错误与剪切内容一起使用，与border-radius， like this one 或this one specifically about the video element一致。

如果将border-radius应用于环绕视频的元素，并添加-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>

Answer 2

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

您可以将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标准（目前正在编写）。在这种情况下，它们不支持将videoImage与视频元素作为源。

Answer 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