如何借助 JavaScript 控制音频与视频元素播放

JavaScript可通过获取audio/video元素引用并调用其方法属性实现播放控制；需监听loadedmetadata或检查readyState≥2确保就绪；play()、pause()、currentTime等方法和paused、duration、volume等属性支持交互；配合timeupdate、ended等事件可增强体验。

javascript 可以直接操作 html 的 <audio> 和 <video> 元素，实现播放、暂停、跳转、音量调节等控制。核心是获取元素引用后调用其内置方法和属性。

获取媒体元素并检查是否就绪

在调用播放方法前，需确保元素已加载元数据（如时长、尺寸），避免报错。推荐监听 loadedmetadata 事件，或使用 readyState 判断：

• 通过 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

监听关键事件提升交互体验

结合事件监听，可响应播放生命周期变化，例如自动续播、更新进度条、处理错误：

立即学习“Java免费学习笔记（深入）”；

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