Question

我正在尝试将视频元素设置为全宽和“全屏”并同时响应。

基本上，我不想使用全屏api，我只是希望视频适合用户的屏幕，无论他们访问网站的大小屏幕。我已经制作了一个全宽视频，唯一的问题是高度有点太大。

这是相当简单的代码：

<video id="bgvid" width="100%" height="" autoplay loop poster="">
            <source src="video.webm" type="video/webm" />
            <source src="video.mp4" type="video/mp4" />
</video>

就像我说的那样，由于高度的原因，它会导致它全宽但比整个屏幕大。

Answer 1

我建议你使用javascript来控制它。您可以使用以下代码获得高度和宽度

width = $( window ).width();
height = $( window ).height();    
document.getElementById('widthID').innerHTML=width; 
document.getElementById('heightID').innerHTML=height;

您可以在应用程序中使用上述代码

Answer 2

这不行吗？：

<video id="bgvid" width="100%" height="100%" autoplay loop poster="">
        <source src="video.webm" type="video/webm" />
        <source src="video.mp4" type="video/mp4" />
</video>

width =“100％”height =“100％”

Answer 3

您可以随时对其进行设置，以便用户可以自行选择视频大小。喜欢这个

<div style="text-align:center"> 
<button onclick="makeBig()">640px - Normal</button>
<button onclick="makeNormal()">420px - Small</button>
<button onclick="makeSmall()">320px - Smaller</button>
<br> 
<video id="video1" width="100%" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div> 

<script> 
var myVideo = document.getElementById("video1"); 

function makeBig() { 
myVideo.width = 640; 
} 

function makeSmall() { 
myVideo.width = 320; 
} 

function makeNormal() { 
myVideo.width = 420; 
} 
</script>

HTML5视频100％适合用户的屏幕

3 个答案: