JavaScript通过操作<audio><video>元素DOM接口控制音视频，核心是属性（paused、currentTime等）、方法（play()返回Promise）和事件（timeupdate、ended等），需注意加载状态与用户手势限制。
JavaScript 主要通过操作 <audio> 和 <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 对自动播放限制严格，首次播放通常需用户手势触发
监听关键事件实现响应逻辑
绑定事件能及时响应播放过程变化：
立即学习“Java免费学习笔记（深入）”；
-
play：开始播放（包括恢复暂停） -
pause：明确被暂停 -
timeupdate：播放中高频触发（约每 250ms），适合更新进度条 -
ended：播放自然结束 -
error：加载或解码失败（检查error.code和error.message） -
canplay或canplaythrough：表示可开始播放或可连续播放
进阶控制：画布绘制、音轨切换与全屏
部分能力需配合其他 API 使用：
- 用
requestVideoFrameCallback或canvas.getContext('2d').drawImage(video, ...)实时抓帧 - 通过
video.videoTracks和audio.audioTracks列表切换音视频轨道 - 调用
element.requestFullscreen()进入全屏（需用户手势触发） - 使用
MediaSessionAPI 设置播放信息、控制通知栏媒体按钮（需 HTTPS）
基本上就这些。掌握属性读写、Promise 化的 play、关键事件时机，就能覆盖大多数音视频交互需求。
