使用 HTML5+CSS3 实现视频宽高不一致自适应

方法一：使用 object-fit 属性

这是最简单且推荐的方法，通过 CSS 的 object-fit 属性，可以控制视频在容器内的填充方式，从而实现自适应。

HTML 代码：

CSS 代码：

.video-container {
  width: 100%; /* 容器宽度占满父元素 */
  height: auto; /* 容器高度根据视频比例自适应 */
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 视频保持比例，完整显示在容器内 */
}

object-fit 属性的常用值：

• contain：保持视频原有宽高比，完整显示在容器内，可能会出现留白。
• cover：保持视频原有宽高比，缩放视频以覆盖整个容器，可能会裁剪视频。
• fill：拉伸或压缩视频以填充整个容器，可能导致视频变形。
• none：视频保持原始尺寸，不进行缩放或裁剪。
• scale-down：如果视频尺寸小于容器，则按 none 处理；否则按 contain 处理。

方法二：使用 padding-bottom 实现等比例缩放

这种方法通过设置容器的 padding-bottom 值，使其高度始终保持与宽度一定的比例，从而实现视频的等比例缩放。

HTML 代码：

CSS 代码：

.video-wrapper {
  width: 100%;
  position: relative; /* 设置相对定位，为子元素绝对定位做准备 */
  padding-bottom: 56.25%; /* 16:9 比例，可根据视频比例调整 */
  height: 0;
}

.video-wrapper video {
  position: absolute; /* 设置绝对定位，使其相对于父元素定位 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

注意事项：

• padding-bottom 的百分比值需要根据视频的宽高比来计算。例如，16:9 的视频比例，padding-bottom 值为 56.25%（9 / 16 * 100%）。
• 这种方法适用于需要保持视频宽高比的场景。

方法三：使用 JavaScript 动态计算高度

如果需要更复杂的自适应逻辑，可以使用 JavaScript 来动态计算视频容器的高度。

HTML 代码：

JavaScript 代码：

const videoContainer = document.querySelector('.video-container');
const video = videoContainer.querySelector('video');

video.addEventListener('loadedmetadata', function() {
  const videoRatio = video.videoWidth / video.videoHeight;
  videoContainer.style.height = videoContainer.offsetWidth / videoRatio + 'px';
});

window.addEventListener('resize', function() {
  const videoRatio = video.videoWidth / video.videoHeight;
  videoContainer.style.height = videoContainer.offsetWidth / videoRatio + 'px';
});

代码解释：

• loadedmetadata 事件：在视频元数据加载完成后触发，获取视频的原始宽高。
• resize 事件：在窗口大小改变时触发，重新计算视频容器的高度。
• videoRatio：视频的宽高比。
• videoContainer.offsetWidth：视频容器的宽度。