有没有办法可以使用CSS3 border-radius属性切断html5视频元素的角落？
看看this example。它不起作用。
创建一个带圆角和溢出的div容器：hidden。然后将视频放入其中。
<style>
.video-mask{
width: 350px;
border-radius: 10px;
overflow: hidden;
}
</style>
<div class="video-mask">
<video></video>
</div>
我们有一个带圆角和投影的视频，它很简单：
class="img-rounded"
关键是 <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>
。这行代码告诉浏览器在GPU上渲染而不是使用
经过测试和工作，如Safari 11，Chrome 65，Firefox 59，Edge Win 10和IE 11
以下解决方案适用于我的网站，其中嵌入了视频标记和youtube
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);UPD我遇到了youtube嵌入式iframe的问题，容器.video的高度比子iframe高3px。它使得底角有点不正确。只需将font-size：0添加到.video类，修复了问题
-webkit-transform: translateZ(0)我只使用CSS和精灵图像完成了这个。这适用于所有浏览器，不需要任何JavaScript。
通过将div设置为position：relative;来包围视频;您可以使用z-index和绝对定位在视频顶部的四个角中的每个角放置四个div。然后将精灵背景图像放入四个角的每个角中，这四个角用与背景颜色相同的颜色围绕边缘。基本上用角落的图像覆盖视频。
这是一个有效的例子：.video{
border-radius: 10px;
overflow: hidden;
z-index: 1;
height: 480px; /*it can deleted, if height is not restricted*/
width: 640px;
}
<div class="video">
<iframe width="640" height="480" src="https://www.youtube.com/embed/..." frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
<div class="video">
<video controls>
<source src="..." type="video/mp4">
</video>
</div>
它的代码也位于下面：
.video{
border-radius: 10px;
overflow: hidden;
z-index: 1;
font-zie: 0
height: 480px; /*it can deleted, if height is not restricted*/
width: 640px;
}
我创建的精灵只有20px x 20px，并且只能在拐角处转动大约10px。如果您想下载photoshop文件并更改角落颜色或增加大小，您可以在此处获取PSD文件：http://jsfiddle.net/476tC/
我得到了这个适用于现代浏览器与父（div）和内部视频。父母有<style>
video {
width: 100%;
height: auto;
}
.corner-frame {
width: 100%;
position: relative;
}
.corner-top-left, .corner-top-right, .corner-bot-left, .corner-bot-right {
width: 10px;
height: 10px;
position: absolute;
background: url(http://i45.tinypic.com/5l520j.png) no-repeat;
z-index: 1;
}
.corner-top-left { top: 0; left: 0; background-position: 0 0 ; }
.corner-top-right { top: 0; right: 0; background-position: -10px 0 ; }
.corner-bot-left { bottom: 4px; left: 0; background-position: 0 -10px ; }
.corner-bot-right { bottom: 4px; right: 0; background-position: -10px -10px ; }
</style>
<div class="corner-frame">
<video controls>
<source src="http://ia700204.us.archive.org/18/items/blue_shoes/blue_shoes.mp4" type="video/mp4">
<source src="http://ia700204.us.archive.org/18/items/blue_shoes/blue_shoes-portable.ogv" type="video/ogg">
</video>
<div class="corner-top-left"></div>
<div class="corner-top-right"></div>
<div class="corner-bot-left"></div>
<div class="corner-bot-right"></div>
</div>
和http://www.mediafire.com/?bt9j0vhsmzfm9ta。该视频只需要border-radius: 8px使底部边缘也圆润。
只要您使用set the appropriate 180px height for the 320px width video（16：9宽高比），它就可以在Firefox中使用 - 否则曲面边框不可见，因为它们位于视频帧之外。
WebKit中有一些突出的错误，它与border-radius，like this one或this one specifically about the video element一起剪辑内容。
不幸的是，Chrome和Safari不支持<video>元素的border-radius。
如果您的所有视频大小相同，则可以使用带有SVG文件的CSS mask。如果您的视频是动态调整大小的，那会让事情变得更加困难......（编辑：SVG掩码似乎会自动缩放，因此此解决方案应该可行）
例如，你可以添加
-webkit-mask-image: url(http://f.cl.ly/items/1e181Q0e3j0L3L3z2j3Z/rect.svg)
到你的.rc类，它应该在Chrome中运行。
编辑：这似乎只有在您的视频中删除您的在线qazxsw poi和qazxsw poi声明时才有效...但您可以将它们放入CSS中。
height
试试这个。它应该工作。
width其中mask.png应该是圆角形状。用圆圈快速完成了。 [网址已删除]
这可以通过canvas和JavaScript至少完成（http://www.gerbenvanerkelens.com/1778/let%E2%80%99s-talk-about-the-html5-video-tag/）。您基本上绘制一个新画布，在那里应用视频帧数据，然后剪掉圆角。我很快创建了这个，所以没有检查抗锯齿是否可以改进，但至少它会进行舍入。性能方面，你可以想象这不如应用CSS或其他东西那么好，但它至少应该适用于所有支持canvas的浏览器。
video{
width:320px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
border-radius:40px;
overflow:hidden;
}
示例：Introduction how to manipulate video frame data with canvas（播放顶部视频以查看底部画布上的效果）。
来自bootstrap的 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();
}
使用video.js对我很好
http://jsfiddle.net/niklasvh/aFcUh/