video元素controls属性为布尔型，必须移除才能禁用默认控件；自定义控制需手动绑定事件并调用play()/pause()；移动端播放须由用户手势触发，静音可绕过限制；currentTime跳转需确保缓冲到位，自定义进度条需节流并手动同步value。
video 元素的 controls 属性到底要不要加
加了 controls 就用浏览器默认控件，不加就得自己写按钮、监听 play/pause、手动调 play() 和 pause()。很多人以为“不加 controls 就能自定义”，结果点了没反应——因为没绑定事件，也没调方法。
- 默认控件在 Safari/iOS 上行为不一致，比如
volume按钮在 iOS 会静音锁定，无法通过 JS 解除 -
controls是布尔属性，写成controls="false"没用，必须彻底移除该属性才生效 - 如果只想隐藏默认控件但保留右键菜单（如“全屏”“下载”），可以加
controlslist="nodownload noremoteplayback"，但不能禁掉全屏按钮（Chrome/Firefox 不支持）
如何用 JS 正确触发播放（尤其移动端）
移动端浏览器普遍禁止自动播放有声视频，video.play() 必须由用户手势（click/tap）触发，否则抛 NotAllowedError。不是“等加载完再播”，而是“等用户点一下再播”。
- 别在
DOMContentLoaded或loadedmetadata里直接调play()，99% 失败 - 推荐模式：先放一个透明遮罩层或“点击播放”按钮，
onclick里调video.play().catch(e => console.warn("play failed:", e)) - 静音视频可绕过限制：
video.muted = true; video.play()在多数 Android 和新版 iOS 可行，但用户可能听不到声音
currentTime 拖动不准？和 preload、buffer 有关
currentTime 设值后视频没跳到目标位置，常见原因是资源还没加载到对应时间点，尤其当 preload="none" 或网络慢时。浏览器不会等缓冲完成再执行跳转，而是立即设置并尝试 seek。
- 检查
video.buffered：用video.buffered.end(0)看当前已缓存到哪，若小于目标时间，seeking事件会触发但实际卡住 - 监听
seeking和seeked：前者表示开始跳转，后者表示跳转完成；只监听timeupdate容易误判 - 想提高准确性，设
preload="metadata"（至少加载时长/尺寸），或提前用video.load()触发加载（但别滥用，会多发请求）
自定义进度条拖拽的三个硬伤
用 input[type="range"] 控制 currentTime 很常见，但直接绑定 change 或 input 事件容易出问题：拖拽中频繁设值、移动端响应延迟、跳转后进度条不同步。
立即学习“前端免费学习笔记（深入）”；
- 拖拽中别每毫秒都设
currentTime，用input事件 +requestAnimationFrame节流，或只在change（松手时）设一次 - 移动端 touch 事件坐标换算进度需注意：
event.touches[0].clientX要减去进度条左偏移，再除以宽度，别直接用offsetX（Safari 不支持） - 视频跳转后，进度条
value不会自动更新，必须手动同步：range.value = video.currentTime / video.duration，且要等duration有效（监听loadedmetadata）
最麻烦的其实是 iOS Safari 的 video 全屏策略：哪怕你写了 webkit-playsinline，某些版本仍强制跳原生全屏；而一旦进全屏，你的自定义控件就不可见了——这点常被忽略，直到上线才踩坑。
