最简方案是直接设width: 100%和height: auto，但易导致变形或裁切；真正可用的需用aspect-ratio（如16/9）配合object-fit: contain保持比例与完整显示。
用 <video> 标签 + 原生 CSS 实现基础响应式布局
直接给 <video> 设置 width: 100% 和 height: auto 是最简方案，但仅靠这个会出问题：横屏视频在窄屏下会被压缩变形，竖屏视频（如手机直拍）可能被裁切。真正可用的响应式需要配合 aspect-ratio 或 padding-top 技巧来维持宽高比。
推荐写法：
<div class="video-container">
<video controls poster="cover.jpg">
<source src="play.mp4" type="video/mp4">
</video>
</div>对应 CSS：
.video-container {
position: relative;
width: 100%;
aspect-ratio: 16 / 9; /* 现代浏览器支持，优先用它 */
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain; /* 保证完整显示，不拉伸 */
}-
aspect-ratio比 JS 计算或padding-top更可靠，主流浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）已支持 - 如果必须兼容老版本 Safari（padding-top: 56.25% +
absolute内嵌视频的旧方法 -
object-fit: contain防止黑边被拉满填满导致变形；若要铺满且允许裁切，改用cover
移动端自动全屏播放失败？检查 playsinline 和 webkit-playsinline
iOS Safari 默认强制全屏播放，<video> 在页面内点击后会跳转到全屏控制器 —— 这不是 bug，是 Apple 的策略。想让它留在页面内播放（比如做交互式教学视频），必须加两个属性：
立即学习“前端免费学习笔记（深入）”；
<video controls playsinline webkit-playsinline> <source src="play.mp4" type="video/mp4"> </video>
-
playsinline是标准属性，Chrome for Android、新版 Edge 也认 -
webkit-playsinline是 iOS Safari 专属，缺一不可 - 即使加了，iOS 上仍需用户手动触发播放（不能
autoplay+muted以外的自动播放） - 如果用了 Video.js 或 Plyr 等库，它们内部已封装这些，但自定义控件时容易漏掉
加载慢、首帧卡顿？优先用 preload="metadata"，慎用 autoplay
默认 preload 行为因浏览器而异，Chrome 可能预加载整个视频，导致首屏加载变慢、带宽浪费。尤其当页面有多个视频时，问题更明显。
-
preload="none"：完全不预加载，用户点播放才开始请求，延迟高 -
preload="metadata"：只加载时长、封面、音轨等元信息，兼顾响应速度和用户体验，推荐作为默认值 -
preload="auto"：由浏览器决定，实际常等同于全量加载，不建议设死 -
autoplay在移动设备上基本无效（除非muted），且影响 LCP 指标，上线前务必关掉
另外，确保视频文件本身做了优化：mp4 容器 + H.264 编码 + 关键帧间隔 ≤ 2s，否则 seek 和起播都会卡。
自定义控件时，video.webkitSupportsFullscreen 不等于“当前可全屏”
判断是否支持全屏，不能只看 video.webkitSupportsFullscreen —— 它只是声明“这个 video 元素理论上能全屏”，但实际能否调用 requestFullscreen()，还要看上下文。
- 必须在用户手势事件（如
click、touchend）中调用，否则 Chrome/Safari 会静默拒绝 - iOS Safari 下，即使加了
playsinline，video.requestFullscreen()仍会失败，得用document.documentElement.requestFullscreen()并手动把 video 放进全屏容器里 - 检测运行时能力更靠谱：
if ('requestFullscreen' in document.documentElement)判断 API 存在性，再结合event.isTrusted确保是真实用户操作
响应式不只是尺寸适配，更是行为适配：同一套 HTML，在桌面点一下能内联播放，在 iPhone 上却要先点再跳转全屏，这种差异必须在交互层处理，而不是只靠 CSS。
