在所有分辨率上全屏設置視頻寬度和高度問題

您好我正在嘗試使用JavaScript/jQuery設置視頻寬度和視頻高度。我需要獲得一個頁面加載視頻，以在任何分辨率的全屏幕上設置。在這裏，我設法做的，但它不工作，我是JavaScript或jQuery的新手，但我認爲代碼的邏輯是正確的。感謝您的時間！在所有分辨率上全屏設置視頻寬度和高度問題

HTML代碼

<div id='videoContainer'> 
    <video id = "video1" src="video/1v.mp4"> Test Video </video> 
</div> 
    <script type = "text/javascript"> 
    var video1 = document.getElementById('video1') ; 

    function playVideo() 
    { 
    video1.volume = 1 ; // Setting volume to maximum (Range : 0 to 1) 
    video1.play() ; 

    } 
    video1.onload = playVideo() ; 
    </script>

JavaScript代碼

我試着這樣做：$('#video1').css({"width":screen.width, "height":screen.height});

而像這樣：

這

sw=innerWidth; 
sh=innerHeight; 
$('#video1').css('width',sw); 
$('#video1').css('height',sh);

非工作.... 。

來源

2014-03-02 Chris

你可以嘗試$（窗口）.height（）;和$（window）.width（）; – TestUser1

這將使我的所有元素被設置爲最大寬度和最大高度？在用戶關閉它之後，我只需要像這樣設置視頻。 – Chris

或者你可以使用'width = window.innerWidth;''height = window.innerHeight;' – TestUser1

使用此代碼，它現在應該工作：

<div id='videoContainer'> 
    <video id="video1" src="video/1v.mp4"> Test Video </video> 
</div> 
<script type="text/javascript"> 
function playVideo() { 
    var video=document.getElementById("video1"); 
    video.width=window.innerWidth; 
    video.height=window.innerHeight; 
    video1.volume = 1; 
    video1.play(); 
} 
video1.onload = playVideo(); 
</script>

你可以在這裏嘗試一下：DEMO

來源

2014-03-02 11:01:56 TestUser1

$("#video1").width($(document).width()).height($(document).height());，使用width和height獲取文檔的當前計算寬度/高度並設置視頻元素的值。 JSFiddle working demo

來源

2014-03-02 10:44:38

在所有分辨率上全屏設置視頻寬度和高度問題

回答

相關問題