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>