去掉controls属性后，用HTML+CSS+JS从零搭建控制区域，核心是接管播放状态、时间同步和用户操作全流程：隐藏默认控件，手动构建播放按钮、进度条、时间显示等UI；监听loadedmetadata获取时长，用timeupdate和input事件实现精准同步；通过isPlaying变量统一管理状态，适配PC/移动端事件，支持音量、静音、全屏等完整功能。
去掉controls属性，用HTML+CSS+JS从零搭建控制区域，核心是接管播放状态、时间同步和用户操作的完整流程。
隐藏默认控件并搭建基础结构
视频标签不加controls，保持干净：
<video id="myVideo" poster="thumb.jpg"><br> <source src="video.mp4" type="video/mp4"><br></video>
外层套一个容器便于样式隔离：<div class="video-player">...</div>
立即学习“前端免费学习笔记（深入）”；
在容器内手动添加按钮、滑块和时间显示，例如：
<button class="play-btn">▶</button><input type="range" class="seek-bar" min="0" max="100"><span class="time-current">00:00</span>/<span class="time-duration">00:00</span>
确保时间同步与进度条响应准确
视频时间和UI必须实时对齐，注意几个关键点：
- 监听
loadedmetadata后再读取video.duration，避免初始为NaN - 用
timeupdate更新进度条：seekBar.value = (video.currentTime / video.duration) * 100 - 拖动时绑定
input事件（不是change），实时跳转：video.currentTime = seekBar.value * video.duration / 100 - 时间显示统一格式化：
Math.floor(video.currentTime / 60)和Math.floor(video.currentTime % 60)，补零处理
统一管理播放状态与按钮反馈
别依赖video.paused判断，它在加载中或自动播放拦截时不准：
- 定义
let isPlaying = false变量，显式控制状态流转 - 点击播放按钮调用
video.play()，成功后设isPlaying = true，图标改为⏸️ - 监听
play、pause、ended事件，自动同步状态和UI，比如结束时重置进度条、切回▶️ - 调用
play()要加.catch()处理自动播放被拦截的情况
适配移动端与基础兼容性
PC和手机操作方式不同，不能只写mousedown：
- 进度条拖拽需同时监听
touchstart/touchmove/touchend和mousedown/mousemove/mouseup - 音量控制建议用
input type="range"，设min="0" max="1"，再映射到video.volume - 全屏用
video.requestFullscreen()，现代浏览器已无需前缀 - 静音按钮切换
video.muted，并同步更新图标（?/?）
