index.html里怎样制作一个响应式视频播放界面？

最简方案是直接设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。