当前位置：文江博客话题详情

html5视频上的圆角

发布于 2024-11-13 09:41:28 字数 157 浏览 4 评论 0原文

有没有办法使用 CSS3 border-radius 属性截掉 html5 视频元素的角？

查看此示例。它不起作用。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

伪装你 2024-11-20 09:41:29

2022年答案：
将视频高度设置为 max-content 并简单地使用 border-radius：

video {
    height: max-content;
    border-radius: 16px;
}

更好的替代方案是使用 object-fit （加上 object-position) 如果你不想搞乱与高度：

video {
    object-fit: cover; /* so the video covers all the available space */
    object-position: center; /* not required */
    border-radius: 16px;
}

2022 answer:
Set the video height to max-content and simply use the border-radius:

video {
    height: max-content;
    border-radius: 16px;
}

A better alternative is to use object-fit (plus object-position) if you don't want to mess with the height:

video {
    object-fit: cover; /* so the video covers all the available space */
    object-position: center; /* not required */
    border-radius: 16px;
}

回复收藏 0 原文

離殇 2024-11-20 09:41:29

一个属性即可完成工作，并且可以直接作为类添加到视频标记上。该类看起来像：

.video-mask
{
    border-radius: 3em;
}

如果添加这些属性：

max-width: 100%;
display: block;
margin: auto;
padding: 1em;

您将拥有一个居中的响应式圆形视频，该视频会调整大小以保持其纵横比并保持在中间。 但这些都不是绝对必要的。

One attribute does the job and can be added as a class directly on the video tag. The class would look like:

.video-mask
{
    border-radius: 3em;
}

If you add these properties:

max-width: 100%;
display: block;
margin: auto;
padding: 1em;

You will have a centered responsive rounded video that resizes to keep its aspect ratio and stays in the middle. None of these are strictly necessary though.

回复收藏 0 原文

够钟 2024-11-20 09:41:28

创建一个带有圆角和溢出：隐藏的 div 容器。然后将视频放入其中。

<style>
.video-mask{
    width: 350px;
    border-radius: 10px; 
    overflow: hidden; 
}
</style>


<div class="video-mask">
    <video></video>
</div>

Create a div container with rounded corners and overflow:hidden. Then place the video in it.

<style>
.video-mask{
    width: 350px;
    border-radius: 10px; 
    overflow: hidden; 
}
</style>


<div class="video-mask">
    <video></video>
</div>

回复收藏 0 原文

金橙橙 2024-11-20 09:41:28

我们有一个带有圆角和阴影的视频，它很简单：

border-radius: 22px;
溢出：隐藏；
-webkit-transform: 翻译Z(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：翻译Z(0)。这行代码告诉浏览器在 GPU 上渲染，而不是

在 Safari 11、Chrome 65、Firefox 59、Edge Win 10 和 Safari 11、Chrome 65、Firefox 59、Edge Win 10 和 Windows 10 上进行测试和工作。浏览器11

回复收藏 0 原文

长伴 2024-11-20 09:41:28

只要您为 320 像素宽度的视频设置适当的 180 像素高度（16:9 宽高比），它就可以在 Firefox 中运行 - 否则弯曲的边框不可见，因为它们位于视频框架之外。

WebKit 中存在一些突出的错误，这些错误与它与 border-radius 一起剪切内容有关，喜欢这个或这个专门关于视频元素的。

回复收藏 0 原文

风吹过旳痕迹 2024-11-20 09:41:28

不幸的是，Chrome 和 Safari 不支持元素上的 border-radius。

回复收藏 0 原文

煮酒 2024-11-20 09:41:28

如果所有视频的大小相同，您可以使用 CSS 遮罩与 SVG 文件。如果您的视频是动态大小的，那么事情就会变得更加困难......
（编辑：SVG 蒙版似乎会自动缩放，因此该解决方案应该可以工作）

例如，您可以添加

-webkit-mask-image: url(http://f.cl.ly/items/1e181Q0e3j0L3L3z2j3Z/rect.svg)

到 .rc 类中，它应该可以在 Chrome 中工作。

编辑：这似乎只有在您删除视频上的内联 height 和 width 声明时才有效...不过，您可以将它们放入 CSS 中。

http://jsfiddle.net/QWfhF/2/

If all of your videos are the same size, you could use a CSS mask with 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)

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.

edit: this only seems to work if you remove your inline height and width declarations on your video... You can put them in your CSS, though.

http://jsfiddle.net/QWfhF/2/

回复收藏 0 原文

请叫√我孤独 2024-11-20 09:41:28

试试这个。它应该有效。

-webkit-mask: url(mypath/mask.png);

其中 mask.png 应该是圆角形状。
用圆圈快速完成此操作。
[网址已删除]

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]

回复收藏 0 原文

当爱已成负担 2024-11-20 09:41:28

2019 年 10 月更新

视频边框半径现在可在 mac< 上的 firefox、chrome 和 safari 上使用/strong>、android 和 iOS。

