直接用HTML5的<audio>或<video>标签可搭建基础播放器，但需移除controls属性隐藏原生控件，再用HTML/CSS构建自定义UI（如播放按钮、进度条、音量滑块等），并通过JavaScript绑定play/pause、timeupdate、volume、fullscreen等交互逻辑，并处理加载状态、时间格式化及移动端适配等细节。
直接用 HTML5 的 <audio> 或 <video> 标签就能搭建基础播放器，但要实现自定义控制界面，关键在于隐藏原生控件、用 HTML/CSS 构建 UI，并通过 JavaScript 绑定交互逻辑。
移除默认控件，启用自定义接管
浏览器自带的 controls 属性会渲染一套固定样式控件，想完全自主设计，第一步就是去掉它：
-
<audio id="player"><source src="song.mp3" type="audio/mpeg"></audio>—— 不加controls，原生控件就不会出现 -
<video id="player" poster="thumb.jpg"><source src="clip.mp4" type="video/mp4"></video>—— 同样不写controls，视频区域干净无干扰 - 此时元素仍可被 JavaScript 控制，只是视觉上“隐身”了
构建可操作的自定义 UI 结构
用 div 包裹按钮、滑块和时间显示，结构清晰便于后续绑定事件：
- 播放/暂停按钮：
<button id="playBtn">▶</button> - 进度条：
<input type="range" id="progress" min="0" max="100" value="0">（配合 JS 动态映射 currentTime/duration） - 音量控制：
<input type="range" id="volume" min="0" max="1" step="0.01" value="1"> - 当前时间与总时长显示：
<span id="currentTime">0:00</span> / <span id="duration">0:00</span> - 全屏按钮（仅 video）：
<button id="fullscreenBtn">⛶</button>
用 JavaScript 实现核心交互逻辑
监听用户操作，调用媒体元素 API 并响应状态变化：
立即学习“前端免费学习笔记（深入）”；
- 点击播放按钮 → 调用
player.play()；暂停则调用player.pause() - 监听
timeupdate事件，实时更新进度条值和时间显示（注意：duration 初始为 NaN，需等loadedmetadata触发后再读取） - 拖动进度条 → 计算目标时间点，赋值给
player.currentTime - 调节音量 → 直接设置
player.volume = slider.value - 全屏切换（video）→ 调用
player.requestFullscreen()或退出全屏方法
补充细节提升体验
几个容易忽略但影响使用感的关键点：
- 进度条拖拽时暂停播放，松手再恢复，避免跳转过程中音频/视频继续前进
- 时间显示统一格式化为
mm:ss，例如Math.floor(seconds / 60) + ':' + (seconds % 60).toString().padStart(2, '0') - 加载中显示 loading 状态（监听
waiting和canplay事件） - 移动端需处理 touchstart/touchmove 代替 click/mousemove，保证滑块响应灵敏
- 音量按钮可做成图标切换（静音/低音/高音），配合
player.muted属性控制
