全屏居中html5视频直播源
全屏居中html5视频直播源
提问于 2018-07-14 22:59:16
我想从我的设备摄像头获得全屏实时视频，但要居中。所以，如果我的脸在中间，我希望在任何设备上我的脸都在中间(无论宽高比如何(风景<->肖像))
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)");
}
}但是当你运行这个的时候，我的视频的中间并不在肖像模式的中间
有人能帮帮忙吗？谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-14 23:37:46
你不需要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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51340611
复制相关文章
相似问题