HTML5视频自适应需同步控制宽高比、容器行为和播放策略；现代方案用aspect-ratio:16/9配合width:100%、height:auto和object-fit:cover，确保比例稳定、高度自适应且画面不拉伸。
HTML5 视频默认不随容器缩放，只设 width: 100% 很容易导致高度塌陷、controls 被裁、画面拉伸或黑边错位。真正自适应的关键是三件事同步控制：宽高比固定、容器行为可控、播放策略适配。
用 aspect-ratio 稳住比例（现代首选）
这是最简洁可靠的方案，浏览器原生支持宽高比计算，无需 JS 或 hack：
- 给
<video>直接加aspect-ratio: 16 / 9（按实际视频比例调整，如 4/3、21/9） - 配合
width: 100%; height: auto;，高度自动按比例生成 - 加上
object-fit: cover防止内容拉伸，裁剪边缘比留黑边更符合主流体验 - 旧版 Safari（@supports 加 fallback 样式即可
用容器包裹 + padding-bottom 兼容老环境
当需要支持 Android 4.x、IE 或早期 iOS 时，传统技巧依然有效且稳定：
- 外层
<div class="video-wrapper">设position: relative; width: 100%; padding-bottom: 56.25%;（16:9 对应值） - 内部
<video>设position: absolute; top: 0; left: 0; width: 100%; height: 100%; - 务必加
height: 0到 wrapper，否则 padding-bottom 不生效 - 这个结构对 poster 图片、字幕轨道和 controls 渲染也更友好
控制播放行为，避免移动端干扰
响应式不只是尺寸，还包括交互逻辑。尤其在 iOS 上，默认点击就全屏，会打断页面流：
立即学习“前端免费学习笔记（深入）”；
- 加
playsinline webkit-playsinline属性，强制内联播放 - 静音自动播放需搭配
muted autoplay，否则 Safari 和 Chrome 会拦截 - 禁用双击缩放：加
ontouchstart="this.focus()"或 CSS-webkit-user-select: none - 避免用
controlslist="nodownload"控制布局——它不改变尺寸，仅作提示
提升加载与清晰度体验
自适应不仅是“看起来满屏”，还要兼顾带宽、像素密度和可访问性：
- 用多个
<source>按媒体查询提供不同分辨率源，例如：<source src="vid-480.mp4" media="(max-width: 768px)"><source src="vid-1080.mp4" media="(min-width: 769px)"> - Retina 屏建议提供 2x 分辨率源，或用 H.265 编码降低同等画质下的体积
- 始终设置
poster属性，图尺寸需匹配视频比例，最小建议 720p - 添加
<track kind="captions">，保障无声音或听力障碍用户可用
