video标签添加controls属性即可显示默认控制条，它为布尔属性，无需赋值，拼写必须正确；若同时使用autoplay，需配合muted才能自动播放；controls仅提供原生控件，不支持css定制；控件不显示可能源于资源加载失败、mime类型错误或编码不兼容。
video 标签加 controls 属性就能显示默认控制条
只要在 <video></video> 标签上写上 controls 这个布尔属性，浏览器就会自动渲染播放/暂停、进度条、音量、全屏等原生控件。它不接受值，写上即生效，不需要 controls="true" 或 controls=""（虽然后者也行，但冗余）。
常见错误是漏掉这个属性，或误写成 control（少一个 s），导致控制条完全不出现。
-
<video src="demo.mp4" controls></video>✅ 正确 -
<video src="demo.mp4"></video>❌ 无控制条 -
<video src="demo.mp4" control></video>❌ 拼写错误，无效
controls 属性和 autoplay、muted 的配合关系
如果同时设置了 autoplay，部分浏览器（尤其是 Chrome、Safari）会因策略限制，强制要求视频静音（muted）才能自动播放；此时即使有 controls，用户也无法手动取消静音——除非先暂停再操作。所以实际部署时要注意行为一致性。
- 想自动播放 + 显示控制条 → 必须加
muted：<video src="a.mp4" autoplay muted controls></video> - 想让用户自主控制音量 → 别设
autoplay，否则首次点击播放前可能无法调音量 - 移动端 Safari 对
autoplay更严格，即使muted也可能被拦截
controls 不等于可定制 UI，它只是浏览器原生控件
controls 只触发内置样式与逻辑，无法通过 CSS 直接修改按钮颜色、进度条高度或隐藏某一项（比如只留播放按钮，去掉音量）。如果需要精细控制，得关掉 controls，用 JavaScript 手动监听 play、timeupdate 等事件，自己实现 UI。
例如，下面这段代码会让控制条消失，但视频仍可播放（靠 JS 控制）：
<video id="myVideo" src="demo.mp4"></video>
然后用 document.getElementById('myVideo').play() 触发——但这和 controls 是两条路，不能混用。
某些情况下 controls 不显示，可能是资源加载失败或 MIME 类型问题
即使写了 controls，控制条也可能空白或只显示一个“播放”按钮（尤其在 Chrome 中）。常见原因是：
- 视频路径 404 或跨域未配 CORS，
networkState为0（NETWORK_EMPTY），浏览器拒绝渲染完整控件 - 服务器返回的
Content-Type错误，比如把.mp4返回成text/plain，导致解析失败 - 使用了不支持的编码格式（如 H.265 在部分 Chrome 版本中无软解，
canPlayType()返回空字符串）
可用开发者工具的 Network 面板检查视频请求状态码和响应头，或在控制台运行 document.querySelector('video').error 查看是否为 null（无错）还是有具体错误对象。
真正麻烦的是那些看似正常却控件残缺的情况——往往卡在服务端配置或编码兼容性上，而不是 HTML 写法本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
