html5视频上的圆角
Posted
技术标签:
【中文标题】html5视频上的圆角【英文标题】：rounded corners on html5 video 【发布时间】：2011-09-08 11:15:08 【问题描述】：有没有一种方法可以使用 CSS3 边框半径属性切断我的 html5 视频元素的角？
查看this example。它不工作。
【问题讨论】：
【参考方案1】：创建一个带有圆角和溢出：隐藏的 div 容器。然后将视频放入其中。
<style>
.video-mask
width: 350px;
border-radius: 10px;
overflow: hidden;
</style>
<div class="video-mask">
<video></video>
</div>
【讨论】：
我认为最好从您的示例中删除 mask-image 道具，它可能会带来误解。这里的主要道具是溢出，边界半径和变换 边界半径和溢出非常有意义，但我觉得转换需要一些解释。我已经在当前的 webkit 浏览器版本中检查了这一点，据我所知它没有任何效果，旋转到底添加了什么？【参考方案2】：我们有一个圆角和阴影播放的视频，它很简单：
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 上渲染，而不是使用
从 Safari 11、Chrome 65、Firefox 59、Edge Win 10 和 IE 11 开始测试和工作
【讨论】：
这个！谢谢先生。 这个技巧让我在 ios Safari 上运行。必须将转换应用于掩码元素，无论是视频本身还是带有圆角的周围 div。【参考方案3】：只要您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 一致地剪辑内容有关。
【讨论】：
+1 感谢您的精彩解释，尽管我没有通过您的链接找到解决方案。 这对我来说很关键，比例为 16/9，它适用于 Chrome 和 Firefox，如果不是它会给出奇怪的渲染【参考方案4】：很遗憾，Chrome 和 Safari 不支持 <video> 元素的边框半径。
【讨论】：
【参考方案5】：如果您的所有视频大小相同，您可以使用带有 SVG 文件的 CSS mask。如果您的视频是动态大小的，那会让事情变得更加困难...... （编辑：SVG 蒙版似乎会自动缩放，所以这个解决方案应该可以工作）
例如，您可以添加
-webkit-mask-image: url(http://f.cl.ly/items/1e181Q0e3j0L3L3z2j3Z/rect.svg)
到你的 .rc 类，它应该可以在 Chrome 中工作。
编辑：这似乎只有在您删除视频中的内联 height 和 width 声明时才有效...不过，您可以将它们放入您的 CSS 中。
http://jsfiddle.net/QWfhF/2/
【讨论】：
您的解决方案在 Chrome 12 中不适合我。这两个元素（视频或图片）中的任何一个都没有圆角。 嗯，也许我正在使用更新的版本：我在 12.0.742.77 测试版上，它可以工作。截图@cl.ly/3c0i2h1E1z3E1q24371y/o 另外，您还记得删除视频上的内嵌高度/宽度吗？如果不是，角将不会被圆角 奇怪的是，我也在 12.0.742.77 测试版中。但我在 Windows 7 上，而你显然在 Mac 上。 windows和mac可能有不同的语法？ ......但那是错误的。我的截图：i.imgur.com/Htrth.png 这太奇怪了！我想这些功能不应该因 Windows/Mac 而有所不同，但 Windows 版本中可能存在错误。另外，什么是 beta-m？也许这就是区别......无论如何，对不起，我帮不上忙！【参考方案6】：试试这个。它应该可以工作。
-webkit-mask: url(mypath/mask.png);
其中 mask.png 应该是圆角形状。 用一个圆圈快速做到这一点。 [删除网址]
【讨论】：
【参考方案7】：2019 年 10 月更新
视频的边框半径现在可以在 firefox、chrome 和 safari 上使用 mac、安卓和iOS。
Chrome Mobile Bug - 如果某些 Chrome android 浏览器导致您出现舍入问题，只需将以下属性添加到视频 css。只是一个1px的透明图片，解决了安卓手机的chrome边框半径渲染问题
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
在这里测试 - https://jsfiddle.net/hzd4vec2/
<!DOCTYPE html>
<html>
<head>
<title>Border-radius test</title>
<style type="text/css">
body
background: #000000;
margin: 0px;
#capsule
height: 600px;
background: #000;
border-radius: 1000px;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
</style>
</head>
<body>
<video id="capsule" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"
autoplay muted loop></video>
</body>
</html>
【讨论】：
【参考方案8】：移除宽度属性 http://jsfiddle.net/vDPW2/10/
【讨论】：
【参考方案9】：试试看这个：http://www.gerbenvanerkelens.com/1778/let%E2%80%99s-talk-about-the-html5-video-tag/
对于 CSS 来说是：
video
width:320px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
border-radius:40px;
overflow:hidden;
【讨论】：
这不起作用（至少在 Chrome 12 中不起作用）：jsfiddle.net/inquisitive_web_developer/vDPW2/31【参考方案10】：这至少可以通过画布和 javascript 来完成 (Introduction how to manipulate video frame data with canvas)。你基本上画了一个新的画布，在那里应用视频帧数据，然后剪掉圆角。我快速创建了这个，所以没有检查抗锯齿是否可以改进，但至少它做了四舍五入。性能方面，你可以想象这并不像应用 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();
示例：http://jsfiddle.net/niklasvh/aFcUh/（播放顶部视频以查看底部画布上的效果）。
【讨论】：
无论你的脚本是否有效（它似乎在 Chrome 12 中无效），我不喜欢很长的 javascript，尤其是在 IE 中缺乏对 HTML5 画布的支持时。是的，我知道 IE 也不支持 HTML5 视频，但我有一个后备方案。无论如何，谢谢！ 如果有错误，您会遇到什么错误？播放视频时画布是否显示任何内容？ IE 中不支持画布应该是无关紧要的，因为它无论如何都不会播放任何类型的 HTML5 视频，因此您希望应用的任何类型的浏览器端四舍五入都不适用于它们。 我收回我之前的声明，即您的代码在 Chrome 中不起作用。当我尝试了你的代码时，我做了我自己的例子（一定是做错了）。但是，是的，您的示例确实适用于我的 webkit 浏览器（chrome 12）。它是庞大的 js (IMO)，但如果需要圆角，我想如果与浏览器检测配合使用它可能是一个解决方案，这样它就不会阻塞其他浏览器。 是的，这当然不是一种非常有效的方法。【参考方案11】：来自 bootstrap 的class="img-rounded" 使用 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" >
<source src="http://example.com/test_video.mp4" type='video/mp4'/>
</video>
【讨论】：
img-rounded 使用引导程序为我做了诀窍，不需要其他任何东西。【参考方案12】：以下解决方案适用于我的网站，嵌入了视频标签和 youtube
.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 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>
UPD 我遇到了 youtube 嵌入式 iframe 的问题，容器 .video 的高度比其子 iframe 大 3px。它使底角有点不正确。 只需在 .video 类中添加 font-size: 0 即可解决问题
.video
border-radius: 10px;
overflow: hidden;
z-index: 1;
font-zie: 0
height: 480px; /*it can deleted, if height is not restricted*/
width: 640px;
【讨论】：
【参考方案13】：在 Chrome、Firefox 和 Safari 上测试：
CSS：
.rounded
border-radius: 20px;
overflow: hidden;
-webkit-transform: translateZ(0);
HTML：
<div class="rounded">
<video>.....</video>
</div>
【讨论】：
【参考方案14】：我仅使用 CSS 和精灵图像就完成了这项工作。这适用于所有浏览器，不需要任何 JavaScript。
通过设置为 position: relative; 的 div 包围视频您可以使用 z-index 和绝对定位在视频顶部的四个角分别放置四个 div。然后将精灵背景图像放入与背景颜色相同颜色的四个圆角中的每一个中。本质上是用一个角落的图像覆盖视频。
这是一个工作示例：http://jsfiddle.net/476tC/
它的代码也位于下面：
<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>
我创建的精灵只有 20 像素 x 20 像素，并且只有大约 10 像素的圆角。如果您想下载 Photoshop 文件并更改角落颜色或增加尺寸，您可以在此处获取 PSD 文件：http://www.mediafire.com/?bt9j0vhsmzfm9ta
【讨论】：
【参考方案15】：我在带有父级 (div) 和内部视频的现代浏览器中使用它。
父级具有border-radius: 8px 和overflow: hidden。视频只需要display: grid 使底部边缘也圆润。
【讨论】：
【参考方案16】：如前所述，border-radius 确实可以在 Firefox 和 Chrome 中使用，具体取决于视频类型。我发现有必要使用 video, video::first-child for mp4 来设置样式。 mp4 可能有一个内层（边框）。当我注意到 ogg 和 webm 正在工作而 mp4 没有工作时，我做了第一个孩子。
【讨论】：
【参考方案17】：从视频标签内部删除width="320" height="240"并添加到您的css文件.rcwidth:320; height:240; outline:none; border-radius:15px
我希望这个解决方案对你有用:)
【讨论】：
以上是关于html5视频上的圆角的主要内容，如果未能解决你的问题，请参考以下文章
iPad / iPhone 上的 FrameSet 和 HTML5 视频 - 视频超出框架？