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

您好我正在尝试使用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

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

回答

相关问题