HTML視頻標籤用於填充手機上的整個屏幕

現在，我正在嘗試爲我的教育創建一個「snapchat」類的web應用程序。該應用使用HTML5標籤，如視頻和畫布。HTML視頻標籤用於填充手機上的整個屏幕

然後我使用getUserMedia來獲取相機輸出，但我的問題是我無法獲得視頻標籤來填充整個屏幕。

我嘗試了一切從寬度：100％;身高：100％，身高：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);

所以我的問題是：有沒有任何方式使視頻標籤填充手機屏幕的每一個位？我在桌面上嘗試過，它在水平填充時沒有問題。

在此先感謝。

來源

2017-02-14 Ismail

試試這個，

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

來源

2017-02-14 14:43:25 bowl0stu

我想你誤會了。我不希望它全屏顯示，因爲我將在元素頂部有按鈕。我希望它能填充手機的整個背景/屏幕 – Ismail

這完全不是我認爲你的問題所在。你可以發佈一些更多的代碼嗎？特別感興趣的是你的'CSS'和視頻和按鈕覆蓋的包裝。 – bowl0stu

對不起，如果我的問題不是很清楚。我用我的html，css和js文件更新了我的問題。 – Ismail

在這裏，您有動作示例的snipplet 。

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>

來源

2017-02-14 15:39:34 Camille

它似乎沒有工作。如果我將選擇器從視頻更改爲我的按鈕，它將起作用，並使按鈕填滿屏幕，但我的視頻元素保持相同大小。如果您想查看，我已經用完整的代碼更新了我的問題。 – Ismail

我嘗試了一些東西，告訴我是否可以幫助你。 – Camille

HTML視頻標籤用於填充手機上的整個屏幕

回答

相關問題