JavaScript通过HTMLMediaElement接口直接控制音视频，核心是调用方法（play/pause/load/canPlayType）、读写属性（currentTime/volume/muted/paused/duration/readyState）及监听事件（play/pause/timeupdate/ended/loadedmetadata/canplay/error），并需处理Promise、静音策略与移动端兼容性。
JavaScript 通过浏览器原生的 HTMLMediaElement 接口（即 和 元素）提供完整的音视频控制能力，无需额外库。核心是调用元素实例的方法、监听事件、读写属性。
常用控制方法（直接操作 media 元素）
假设你有 ：
-
play()：开始播放；可能被浏览器策略阻止（如无用户手势触发时自动播放带声音的视频） -
pause()：暂停播放 -
load()：重新加载媒体资源（重置播放状态、清空缓冲） -
canPlayType(type)：检查浏览器是否支持某 MIME 类型（如"video/mp4"），返回"probably"、"maybe"或空字符串
关键可读写属性（实时获取或设置）
这些属性反映当前状态，也可用于控制：
-
currentTime：当前播放时间（秒），可读可写（拖拽进度条本质就是赋值） -
volume：音量（0.0–1.0），设为 0 即静音 -
muted：布尔值，强制静音（比设volume=0更可靠，尤其对自动播放策略） -
paused：只读，判断是否处于暂停状态 -
duration：媒体总时长（秒），加载元数据后才有效（监听loadedmetadata事件） -
readyState：当前就绪状态（0–4），常用来判断能否播放（如>= 2表示已有足够数据可播放）
必须掌握的核心事件
响应用户操作和媒体状态变化：
立即学习“Java免费学习笔记（深入）”；
-
play/pause：播放或暂停时触发 -
timeupdate：播放时间变化时高频触发（适合更新进度条显示） -
ended：播放自然结束时触发 -
loadedmetadata：元数据（尺寸、时长等）加载完成 -
canplay/canplaythrough：表示可开始播放 / 可连续播放不卡顿 -
error：加载或播放出错（需检查error.code）
实用小技巧
让控制更健壮、更符合现代浏览器行为：
- 自动播放失败很常见，优先用
muted=true+play()，再监听playing事件后取消静音 - 调用
play()后应 始终处理 Promise 返回值（现代浏览器返回 Promise），失败时捕获并提示用户手动点击播放 - 移动端 iOS Safari 对
autoplay、play()限制极严，务必依赖用户手势（如 click/tap）触发 - 用
getVideoPlaybackQuality()（仅 video）可获取丢帧、解码性能等信息（调试用）
基本上就这些。Media API 不复杂但容易忽略细节，比如 Promise 处理、静音策略、移动端兼容性。把元素引用拿到手，方法和属性按需调用，事件对上号，就能稳稳控住音视频。
