加 controls 属性即可启用浏览器原生控制条；常见错误是误写为 controls="true"，正确写法是直接写 controls；若不显示，需检查资源路径、mime 类型、autoplay/muted 冲突、css 隐藏及元数据加载时机。
video 标签加 controls 属性是最直接的方案
浏览器原生支持播放控制条，不需要 JS 或额外库——只要在 <video></video> 标签里加上 controls 这个布尔属性就行。它会自动渲染播放/暂停、进度条、音量、全屏等 UI 元素。
常见错误是写成 controls="true" 或 controls="1"，其实只要存在该属性即可，推荐写法是：
<video src="demo.mp4" controls></video>。若用 JS 动态添加，应调用
videoElement.setAttribute('controls', '')，而不是赋值字符串 'true'。
为什么加了 controls 却没显示？检查这几点
最常被忽略的是资源加载失败或 MIME 类型不匹配，导致视频无法解析，浏览器会静默隐藏控制条。
-
src路径是否 404？打开浏览器开发者工具的 Network 面板确认 MP4 文件返回状态码是 200 - 服务器是否正确设置了
Content-Type？MP4 应为video/mp4，否则 Chrome/Firefox 可能拒绝加载并禁用 controls - 是否同时设置了
autoplay且未加muted？部分浏览器（如 Safari iOS）会因策略阻止自动播放有声视频，进而抑制 controls 渲染 - 父容器 CSS 是否意外隐藏了控件？比如
overflow: hidden切掉了底部控制栏，或width/height设为 0
自定义控制条时，controls 属性必须移除
一旦你用 JS 实现播放/暂停按钮、手动拖动进度条或音量滑块，就必须去掉 controls 属性，否则原生控件和自定义 UI 会冲突。此时需显式控制播放状态：
- 用
videoElement.play()和videoElement.pause()管理播放 - 监听
timeupdate事件更新自定义进度条位置，用videoElement.currentTime = x实现拖拽跳转 - 注意：Safari 对
play()的调用必须由用户手势触发（如 click），否则会抛出NotAllowedError
移动端兼容性差异值得特别注意
iOS Safari 默认不显示完整控制条（只显示播放按钮），即使加了 controls；Android Chrome 表现相对一致。若需强制显示，可加 playsinline 防止全屏跳转，并确保 webkit-playsinline 也存在：
<video src="demo.mp4" controls playsinline webkit-playsinline></video>
但要注意：iOS 10+ 已默认启用 playsinline，加了也无害；而老版本 Android WebView 可能完全忽略 controls，需降级为 JS 控制。
真正难处理的是“控制条在某些机型上闪一下就消失”，大概率是视频元数据未加载完成就渲染了控件——可以监听 loadedmetadata 事件后再设置 controls 属性，避免竞态。
