在所有分辨率下全屏設置“視頻寬度”和“高度”

Question

您好，我正在嘗試使用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);

沒有這個工作.....

Answer 1

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

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

您可以在這里嘗試： 演示

Answer 2

$("#video1").width($(document).width()).height($(document).height()); ，使用width和height獲取當前計算出的文檔寬度/高度，並為您的video元素設置該值。 JSFiddle工作演示