javascript - 在所有分辨率问题上全屏设置视频宽度和高度

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>

您可以在这里尝试:DEMO