如何在HTML中自动调整视频尺寸？附JavaScript播放视频咨询

一、修复视频被裁切的问题 #

视频出现裁切一般是尺寸适配逻辑不合理，给你两个直接落地的解决方案：

方案1：通过CSS强制保持视频完整显示 #

给video标签添加样式，确保它不会超出视口或容器，同时保留原始宽高比：

video {
  max-width: 100%;
  max-height: 100vh; /* 限制最大高度为当前浏览器视口高度 */
  object-fit: contain; /* 完整渲染视频，多余空间留白，不会裁切内容 */
}

• 如果需要视频填满容器但不拉伸变形，可以替换object-fit: contain为object-fit: cover（这种情况会裁切超出容器的部分，适合做背景视频）

方案2：检查父容器的约束 #

如果视频的父容器设置了固定宽高、overflow: hidden等属性，也会导致视频被裁切。调整父容器样式：

.video-container {
  width: 100%;
  height: auto;
  overflow: visible;
}

二、用JavaScript控制视频播放 #

基础播放/暂停控制 #

先通过DOM获取视频元素，再调用原生API实现控制：

<video id="targetVideo" controls name="media">
  <source src="你的视频路径.mp4" type="video/mp4">
</video>
<button onclick="triggerPlay()">播放</button>
<button onclick="triggerPause()">暂停</button>

const video = document.getElementById('targetVideo');

// 播放函数
function triggerPlay() {
  // 处理浏览器自动播放限制，需要用户交互触发
  video.play().catch(err => console.error('播放失败:', err));
}

// 暂停函数
function triggerPause() {
  video.pause();
}

自动播放的兼容处理 #

现代浏览器对自动播放有严格限制，仅静音视频允许自动播放，可这样设置：

<video autoplay muted controls name="media">
  <source src="你的视频路径.mp4" type="video/mp4">
</video>

也可以在用户首次交互（比如点击页面）后触发自动播放：

document.addEventListener('click', () => {
  video.play();
});

常用扩展API #

• video.currentTime = 15;：跳转到视频第15秒
• video.volume = 0.3;：设置音量为30%
• video.loop = true;：开启循环播放

内容的提问来源于stack exchange，提问作者Dany