html5视频上的圆角

时间：2011-06-04 17:54:51

标签： css google-chrome webkit html5-video css3

有没有办法可以使用CSS3 border-radius属性剪切html5视频元素的角落？

结帐this example。它不起作用。

17 个答案:

答案 0 :(得分：16)

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

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


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

答案 1 :(得分：8)

只要您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一致的内容剪辑错误。

答案 2 :(得分：6)

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

答案 3 :(得分：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/

答案 4 :(得分：3)

试试这个。它应该工作。

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

其中mask.png应为圆角形状。 用圆圈快速完成了。 [网址已删除]

答案 5 :(得分：2)

请仔细阅读：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;
}

答案 6 :(得分：2)

这至少可以使用canvas和JavaScript来完成（Introduction how to manipulate video frame data with canvas）。您基本上绘制一个新画布，在那里应用视频帧数据，然后剪掉圆角。我很快创建了这个，所以没有检查抗锯齿是否可以改进，但至少它会进行舍入。性能方面，您可以想象这不如应用CSS或其他东西那么好，但它至少应该适用于所有支持canvas的浏览器。

   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/（播放顶部视频以查看底部画布上的效果）。

答案 7 :(得分：2)

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

答案 8 :(得分：1)

使用video.js

，来自bootstrap的

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>

答案 9 :(得分：1)

以下解决方案在我的带有视频标签和youtube的网站上有效

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header>
  <ul>
    <li><a href="index.html" class="active">Home</a></li>
    <li><a href="about.html#tab-1">Tab 1</a></li>
    <li><a href="about.html#tab-2">Tab 2</a></li>
    <li><a href="about.html#tab-3">Tab 3</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</header>
<div class="container">
  <ul class="vc_tta-tabs-list">
    <li class="vc_tta-tab" data-vc-tab="">
      <a href="#tab-1" data-vc-tabs="" data-vc-container=".vc_tta">Tab 1</a>
    </li>
    <li class="vc_tta-tab" data-vc-tab="">
      <a href="#tab-2" data-vc-tabs="" data-vc-container=".vc_tta">Tab 2</a>
    </li>
    <li class="vc_tta-tab" data-vc-tab="">
      <a href="#tab-3" data-vc-tabs="" data-vc-container=".vc_tta">Tab 3</a>
    </li>
  </ul>


  <div class="vc_tta-panels">
    <div class="vc_tta-panel" id="tab-1" data-vc-content=".vc_tta-panel-body">
      <h1>Tab 1 Content</h1>
    </div>
    <div class="vc_tta-panel" id="tab-2" data-vc-content=".vc_tta-panel-body">
      <h1>Tab 2 Content</h1>
    </div>
    <div class="vc_tta-panel" id="tab-3" data-vc-content=".vc_tta-panel-body">
      <h1>Tab 3 Content</h1>
    </div>
  </div>
</div>

UPD 我在youtube嵌入式iframe中遇到问题，容器.video的高度比其子iframe高3px。它使底角有点不正确。 只需在.video类中添加font-size：0即可解决问题

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

答案 10 :(得分：1)

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

this.ClientSize

关键是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);。这行代码告诉浏览器在GPU上呈现而不是使用

在Safari 11，Chrome 65，Firefox 59，Edge Win 10和它上面进行测试和工作。 IE 11

答案 11 :(得分：0)

我仅使用CSS和精灵图像完成了这项工作。这适用于所有浏览器，不需要任何JavaScript。

通过将div设置为position：relative;来包围视频;您可以使用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>

我创建的精灵只有20px x 20px，只能在拐角处转动大约10px。如果您想下载photoshop文件并更改角落颜色或增加大小，您可以在此处获取PSD文件：http://www.mediafire.com/?bt9j0vhsmzfm9ta

答案 12 :(得分：0)

我将其用于具有父级（div）和内部视频的现代浏览器。 父级有unless Mix.env() == :prod do import_config("#{Mix.env()}.exs") end 和border-radius: 8px。视频只需要overflow: hidden来使底部边缘也变圆。

答案 13 :(得分：0)

2019年10月更新

视频边框半径现在可在 mac ，上的 firefox ， chrome 和 Safari android 和 iOS 。

Chrome移动错误-如果某些Chrome安卓浏览器导致四舍五入问题，只需将以下属性添加到视频CSS中即可。这只是一个1px的透明图像，解决了Android手机的镶边边框半径渲染错误

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

答案 14 :(得分：0)

如前所述，根据视频类型，border-radius在Firefox和Chrome中确实有效。我发现有必要使用视频（video :: first-child用于mp4）进行样式设置。 mp4可能有一个内层（边界）。当我发现ogg和webm可以正常工作而mp4却不能工作时，我做了第一个孩子。

答案 15 :(得分：0)

从视频标签的内部删除width="320" height="240"，然后将其添加到您的CSS文件.rc{width:320; height:240; outline:none; border-radius:15px }中 我希望这个解决方案对您有用：）

答案 16 :(得分：0)

在 Chrome、Firefox 和 Safari 上测试：

CSS：

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

HTML：

<div class="rounded">
    <video>.....</video>
</div>
相关问题
最新问题