JavaScript如何操作音视频媒体元素？

JavaScript通过操作元素DOM接口控制音视频，核心是属性（paused、currentTime等）、方法（play()返回Promise）和事件（timeupdate、ended等），需注意加载状态与用户手势限制。

JavaScript 主要通过操作 <audio></audio> 和 <video></video> 元素的 DOM 接口来控制音视频播放、暂停、音量、时间、全屏等行为，核心是利用其内置的属性、方法和事件。

获取媒体元素并检查基础状态

先用 document.querySelector 或 getElementById 获取元素，再读取关键属性判断当前状态：

• paused：布尔值，true 表示已暂停（含未开始）
• ended：布尔值，true 表示已自然播放完毕
• currentTime：当前播放时间（秒），可读可写（跳转用）
• duration：总时长（秒），加载完成前为 NaN
• volume：音量（0.0–1.0），设为 0 即静音
• muted：布尔值，直接静音/取消静音（绕过 volume）

常用控制方法与注意事项

调用方法需注意浏览器策略和加载状态：

• play()：返回 Promise，失败时会 reject（如用户未交互就自动播放）
• pause()：无返回值，随时可调用
• load()：重载资源，常用于更换 src 后重新准备
• 设置 currentTime 前建议监听 loadedmetadata 事件，确保元数据就绪
• 移动端 Safari 和 Chrome 对自动播放限制严格，首次播放通常需用户手势触发

监听关键事件实现响应逻辑

绑定事件能及时响应播放过程变化：

标签： javascript java 浏览器 session safari canva