如何使视频填充可用视口

Question

我在 HTML 页面上嵌入了一个视频，如下所示：

<div id="contentVideo">
  <video id="video" controls autoplay preload="auto" type="video/mp4" src=<?php echo $url; ?>">
</div>

还有这个 CSS

#video {
  width:100vw;
  height:100vh;
}

我也试过了

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

此视频的数据由 PHP 读取并转储到页面上，因此用户不会看到视频的 URL。

这很好，除了两个问题：

1. 视频不会在 Safari 上自动播放
2. 视频填充了一个巨大的尺寸，但我希望它只填充浏览器的大小。

我解释一下：视频是高清的。假设用户在不超过 1000x500 像素的浏览器窗口中看到该页面。我希望视频缩放以适应可用窗口，而不是以其原始大小显示。

如何使用 CSS/JavaScript 保持视频比例，如果窗口改变大小，视频会重新缩放？

Answer 1

您可以尝试通过使用 css 的媒体查询来解决此问题。这就是重点。您应该将 # media-container 设置为您希望它看起来像的任何大小。使用我提供的媒体查询，您可以设置哪个#media-container 应该看起来像什么大小。你也可以使用object-fit : cover;。因此，您可以获得按大小响应的视频。

 // Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
}

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) {

 }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

另外，如果您想调整视频容器的大小并始终显示您放入其中的视频的大小，您可能会对这个功能感兴趣。 ：纵横比容器：https://css-tricks.com/aspect-ratio-boxes/

注意：在这种情况下，您似乎不需要使用 javascript。

祝你好运！

Answer 2

要回答您的第一个问题，我将在 stackoverflow 上链接类似的问题：Video auto play is not working in Safari and Chrome desktop browser - 您必须为视频添加静音属性

第二部分：您可以在视频元素 (https://www.w3schools.com/css/css3_object-fit.asp) 上使用 CSS 属性 object-fit: cover - 适用于除 IE 之外的所有现代浏览器（因此它适用于所有现代浏览器）。所以你的 CSS 应该是这样的：

#video {
  width:100vw;
  height:100vh;
  object-fit: cover;
}