如何使用css，html將視頻源以圓圈形狀居中

我覺得這個問題已經有很多次了。其中一些可以在Chrome或Firefox上運行。如何使用css，html將視頻源以圓圈形狀居中

我試圖與解決方案：

.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類圈出並呈現在網頁上。

問題是每一次，視頻源不會在圓形的中心，它會保持一點左邊。例如，當我的臉在鏡頭前時，我臉上只有一部分位於圓形的右側。它不在圓圈的中心。任何人都知道如何解決此問題？

謝謝。

來源

2016-02-29 Pengzhi Zhou

問題解決了。對於任何面臨同樣問題的人，發生在使用引導img-circle方法的口頭。請閱讀：

我試着用其他的方式來圓我的視頻流，使用引導IMG圈功能，只是這個屬性值添加到您的視頻：

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>

這就是它。

來源

2016-03-01 14:00:07

嘗試

align= "center"

...添加到這行代碼，在視頻標籤中......

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

來源

2016-02-29 11:42:04 Shazan

感謝您的回覆，但它不起作用，我不認爲這是因爲視頻源不居中，我猜這是因爲當div覆蓋視頻流時，div會嘗試圈出視頻從左邊開始。 –

如何使用css，html將視頻源以圓圈形狀居中

回答

相關問題