如何使用 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 class，并将视频标签的高度更改为

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

视频源来自 webrtc，使用 getusermedia，现在可以使用 rc class.

成功地将视频流整形为圆形并呈现在网页上

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

谢谢。

Answer 1

尝试添加...

align= "center"

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

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

Answer 2

问题已解决。对于遇到同样问题的任何人，碰巧使用 bootstrap img-circle 方法进行口试。请阅读：

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

border-radius: 50%;

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

object-fit: cover;

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

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

并将其用作：

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

就是这样。

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

How to center video source in circle shape using css, html

html

css

html5-video

webrtc

css-mask