JavaScript控制音视频核心是操作audio/video元素API：通过play()/pause()控制启停，currentTime跳转，duration获取时长；用timeupdate事件同步进度条，input/change事件实现拖拽；volume/muted/playbackRate控制音量、静音和倍速；监听canplay、playing、ended、error等事件处理状态与错误。
用 JavaScript 控制音视频，核心是操作 <audio></audio> 和 <video></video> 元素的原生 API。自定义播放器就是隐藏默认控件，用 JS 绑定按钮、进度条、音量滑块等，再调用对应方法和监听事件来实现交互。
基础控制：播放、暂停、跳转
获取媒体元素后，直接调用方法即可：
-
play()和pause()控制启停（注意：自动播放受浏览器策略限制，通常需用户手势触发） -
currentTime = 秒数跳转到指定时间点（可读可写） -
duration获取总时长（加载完成后才有效，建议监听loadedmetadata事件）
进度条同步与拖拽
进度条本质是一个 <input type="range">，需要双向绑定：
- 播放中定时更新
value：用timeupdate事件（每 200–250ms 触发一次），计算当前进度百分比：range.value = (video.currentTime / video.duration) * 100 - 用户拖拽时跳转：监听
input或change事件，把滑块值换算回时间：video.currentTime = (range.value / 100) * video.duration
音量、静音与倍速控制
这些属性都支持直接读写：
立即学习“Java免费学习笔记（深入）”；
-
volume：取值 0–1（0 为静音），设为 0 同时会触发muted = true -
muted：布尔值，设为true强制静音（比volume=0更可靠） -
playbackRate：设置播放速度，如1.5表示 1.5 倍速，常见选项有 0.5、1、1.25、1.5、2
状态监听与错误处理
用户操作或网络问题可能影响播放，需监听关键事件：
-
canplay：媒体已加载足够数据，可以开始播放 -
playing：真正开始播放（区别于play()调用） -
pause：暂停时触发 -
ended：播放结束 -
error：发生错误（如资源 404、解码失败），可通过video.error.code判断类型（如MEDIA_ERR_NETWORK）
不复杂但容易忽略细节，比如 duration 初始为 NaN、移动端自动播放限制、timeupdate 频率不稳定等。把这些逻辑封装好，配合 CSS 样式，就能做出轻量又可控的自定义播放器。
