video标签添加controls布尔属性即可显示默认控件，无需赋值；控件不显示常见原因包括src缺失、preload="none"、CSS隐藏或Shadow DOM样式隔离；自定义控件需移除controls并用API手动实现；iOS Safari需playsinline、autoplay+muted或用户交互后控件才生效。
video 标签加 controls 属性就能显示默认控件
只要在 <video> 标签里写上 controls 这个布尔属性，浏览器就会自动渲染播放/暂停、进度条、音量、全屏等原生控件。不需要设值，也不需要写 controls="true" —— 写了反而可能被某些解析器当成字符串值处理。
常见错误：控件不显示的几个典型原因
即使写了 controls，控件仍不出现，大概率是下面这几个问题：
-
src属性缺失或路径错误，视频资源根本没加载成功（控制台会报MediaError或 404） - 用了
preload="none"且尚未触发播放，部分浏览器（如 Safari）在未加载元数据前会延迟渲染控件 - CSS 中对
video元素设置了display: none或visibility: hidden，控件随容器一起被隐藏 - 在 Web Components 或 Shadow DOM 中使用时，样式隔离导致控件区域不可见（需检查 shadow root 渲染是否完整）
想自定义控件？先关掉 controls 再手动实现
一旦加了 controls，你就无法用 JS 直接操作内部按钮（比如改播放按钮图标），因为这些控件是浏览器 UA 样式渲染的，不在 DOM 树中暴露为可选中节点。要自定义，必须：
- 去掉
controls属性 - 用
play()、pause()、currentTime、volume等 API 手动控制 - 监听
timeupdate、loadedmetadata、ended等事件同步状态 - 自己画一个进度条并绑定
input或change事件去设置currentTime
<video id="myVideo" src="demo.mp4"></video>
<button onclick="document.getElementById('myVideo').play()">播放</button>
<input type="range" min="0" max="100" value="0" id="progress">
移动端 Safari 的特殊限制
iOS 和 iPadOS 上的 Safari 默认会隐藏控件，除非满足以下任一条件：
立即学习“前端免费学习笔记（深入）”；
- 加了
playsinline属性（否则强制全屏） - 加了
autoplay+muted（但用户首次交互后才允许有声播放） - 用户已与页面发生过手势交互（如点击、触摸），之后再调用
load()或设置src并调用play()，控件才可能正常出现
单纯只写 controls 在 iOS 上经常“看起来没反应”，不是 bug，是策略性限制。
