不能直接用video默认控件，因其样式、布局、快捷键、拖动反馈均被封装且浏览器行为不一致；必须移除controls属性，用JavaScript接管play()/pause()、currentTime等API，并通过事件监听实现自定义交互与可访问性。
为什么不能直接用 <video> 的默认控件
浏览器自带的 controls 属性太难定制：按钮样式、布局、快捷键响应、进度条拖动反馈全被封装死了，连改个播放按钮图标都要靠伪元素 hack，而且在 Safari 和 Firefox 上行为不一致。真要加弹幕、倍速浮层、AI 字幕开关，必须自己接管 UI。
用 controls=false 后怎么监听和控制播放状态
关掉原生控件只是第一步，关键得把播放器的底层能力暴露出来——play()、pause()、currentTime、volume、paused 这些属性和方法才是你的操作柄。
-
videoElement.addEventListener('timeupdate', () => { /* 更新进度条 width */ })是实时同步进度的唯一可靠方式，别依赖setInterval - 拖动进度条时，先
videoElement.currentTime = newTime，再手动触发一次videoElement.play()（尤其在 iOS 上，暂停中设时间后不显式 play 可能卡住） - 音量控制要同时处理
volume属性和muted状态，二者独立；静音按钮点击应优先切muted，而不是只设volume=0
自定义进度条拖动为什么总跳不准
核心问题是把鼠标位置直接当时间算，忽略了视频时长、容器缩放、设备像素比、以及 clientX 相对于进度条左边缘的真实偏移。正确做法是绑定 mousedown → mousemove 事件链，并用 getBoundingClientRect() 动态算基准。
const bar = document.querySelector('.progress-bar');
const rect = bar.getBoundingClientRect();
const percent = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
video.currentTime = percent * video.duration;还要注意：移动端需监听 touchstart/touchmove，且 e.touches[0] 才是有效坐标；Firefox 对 input[type="range"] 的拖动事件支持不稳定，别依赖它。
立即学习“前端免费学习笔记（深入）”；
如何让自定义按钮在不同设备上都可访问
视觉上好看没用，键盘用户按 Tab 切不到播放按钮、屏幕阅读器读不出“静音”含义，等于功能残缺。必须补全基础语义和交互反馈。
- 所有按钮加
tabindex="0"并监听keydown，响应Enter和Space - 用
aria-label而不是仅靠 title 或纯 icon，例如<button aria-label="切换播放暂停"></button> - 播放状态变化时，动态更新
aria-pressed（对 toggle 按钮）或aria-hidden（隐藏已禁用控件） - 进度条要用
<input type="range">并配aria-valuenow/aria-valuemin/aria-valuemax，否则 VoiceOver 无法读出当前进度
最常被忽略的是：自定义控件不继承 <video> 的原生焦点管理逻辑，比如点击视频区域默认聚焦播放器，你得手动 video.focus() 并监听 blur 做清理。
