html - 宽屏上 100% 宽度的视频

Question

当我将 html5 视频的宽度和高度设置为 100% 时，视频高度大于浏览器可见区域并出现垂直滚动条。

是因为我的视频是 4:3 格式的吗？如何调整它的大小以填充整个空间而无需向下滚动页面？

谢谢阅读！

Answer 1

您将需要使用 javascript 检查浏览器窗口的高度，并将您的视频限制为小于该高度。这是小提琴 HTML：

<video id="vid1" controls>
    <source src="movie.mp4" type="video/mp4" />
      <source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>

CSS：

video {
    width:100%;
    height:100%;
}

Javascript：

window.onresize = function(event) {
  var h=window.innerHeight;  
  document.getElementById("vid1").style.maxHeight=h+"px";  
}