html - 如何使用css，html将视频源居中放置在圆形中

Question

我想这个问题已经被问过很多次了。其中一些可以在 Chrome 或 Firefox 上运行。

我尝试了解决方案:

 .rc{
 width: 250px;
 height: 250px;
 border-radius: 100%;
 -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
 -webkit-transform: rotate(0.000001deg); 
 -webkit-border-radius: 100%; 
 -moz-border-radius: 100%;
}

将其添加到div类中，并将video标签的高度也更改为

<div class="rc"><video id="localVideoStream" height="250" autoplay muted></video></div>

视频源来自 webrtc，使用 getusermedia，现在可以使用 rc 类成功地将视频流整形为圆形并呈现在网页上。

问题是每次，视频源都不会在圆圈的中心，而是稍微偏左一点。例如，当我的脸在镜头前时，只有一部分脸在圆形的右侧。它不在圆的中心。任何人都知道如何解决这个问题？

谢谢。

Answer 1

问题解决了。对于面临同样问题的任何人，并且碰巧使用 bootstrap img-circle 方法获取口语。请阅读:

我尝试使用其他方法来圈出我的视频流，使用 Bootstrap img-circle 函数，该函数只需将此属性值添加到您的视频中:

border-radius: 50%;

只有当这个视频/图像是方形的时候，这条线才会画圆，从 getusermedia() 返回的视频流是矩形的。如果视频/图像是矩形，它会被塑造成椭圆形。所以经过研究，感谢这个精彩的教程:http://fvsch.com/code/video-background/ .也将其添加到您的视频中(您还需要将视频宽度和高度设置为相同):

object-fit: cover;

问题解决了!视频现在以圆圈为中心。只需两条线就可以使事情发生。所以总的来说，做一个类:

.video-circle {
border-radius: 50%;
object-fit: cover;
}

并将其用作:

<video id="localVideoStream"  class="video-circle" width="200" height="200" autoplay muted></video>

就是这样。