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

Answer 2

$("#video1").width($(document).width()).height($(document).height());，使用width和height获取文档的当前计算宽度/高度，并为视频元素设置该值。 JSFiddle working demo

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

2 个答案: