全屏居中html5视频实时供稿

Question

I want to have a fullscreen live feed from my device's camera, but centered. 我想从设备的摄像头获得全屏实时供稿，但要居中。 So if i have my face in the middle, i want that on any device to have my face in the middle (whatever aspect ratio (landscape <-> portrait)) 因此，如果我的脸在中间，那么我希望在任何设备上都将我的脸在中间（无论宽高比（横向<->纵向））

HTML: 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: CSS：

body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

#video {
    position: absolute;
}

JS function that does the rescaling: 进行重新缩放的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)");
    }
}

But when you run this, the middle of my video is not in the middle when portrait mode 但是，当您运行该程序时，我的视频的中间位置不在纵向模式下的中间位置

Can someone help? 有人可以帮忙吗？ thanks! 谢谢！

Answer 1

You don't need JS to do it, look at object-fit option: 您不需要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>

全屏居中html5视频实时供稿

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-07-14 15:37:46

全屏居中html5视频实时供稿

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-07-14 15:37:46

解决方案1
0 已采纳 2018-07-14 15:37:46