HTML5實時視頻畫布形狀

Question

我試圖爲實況HTML5視頻創建一個圓形框架（或畫布）。我可以使用關鍵幀半徑屬性來彎曲拐角，但這會使我留下一個橢圓形，而不是一個圓。

理想情況下，我將能夠使用div對象（png圖像）作爲視頻的遮罩。話雖如此，div對象只是一個圓圈，所以我也樂意用圓圈來掩蓋視頻。

這裏是我當前的代碼：

<style> 
    video, canvas { 
     z-index: 1; 
     position: absolute; 
     top: 10%; 
     left: 25%; 
     -webkit-border-radius: 50%; 
     -moz-border-radius: 50%; 
     -ms-border-radius: 50%; 
     border-radius: 50%; 
     overflow: hidden; 
    } 
</style> 
<video id="video" width="600" height="450" preload autoplay loop muted controls></video> 
<canvas id="canvas" width="600" height="600"></canvas> 

這將是最好以獲取視頻中的圓形掩蔽，而不是改變方面無線電因此視頻會被壓扁。謝謝！

Answer 1

風格包含div和視頻元素分開。添加-webkit-mask-image 到包含div。

-webkit-mask-image CSS屬性設置元素的遮罩圖像。遮罩圖像根據遮罩圖像的透明度來剪裁元素的可見部分。

CSS

.canvas { 
    width: 600px; 
    height: 600px; 
    border-radius: 300px; 
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); 
} 

video { 
    width: 600px; 
    height: 600px; 
    position: absolute; 
    top: -125px; 
    left: -125px; 
} 

HTML

<div class="canvas"> 
    <video id="video" preload autoplay loop muted controls></video> 
</div> 

看看它的工作原理:)