JavaScript控制音频与视频元素播放

JavaScript 与 HTML 中的 和 元素配合紧密。获取这些元素的引用后，播放、暂停、跳转、音量调节等常规操作即可实现。核心思路是调用元素实例自带的方法和属性。

控制前，先确认媒体元素已就绪

调用 play() 之前，建议确认元素已加载必要的元数据（如时长、尺寸），否则可能报错或行为异常。推荐做法是监听 loadedmetadata 事件，或检查 readyState 属性——当 video.readyState >= 2 时，表示已积累足够信息，可以开始播放。

• 获取元素：document.getElementById() 或 querySelector() 均可
• 检查状态：video.readyState >= 2 表示就绪
• 若未就绪，可监听 loadedmetadata 或 canplay 事件，等准备好再执行操作

基础播放控制：方法为核心

所有控制动作基于元素实例的方法。注意 play() 可能被浏览器自动播放策略拦截，因此最好由用户手势（如点击按钮）触发。

• play()：开始播放。返回 Promise，若被阻止（如自动播放被禁），需捕获异常做降级处理
• pause()：暂停
• load()：重新加载资源，相当于重置播放状态
• currentTime = 秒数：跳转到指定时间点（单位秒，支持小数）

状态与属性：实时读写播放信息

通过属性可实时获取或设置播放器状态，大部分属性可读可写（除特别标注的只读）：

• paused：布尔值，true 表示暂停（只读）
• duration：总时长（秒），加载完成前为 NaN
• currentTime：当前播放时间（秒），赋值即可实现拖拽跳转
• volume：音量，范围 0–1，设为 0 即静音
• muted：是否静音（布尔值），优先级高于 volume
• playbackRate：播放速率，支持 0.5、1、2 等，默认 1

事件监听：让交互更丰富

仅靠方法和属性不够，配合事件才能构建好用的播放器——例如自动续播、实时更新进度条、处理错误等。

• play / pause：播放或暂停时触发
• timeupdate：播放过程中频繁触发（约每 250ms 一次），适合更新进度显示
• ended：播放自然结束时触发，可在此实现循环播放或下一曲
• error：加载或解码失败时触发，通过 video.error.code 查看具体错误类型
• waiting / playing：反映缓冲状态与播放状态的切换，可显示加载提示

将这些方法、属性和事件组合，即可构建功能完整、体验流畅的音频/视频播放控制。从基础的“播放/暂停”到“进度拖拽”“音量调节”“播放速率切换”“错误处理”，每一步都有对应 API 支持。掌握这些，多媒体交互将不再局限于简单的“播放”按钮。