CSS html5 视频上的圆角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6238451/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
rounded corners on html5 video
提问by Web_Designer
Is there a way I can cut off the corners of my html5 video element using the CSS3 border-radius attribute?
有没有办法可以使用 CSS3 border-radius 属性切断 html5 视频元素的角？
Check out this example. it's not working.
看看这个例子。它不工作。
回答by Wreeecks
Create a div container with rounded corners and overflow:hidden. Then place the video in it.
创建一个带有圆角和溢出的 div 容器：隐藏。然后把视频放进去。
<style>
.video-mask{
width: 350px;
border-radius: 10px;
overflow: hidden;
}
</style>
<div class="video-mask">
<video></video>
</div>
回答by robertc
It works in Firefox as long as you set the appropriate 180px height for the 320px width video(16:9 aspect ratio) - otherwise the curved borders aren't visible because they're outside the frame of the video.
只要您为 320 像素宽度的视频（16:9 纵横比）设置适当的 180 像素高度，它就可以在 Firefox 中工作- 否则弯曲的边框不可见，因为它们在视频的框架之外。
There are some outstanding bugs in WebKit to do with it clipping content in concert with border-radius, like this oneor this one specifically about the video element.
在 WebKit 中有一些突出的错误与它一起剪辑内容有关border-radius，例如这个或这个专门关于视频元素的错误。
回答by Guil Hernandez
Unfortunately, Chrome and Safari do not support border-radius on <video>elements.
不幸的是，Chrome 和 Safari 不支持<video>元素的border-radius 。
回答by Jeff
If all of your videos are the same size, you could use a CSS maskwith an SVG file. If your videos are dynamically sized, that makes things more difficult... (edit: the SVG mask seems to automatically scale, so this solution should work)
如果您所有的视频大小相同，您可以将CSS 掩码与 SVG 文件一起使用。如果您的视频是动态调整大小的，那会使事情变得更加困难...（编辑：SVG 蒙版似乎会自动缩放，因此此解决方案应该有效）
e.g., you can add
例如，您可以添加
-webkit-mask-image: url(http://f.cl.ly/items/1e181Q0e3j0L3L3z2j3Z/rect.svg)
to your .rc class and it should work in Chrome.
到您的 .rc 类，它应该在 Chrome 中工作。
edit: this only seems to work if you remove your inline heightand widthdeclarations on your video... You can put them in your CSS, though.
编辑：这似乎只有在您删除视频中的内联height和width声明时才有效……不过，您可以将它们放在 CSS 中。
回答by Gregg
We have a video playing with rounded corners and a drop shadow and it's as simple as:
我们有一个播放圆角和阴影的视频，它很简单：
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);
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);
The key is the -webkit-transform: translateZ(0). This line of code tells the browser to render on the GPU instead of with the
关键是-webkit-transform: translateZ(0)。这行代码告诉浏览器在 GPU 上渲染而不是使用
Tested and working as of Safari 11, Chrome 65, Firefox 59, Edge Win 10 & IE 11
从 Safari 11、Chrome 65、Firefox 59、Edge Win 10 和 IE 11 开始测试和工作
回答by Benjamin
Try this. It should work.
尝试这个。它应该工作。
-webkit-mask: url(mypath/mask.png);
where the mask.png should be a rounded corner shape. Did this quick with a circle. [url removed]
其中 mask.png 应该是圆角形状。用圆圈快速完成此操作。[网址已删除]
回答by SRN
remove the width property http://jsfiddle.net/vDPW2/10/
回答by ZeroSuf3r
Try read this: http://www.gerbenvanerkelens.com/1778/let%E2%80%99s-talk-about-the-html5-video-tag/
尝试阅读：http: //www.gerbenvanerkelens.com/1778/let%E2%80%99s-talk-about-the-html5-video-tag/
And for CSS would be:
对于 CSS 将是：
video{
width:320px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
border-radius:40px;
overflow:hidden;
}
回答by Niklas
This can be done with canvas and JavaScript at least (Introduction how to manipulate video frame data with canvas). You basically draw a new canvas, apply the video frame data there, then clip the rounded corners off. I created this quickly, so didn't check whether the anti-aliasing could have been improved, but at least it does the rounding. Performance wise, you can imagine this isn't really as good as applying CSS or something, but it should work on all canvas supported browsers at least.
这至少可以使用画布和 JavaScript 来完成（介绍如何使用画布操作视频帧数据）。您基本上绘制一个新画布，在那里应用视频帧数据，然后剪掉圆角。我很快就创建了这个，所以没有检查抗锯齿是否可以改进，但至少它做了四舍五入。性能方面，你可以想象这并不像应用 CSS 或其他东西那么好，但它至少应该适用于所有支持画布的浏览器。
var video = document.getElementById("video");
var c1 = document.getElementById("roundy");
var ctx = c1.getContext("2d");
video.addEventListener("play", function() {
timerCallback();
}, false);
var timerCallback = function() {
if (video.paused || video.ended) {
return;
}
computeFrame();
setTimeout(function () {
timerCallback();
}, 0);
};
var computeFrame = function() {
var w = 480;
var h = 320;
var r = 20;
ctx.clearRect(0,0,w,h);
ctx.globalCompositeOperation = 'destination-atop';
ctx.fillStyle = "#09f";
roundRect(ctx, 0,0,w,h,r,true,false);
ctx.drawImage(video, 0, 0, w, h);
return;
}
// http://js-bits.blogspot.com/2010/07/canvas-rounded-corner-rectangles.html
function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
if (typeof stroke == "undefined" ) {
stroke = true;
}
if (typeof radius === "undefined") {
radius = 5;
}
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
ctx.clip();
}
Example: http://jsfiddle.net/niklasvh/aFcUh/(play the top video to view the effects on the bottom canvas one).
示例：http: //jsfiddle.net/niklasvh/aFcUh/（播放顶部视频以查看底部画布上的效果）。
回答by Tom
class="img-rounded"from bootstrap works fine for me using video.js
class="img-rounded"来自 bootstrap 使用 video.js 对我来说很好用
<link href="//vjs.zencdn.net/4.3/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.3/video.js"></script>
<video id="example_video_1" class="video-js vjs-default-skin img-rounded"
controls preload="auto" width="640" height="264">
<source src="http://example.com/test_video.mp4" type='video/mp4'/>
</video>