Chrome 移动错误 - 如果某些 Chrome Android 浏览器导致您出现舍入问题，只需将以下属性添加到视频 CSS 中即可。这只是一个 1px 透明图像，解决了 Android 手机的 chrome border-radius 渲染错误

-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>

Update October 2019

Border-radius for video now works on firefox, chrome and safari on mac, android and iOS.

Chrome Mobile Bug - if some Chrome android browsers cause you problems with rounding just add the following property to the video css. It's just a 1px transparent image which solves the chrome border-radius rendering bug for android phones

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

Test it here - 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>

回复收藏 0 原文

花想c 2024-11-20 09:41:28

在 Chrome、Firefox 和 Safari 上测试：

CSS：

.rounded {
    border-radius: 20px; 
    overflow: hidden;
    -webkit-transform: translateZ(0);
}

HTML：

<div class="rounded">
    <video>.....</video>
</div>

Tested on Chrome, Firefox, and Safari:

CSS:

.rounded {
    border-radius: 20px; 
    overflow: hidden;
    -webkit-transform: translateZ(0);
}

HTML:

<div class="rounded">
    <video>.....</video>
</div>

回复收藏 0 原文

心清如水 2024-11-20 09:41:28

删除宽度属性
http://jsfiddle.net/vDPW2/10/

回复收藏 0 原文

向日葵 2024-11-20 09:41:28

尝试阅读以下内容： 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;
}

Try read this: http://www.gerbenvanerkelens.com/1778/let%E2%80%99s-talk-about-the-html5-video-tag/

And for CSS would be:

video{
    width:320px;
    -moz-border-radius:40px;
    -webkit-border-radius:40px;
    border-radius:40px;
    overflow:hidden;
}

回复收藏 0 原文

葬シ愛 2024-11-20 09:41:28

这至少可以使用canvas和JavaScript来完成（介绍如何使用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/（播放顶部视频以查看底部画布上的效果一）。

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.

   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).

回复收藏 0 原文

高速公鹿 2024-11-20 09:41:28

我让它适用于带有父级（div）和内部视频的现代浏览器。
父级具有 border-radius: 8px 和 overflow: hide。视频只需要 display: grid 即可使底部边缘也变圆。

回复收藏 0 原文

离不开的别离 2024-11-20 09:41:28

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" width="640" height="264">
    <source src="http://example.com/test_video.mp4" type='video/mp4'/>
 </video>

class="img-rounded" from bootstrap works fine for me using 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>

回复收藏 0 原文

会傲 2024-11-20 09:41:28

以下解决方案适用于我的网站，带有视频标签和嵌入的 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 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>

UPD
我遇到了 YouTube 嵌入 iframe 的问题，容器 .video 的高度比其子 iframe 大 3px。而且它使底角有点不正确。
只需将 font-size: 0 添加到 .video 类即可解决问题

.video{
    border-radius: 10px;
    overflow: hidden;
    z-index: 1;
    font-zie: 0
    height: 480px; /*it can deleted, if height is not restricted*/
    width: 640px; 
}

Following solution works on my site with video tag and youtube embedded

.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>

UPD
I had issue with youtube embedded iframe, container .video had height bigger 3px than its child iframe. And it made bottom corners a little bit incorrect.
Just add font-size: 0 to .video class, fixed the problem

.video{
    border-radius: 10px;
    overflow: hidden;
    z-index: 1;
    font-zie: 0
    height: 480px; /*it can deleted, if height is not restricted*/
    width: 640px; 
}

回复收藏 0 原文

花海 2024-11-20 09:41:28

我仅使用 CSS 和精灵图像来完成此操作。这适用于所有浏览器，并且不需要任何 JavaScript。

通过使用设置为position:relative的div包围视频；您可以使用 z 索引和绝对定位在视频顶部的四个角中的每个角放置四个 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>

我创建的精灵只有 20px x 20px，并且仅从角处舍入约 10px。如果您想下载 Photoshop 文件并更改角颜色或增加尺寸，您可以在此处获取 PSD 文件： http://www.mediafire.com/?bt9j0vhsmzfm9ta

I accomplished this using only CSS and a sprite image. This works in all browsers and does not require any JavaScript.

By surrounding the video with a div that is set to position: relative; you can place four divs in each of the four corners on top of the video using z-index and absolute positioning. Then place a sprite background image into each of the four corners that rounds the edge with the same color as the background color. Essentially covering the video with an image of a corner.

Here is a working example: http://jsfiddle.net/476tC/

The code for it also located below:

<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>

The sprite I created is only 20px x 20px and only rounds about 10px off the corner. If you would like to download the photoshop file and change the corner color or increase the size you can get the PSD file here: http://www.mediafire.com/?bt9j0vhsmzfm9ta

回复收藏 0 原文

尛丟丟 2024-11-20 09:41:28

正如前面所说，border-radius 在 Firefox 和 Chrome 中确实有效，具体取决于视频类型。我发现有必要使用 video、video::first-child 来设置 mp4 的样式。 mp4 可能有一个内层（边界）。当我注意到 ogg 和 webm 可以工作而 mp4 不能工作时，我做了第一个子部分。

回复收藏 0 原文