[英]fullscreen centering html5 video live feed
我想從設備的攝像頭獲得全屏實時供稿,但要居中。 因此,如果我的臉在中間,那么我希望在任何設備上都將我的臉在中間(無論寬高比(橫向<->縱向))
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Picture time!</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<video id="video" autoplay="autoplay" onclick="snapshot()"></video>
<canvas id="canvas" style="display: none"></canvas>
<script src="./jquery.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
CSS:
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
#video {
position: absolute;
}
進行重新縮放的JS函數:
function rescaleEverthing(){
var jqueryVideo = $("#video");
var body = $("body");
var videoWidth = jqueryVideo.width();
var videoHeight = jqueryVideo.height();
var bodyWidth = body.width();
var bodyHeight = body.height();
var videoRatio = videoWidth / videoHeight;
var bodyRatio = bodyWidth / bodyHeight;
if(vi)
if(videoRatio > bodyRatio){
jqueryVideo.css("height", "100%");
jqueryVideo.css("transform", "translateX(-" + (videoWidth-bodyWidth)/2 + "px)");
} else {
jqueryVideo.css("width", "100%");
jqueryVideo.css("transform", "translateY(-" + (videoHeight-bodyHeight)/2 + "px)");
}
}
但是,當您運行該程序時,我的視頻的中間位置不在縱向模式下的中間位置
有人可以幫忙嗎? 謝謝!
您不需要JS來執行,請查看對象適合選項:
body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; position:relative; } video { width:100%; height:100%; object-fit: contain; }
<video video-player controls id="video_player" src="http://dash.akamaized.net/akamai/bbb/bbb_1280x720_60fps_6000k.mp4"></video>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.