JavaScript 控制音视频需依托 HTMLMediaElement 接口，必须等待元素加载完成（如监听 canplay）、在用户手势中调用 play()，跳转靠 currentTime + seeked 事件，状态监听用 timeupdate、pause、ended 等原生事件，并需处理浏览器策略与加载不确定性。
JavaScript 操作音视频不靠“教程”，靠 HTMLMediaElement 接口——它就是 <audio></audio> 和 <video></video> 元素的原生能力，所有基础控制（播放、暂停、跳转、静音）都直接调用 DOM 方法和属性，无需额外库。
怎么获取并控制 <video></video> 或 <audio></audio> 元素
必须等元素加载完成再操作，否则 play() 会失败或被浏览器静音策略拦截：
-
document.querySelector('video')获取元素后，不能立刻play()，需监听loadeddata或canplay事件 - 用户手势触发（如点击按钮）是调用
play()的硬性前提，自动播放只在静音状态下可能成功 - 移动端 Safari 对自动播放限制最严，
muted+autoplay是唯一可靠组合
play() 报错 “DOMException: play() failed because the user didn’t interact with the document first” 怎么办
这是浏览器主动阻止非用户触发的媒体播放，不是代码写错了：
- 确保
play()调用发生在 click/touchstart 等用户事件回调中，不能放在setTimeout或DOMContentLoaded里 - 如果要预加载，可设
preload="metadata"，但不要提前play() - 静音播放可绕过部分限制：
video.muted = true; video.play();，之后再尝试取消静音（但某些浏览器仍会拒绝）
怎样精确跳转到视频第 3.5 秒并开始播放
靠 currentTime 属性，但它不是立即生效的“设置即跳转”：
立即学习“Java免费学习笔记（深入）”；
-
video.currentTime = 3.5只是发起请求，实际跳转完成会触发seeked事件 - 若视频未加载足够数据，跳转会失败并抛出
seeking→seeked不触发，应监听error或检查video.seeking状态 - 建议配合
canplay使用：video.addEventListener('canplay', () => { video.currentTime = 3.5; });
怎样监听播放进度、暂停、结束等状态变化
别轮询，用原生事件。每个状态对应明确事件名，且行为可预测：
-
timeupdate：每 200–250ms 触发一次，video.currentTime已更新，适合进度条同步 -
pause/playing：分别在暂停和恢复播放时触发，注意playing不代表正在流畅播放（可能是刚从暂停恢复） -
ended：自然播完触发，但不会在loop=true时触发 -
volumechange：监听静音切换或音量滑动，video.muted和video.volume此时已更新
真正难的不是调用 API，而是处理浏览器策略差异、网络加载不确定性、以及用户交互时机——这些没法靠“学会 API”解决，得在每次 play() 前加 try/catch，每次跳转后等 seeked，每次监听前确认元素是否 readyState >= 2。
