Video.js：使视频保持最大高度的长宽比

问题描述

我正在创建一个带有视频页面的网站。我正在将Video.js用于视频播放器。视频可以具有许多不同的宽高比，从超宽屏到手机垂直视频都可以。我希望视频播放器保持其纵横比。这可以通过在视频元素上设置fluid="true"来实现。

但是，在某些纵横比下，这会带来问题。例如，垂直视频在变成其容器的流体宽度时，会将其下方的元素（如视频标题）推到页面下方很远的位置，并且通常不在屏幕上。为了防止这种情况发生，我想将视频的最大高度设置为80vh左右。

请考虑以下代码片段（运行代码片段时不会对其进行扩展，因为这会增加可用的垂直空间，此处的目标是模拟一个垂直空间很小的屏幕）：

带有fluid="true"的Video.js视频。由于视频在屏幕的整个宽度上的纵横比使其比屏幕高，因此视频标题被推离页面：

<head>
  <link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />
</head>

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    fluid="true"
    data-setup="{}"
  >
    <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4" />
  </video>
  <h1>Video Title</h1>

  <script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
</body>

带有fluid="true"和max-width: '150px'的Video.js视频。由于减小了视频的宽度，因此视频的高宽比不会将视频标题推离页面。但是，这对我来说不是很有用，因为没有一种简便的方法可以以视频永远不会比80vh高的方式设置最大宽度：

<head>
  <link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />
</head>

<body>
  <p>max-width = 150px</p>
  <div style="max-width: 150px">
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    fluid="true"
    data-setup="{}"
  >
    <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4" />
  </video>
  </div>
  <h1>Video Title</h1>

  <script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
</body>

带有fluid="true"和max-height: '150px'的Video.js视频。 Video.js忽略max-height并将视频标题推出页面：

<head>
  <link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />
</head>

<body>
  <p>max-height = 150px,but the video overflows the container</p>
  <div style="max-height: 150px">
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    fluid="true"
    data-setup="{}"
  >
    <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4" />
  </video>
  </div>
  <h1>Video Title</h1>

  <script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
</body>

如何做到这一点，同时在Video.js中保留长宽比，视频不能超过80vh？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript video.js