HTML视频标签填满手机的整个屏幕答案

【问题标题】：HTML video tag to fill whole screen on phonesHTML视频标签填满手机的整个屏幕
【发布时间】：2017-02-14 13:59:06
【问题描述】：

现在，我正在尝试创建一个“snapchat”类型的网络应用程序，用于我的教育。该应用使用 HTML5 标签，例如视频和画布。

然后我使用 getUserMedia 来获取相机输出，但我的问题是我无法让视频标签填满整个屏幕。

我已经尝试了所有的宽度：100%; height: 100%;, height: 100vh, jquery, 但是这搞砸了 getUserMedia 函数，所以它甚至没有工作。

现在，这是我的代码： HTML 文件：

<!doctype html>
<html lang="da">
    <head>
        <title>Camera output</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/style.css" type="text/css" rel="stylesheet">
        <script src="jquery-3.1.1.min.js"></script>
    </head>
    <body>
        <video id="video" autoplay></video>
        <button id="snap" class="snapButton">Snap Photo</button>
        <canvas id="canvas" width="640" height="480"></canvas>

        <script src="js/script.js" type="text/javascript"></script>
    </body>
</html>

CSS 文件：

* {
    margin: 0;
    padding: 0;
}

#video {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    transform-origin: center center;
}

JS 文件：

function setElementFullScreen(selector) {
     var ele= $(selector);
     // Set left/top, can be done in directly in css
     ele.css('top',0).css('left',0);
     // Set size from window
     ele.height($(window).height()).width($(window).width());
 }

 $(document).ready(function () {
     setElementFullScreen('video');
 });

// Add resize event
$(window).on('resize', function () {
    setElementFullScreen('video');
});

// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
    // Grab elements, create settings, etc.
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var video = document.getElementById('video');
    var mediaConfig =  { video: true };
    var errBack = function(e) {
        console.log('An error has occurred!', e)
    };

    // Put video listeners into place
    if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
            video.src = window.URL.createObjectURL(stream);
            video.play();
        });
    }

    /* Legacy code below! */
    else if(navigator.getUserMedia) { // Standard
        navigator.getUserMedia(mediaConfig, function(stream) {
            video.src = stream;
            video.play();
        }, errBack);
    } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
        navigator.webkitGetUserMedia(mediaConfig, function(stream){
            video.src = window.webkitURL.createObjectURL(stream);
            video.play();
        }, errBack);
    } else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
        navigator.mozGetUserMedia(mediaConfig, function(stream){
            video.src = window.URL.createObjectURL(stream);
            video.play();
        }, errBack);
    }

    // Trigger photo take
    document.getElementById('snap').addEventListener('click', function() {
        context.drawImage(video, 0, 0, 640, 480);
    });
}, false);

所以我的问题是：有没有办法让视频标签填满手机屏幕的每一处？我在桌面上试过，横着填没问题。

提前致谢。

【问题讨论】：

标签： javascript html video getusermedia

【解决方案1】：

试试这个，

 <video id="video" autoplay></video>

 <script>
     var elem = document.getElementById("myvideo");
     if(elem.requestFullscreen) {
         elem.requestFullscreen();
     }
 </script>

这将要求浏览器在视频播放时使用全屏。我认为您会在移动设备上的浏览器兼容性方面遇到一些问题。

参考： https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

编辑：

似乎是你的ele.height($(window).height()).width($(window).width()); 给你添麻烦了。尝试将window.height() 和window.width() 记录到您的调试控制台以确定它返回的内容。

如果你还没有，看看这个：

https://www.w3schools.com/tags/canvas_drawimage.asp

这是一个包含类似应用示例的教程：

https://www.html5rocks.com/en/tutorials/getusermedia/intro/

【讨论】：

我想你误会了。我不希望它全屏显示，因为我将在元素顶部放置按钮。我希望它填满手机的整个背景/屏幕
我认为你的问题根本不是这样。您可以发布更多代码吗？对您的 CSS 以及视频和按钮覆盖的包装器特别感兴趣。
对不起，如果我的问题不是那么清楚。我已经用我的 html、css 和 js 文件更新了我的问题。

【解决方案2】：

这里有一个带有工作示例的片段。

function setElementFullScreen(selector) {
    var ele = $(selector);
    // Get window size
    var maxWidth = $(window).width();
    var maxHeight = $(window).height();
    // Get video size
    var videoWidth = ele.width();
    var videoHeight = ele.height();
    // Calcul relative size 
    if (maxWidth > maxHeight) {
        var relatifWidth = videoWidth / (videoHeight / maxHeight);
        var relatifHeight = maxHeight;
    } else {
        var relatifWidth = maxWidth;
        var relatifHeight = videoHeight / (videoWidth / maxWidth);
    }
    // Check if result size is not bigger than canvas size
    if (relatifWidth > maxWidth) {
        relatifWidth = maxWidth;
        relatifHeight = (relatifWidth * videoHeight) / videoWidth;
    } else if (relatifHeight > maxHeight) {
        relatifHeight = maxHeight;
        relatifWidth = (relatifHeight * videoWidth) / videoHeight;
    }
    // Set size from window
    ele.height(relatifHeight).width(relatifWidth);
}

$(document).ready(function () {
    setElementFullScreen('#video');

    // Put event listeners into place
    window.addEventListener("DOMContentLoaded", function () {
        // Grab elements, create settings, etc.
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var video = document.getElementById('video');
        var mediaConfig = {video: true};
        var errBack = function (e) {
            console.log('An error has occurred!', e)
        };

        // Put video listeners into place
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia(mediaConfig).then(function (stream) {
                video.src = window.URL.createObjectURL(stream);
                video.play();
            });
        }

        /* Legacy code below! */
        else if (navigator.getUserMedia) { // Standard
            navigator.getUserMedia(mediaConfig, function (stream) {
                video.src = stream;
                video.play();
            }, errBack);
        } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
            navigator.webkitGetUserMedia(mediaConfig, function (stream) {
                video.src = window.webkitURL.createObjectURL(stream);
                video.play();
            }, errBack);
        } else if (navigator.mozGetUserMedia) { // Mozilla-prefixed
            navigator.mozGetUserMedia(mediaConfig, function (stream) {
                video.src = window.URL.createObjectURL(stream);
                video.play();
            }, errBack);
        }

        // Trigger photo take
        document.getElementById('snap').addEventListener('click', function () {
            context.drawImage(video, 0, 0, 640, 480);
        });
    }, false);

});

// Add resize event
$(window).on('resize', function () {
    setElementFullScreen('video');
});

video {
      margin: 0;
      padding: 0;
      top: 0;
      left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="video" autoplay>
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> 
</video>
<br>
<button id="snap" class="snapButton">Snap Photo</button>
<br>
<canvas id="canvas" width="640" height="480"></canvas>

【讨论】：

它似乎不起作用。如果我将选择器从视频更改为我的按钮，它会起作用，并使按钮填满屏幕，但我的视频元素保持相同的大小。如果你想看看，我已经用我的完整代码更新了我的问题。
我尝试了一些东西，如果对你有帮助，请告诉我。