Question

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

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

我尝试过宽度：100％; height：100％;，height：100vh，jquery，但这搞砸了getUserMedia函数，所以它甚至都不起作用。

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

* {
    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;
}

CSS文件：

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);

JS文件：

/posts/postid1:{“Title”:”Title 1”,  “body”: “About Firebase”, “tags”: {“tag1:true, “tag2”: true}}
/tags/tag1/postid1: {“Title”:”Title 1”,  “body”: “About Firebase”}
/tags/tag2/postid1: {“Title”:”Title 1”,  “body”: “About Firebase”}

所以我的问题是：有没有办法让视频标签填满手机屏幕的每一个位置？我在桌面上试过，水平填充没问题。

提前致谢。

Answer 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/

Answer 2

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

＆＃13;

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');
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

HTML视频标签可以在手机上填满整个屏幕

2 个答案: