html5视频应通过css控制宽高比而非width/height属性：现代浏览器用aspect-ratio+object-fit，旧版用padding-top技巧；配合响应式源、playsinline及防缩放优化移动端体验。
HTML5 视频默认不维持宽高比，直接设 width/height 属性会导致变形或响应式失效。真正有效的比例控制，核心是用 CSS 管理容器比例 + 视频填充方式，而不是依赖 HTML 属性或 JS 计算。
用 aspect-ratio 保持原始比例（现代推荐）
如果目标浏览器支持（Chrome 88+、Firefox 89+、Safari 15.4+），aspect-ratio 是最简洁可靠的方案：
- 给容器设
width: 100%; aspect-ratio: 16 / 9;，高度自动计算 -
video设width: 100%; height: 100%; object-fit: contain;或cover，按需选择是否留黑边或裁剪 - 避免同时设
height固定值，否则会覆盖aspect-ratio - 搭配
@supports (aspect-ratio: 1 / 1)写降级样式，兼容老浏览器
用 padding-top 技巧兼容旧环境
针对 IE、旧版 Android 或 Safari 15.3 及以下，用包裹容器模拟比例：
- 外层容器设
position: relative; width: 100%; padding-top: 56.25%;（16:9） -
video设position: absolute; top: 0; left: 0; width: 100%; height: 100%; - 容器加
overflow: hidden，防止object-fit: cover溢出 - 若视频实际比例非 16:9，按真实比例调整 padding-top 值（如 4:3 → 75%）
控制视频填充方式：contain 还是 cover？
object-fit 决定内容如何适配容器，必须配合明确尺寸才生效：
-
object-fit: contain：完整显示，上下或左右留黑边，适合教学、演示类视频 -
object-fit: cover：填满容器，可能裁剪边缘，适合背景视频或海报式展示 - 务必给父容器设
overflow: hidden，尤其用cover时 - 慎用
fill—— 容易拉伸变形，一般不推荐
响应式源文件与移动端适配细节
光靠 CSS 缩放不够，清晰度和交互体验需额外处理：
- 用
<source></source>的media属性按断点提供不同分辨率源（如 480p/720p/1080p） - iOS 上加
playsinline webkit-playsinline，阻止点击自动全屏 - 禁用双击缩放：加
ontouchstart="this.focus()"或-webkit-user-select: none - Retina 屏建议提供 2x 分辨率源，或优先用 H.265 编码提升同等码率下的画质
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
