html5视频上的圆角

Question

有没有一种方法可以使用CSS3 border-radius属性切断我的html5视频元素的角点？

结账this example。它不工作。

Answer 1

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

Answer 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; 
} 

Answer 3

这可以用帆布和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/（播放视频顶部查看底部帆布一个上的影响）。

Answer 4

只要你使用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一起剪辑内容。

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

Answer 6

不幸的是，Chrome和Safari不支持<video>元素边界半径。

Answer 7

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

通过将div设置为位置来包围视频：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> 

我创建的精灵只有20像素X 20像素，只有大约轮10px的角落落。如果你想下载的Photoshop文件，并改变角色或增加尺寸，你可以在这里得到PSD文件：http://www.mediafire.com/?bt9j0vhsmzfm9ta

Answer 8

试试这个。它应该工作。

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

其中mask.png应该是圆角的形状。 这篇快速用圆圈 http://versusestudio.com/experiments/circlevideotest/

Answer 9

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> 

Answer 10

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

<style> 
.video-mask{ 
width: 350px; 
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); 
-webkit-transform: rotate(0.000001deg); 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 
overflow: hidden; 
} 
</style> 


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