width和height属性仅设置播放器容器像素尺寸，不改变视频宽高比；需配合css的object-fit等样式才能控制画面填充方式，响应式场景推荐用css替代html属性。
width 和 height 属性可直接设定视频播放器的像素尺寸，但仅作用于播放器容器本身，不改变视频内容的实际宽高比或缩放行为。
基础用法：固定像素值最直观
在 <video></video> 标签中写入数值即可：
-
width="640" height="360"表示播放器宽 640px、高 360px； - 若只设
width而不设height，浏览器通常按原始视频比例自动计算高度（但不可靠，建议显式设置）； - 注意：该尺寸是播放器控件区域的整体大小，包括黑边、按钮栏等，不是纯画面区域。
常见误区：设了宽高 ≠ 视频画面填满
即使设置了 width="100%" height="400"，视频画面仍可能留有上下/左右黑边。这是因为：
- 浏览器默认按视频原始比例缩放画面，不拉伸；
- 要让画面撑满容器，需额外加 CSS：
object-fit: cover（裁剪适配）或object-fit: fill（拉伸填充）； - 仅靠 HTML 属性无法控制画面裁剪逻辑，必须配合样式。
响应式场景下慎用固定像素
在移动端或流体布局中，写死 width="800" height="450" 容易导致溢出或过小：
- 推荐改用 CSS 控制，如
width: 100%; max-width: 800px;； - 结合
aspect-ratio: 16 / 9可保持比例自适应（现代浏览器支持）； - 若需兼容旧版，可用 padding-bottom 百分比 + 绝对定位视频的方式模拟宽高比。
优先级与覆盖关系要清楚
HTML 的 width/height 属性会转为内联样式（width: 640px; height: 360px;），但会被 CSS 中带 !important 的规则或更具体的选择器覆盖：
- 例如
video { width: 100% !important; }会强制忽略 HTML 属性； - 调试时可在浏览器开发者工具中查看最终生效的尺寸来源；
- 避免同时在 HTML 和 CSS 中重复设置，以防冲突。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
