如何使视频填充可用视口

Posted 2023-03-05

【中文标题】如何使视频填充可用视口

【英文标题】：How to make a video fill the available viewport

【发布时间】：2020-09-08 16:25:42

【问题描述】：

我在 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。

这很好，除了两个问题：

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

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

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

【问题讨论】：

这能回答你的问题吗？ Html5 Full screen video

【参考方案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。

祝你好运！

【参考方案2】：

要回答您的第一个问题，我将在 *** 上链接类似的问题：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;

【讨论】：

object-fit 不适合我。不幸的是，我无法将视频静音。问题是它会在 chrome 上自动播放音频。

请在某处发布一个示例（JsFiddle/JsBin）？

它不会在 Chrome 手机或任何没有静音标签的移动设备上自动播放。在 Chrome 桌面上 - 有客户特定的语义决定自动播放 (developers.google.com/web/updates/2017/09/…)。确保它在隐身标签（或其他运行 Chrome 的设备）中播放。过去在您的页面上按下播放键的 Juts 足以让它自动播放。