如何使用 css、html 以圆形居中视频源答案

【问题标题】：How to center video source in circle shape using css, html如何使用 css、html 以圆形居中视频源
【发布时间】：2016-06-12 08:25:03
【问题描述】：

我想这个问题已经被问过很多次了。其中一些可以在 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类，并将视频标签的高度更改为

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

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

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

谢谢。

【问题讨论】：

标签： html css html5-video webrtc css-mask

【解决方案1】：

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

我尝试使用其他方式来圈出我的视频流，使用引导 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>

就是这样。

【讨论】：

【解决方案2】：

尝试添加...

align= "center"

到这行代码，在视频标签内...

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

【讨论】：

谢谢你的回复，但是不行，我觉得不是因为视频源没有居中，我猜是因为div覆盖视频流的时候，div尝试从左侧圈出视频。