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> 

看看它的工作原理:)