我想从设备的摄像头获得全屏实时供稿,但要居中。因此,如果我的脸在中间,那么我希望在任何设备上都将我的脸在中间(无论宽高比(横向<->肖像))
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)");
}
}
但是当您执行此操作时,我的视频在纵向模式下不在中间
有人可以帮忙吗?谢谢!
答案 0 :(得分:0)
您不需要JS来做,请查看object-fit选项:
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>