HTML5响应式视频需用CSS实现宽高比自适应（如aspect-ratio或padding-top技巧），配合<source>媒体查询提供多分辨率源，优化移动端交互与Retina适配，并保障无障碍与降级支持。
HTML5视频实现响应式布局，核心是让<video>元素随容器宽度自适应缩放，同时保持正确的宽高比、清晰度和播放体验，不依赖固定像素值。
用CSS控制宽高比与自适应尺寸
直接设置width: 100%和height: auto是最简方式，但需确保父容器有明确宽度（如max-width: 100%），并避免因父级塌陷导致视频收缩异常。更稳妥的做法是结合aspect-ratio属性（现代浏览器支持）或传统padding-top技巧：
- 推荐（现代方案）：
video { width: 100%; aspect-ratio: 16 / 9; }—— 自动维持16:9比例，高度随宽度动态计算 - 兼容旧版（如IE/老Android）：用包裹容器+padding-top模拟比例，例如
.video-wrapper { position: relative; width: 100%; padding-top: 56.25%; }，再将video设为position: absolute; top: 0; left: 0; width: 100%; height: 100%;
适配不同屏幕的源文件选择
仅靠CSS缩放无法解决带宽与清晰度问题。应使用<source>配合media属性或srcset逻辑（虽srcset原生不支持video，但可用JS增强）提供多分辨率资源：
- 静态方案：在
<video>内按顺序写多个<source>，浏览器按格式支持+媒体查询匹配优先加载，例如：<source src="vid-480.mp4" type="video/mp4" media="(max-width: 768px)"><source src="vid-720.mp4" type="video/mp4" media="(min-width: 769px) and (max-width: 1200px)"><source src="vid-1080.mp4" type="video/mp4" media="(min-width: 1201px)"> - 动态方案：监听
resize或load事件，用JavaScript检测window.innerWidth后动态设置video.src，适合需精细控制加载时机的场景
移动端与高清屏的细节优化
响应式视频不止于“能铺满”，还需兼顾触控友好性、像素密度和性能：
立即学习“前端免费学习笔记（深入）”；
- 禁用双击缩放（iOS Safari）：在
<video>上添加ontouchstart="this.focus()"或用CSS-webkit-user-select: none减少误操作 - 适配Retina屏：提供2x分辨率视频源（如2160p供4K屏），或优先使用H.265编码，在同等码率下提升清晰度
- 避免强制全屏干扰：iOS默认点击即全屏，可加
playsinline webkit-playsinline属性保留在页面内播放
无障碍与降级保障
响应式结构不能牺牲可访问性或基础可用性：
- 始终包含
<track>字幕和poster占位图，确保无JS或低带宽下仍有视觉反馈 - 为不支持
aspect-ratio的浏览器提供@supports回退样式，例如：@supports not (aspect-ratio: 16 / 9) { video { height: 0; padding-top: 56.25%; } } - 用
preload="metadata"平衡首帧加载速度与流量消耗，尤其对大分辨率视频
