JavaScript操作音视频的核心是理解HTMLMediaElement基类及其事件、属性和方法；所有和元素均继承自它，90%需求由此解决。
JavaScript 操作音视频的核心不是靠“教程式记忆”，而是理解 HTMLMediaElement 这个基类，以及围绕它的事件、属性和方法。所有 和 元素都继承自它，90% 的日常需求靠它就能解决。
如何控制播放/暂停/跳转？用 play()、pause()、currentTime
这是最常触发的交互。注意：现代浏览器对自动播放（尤其是带声音的）有严格限制，play() 必须由用户手势（如 click）触发，否则会抛出 NotAllowedError。
-
element.play()返回 Promise，需处理失败情况：button.addEventListener('click', () => { video.play().catch(e => console.warn('播放被阻止:', e.name)); }); -
element.pause()无返回值，可随时调用 -
element.currentTime = 30直接跳到第 30 秒；读取时是浮点数（单位：秒），精度取决于媒体容器和浏览器 - 设置
currentTime后不会立即生效，要监听seeking（开始跳转）和seeked（跳转完成）事件
怎么监听加载和播放状态？关键事件有 canplay、loadeddata、timeupdate
别依赖 load 或 readyState === 4 来判断是否能播——它们太早或太晚。实际开发中这几个事件更可靠：
-
canplay：浏览器已获取足够数据，可以开始播放（但可能卡顿）。适合启用播放按钮 -
loadeddata：第一帧图像/音频已解码完成。适合做封面图隐藏、初始化进度条 -
timeupdate：播放位置变化时频繁触发（通常每 200–250ms 一次）。用来更新进度条 UI，但别在里面做重计算 - 错误监听必须加
error事件，video.error是MediaError对象，code字段告诉你具体问题（如MediaError.MEDIA_ERR_NETWORK）
volume、muted、playbackRate 怎么设才稳定？
这些属性看似简单，但受策略和硬件影响大：
立即学习“Java免费学习笔记（深入）”；
-
volume是 0–1 的浮点数，设为 0 等价于静音，但不如直接设muted = true可靠（尤其在 iOS 上） -
muted是布尔值，设为true会绕过大部分自动播放限制，且不触发volumechange事件 -
playbackRate默认是 1，可设为 0.5–2.0（部分浏览器支持更高，但非标准）。设完不一定立刻生效，需监听ratechange事件确认 - 某些设备（如 macOS Safari）会忽略
volume设置，只响应系统音量；此时muted是唯一可控入口
为什么 duration 初始是 NaN？怎么拿到真实时长？
duration 在元数据未加载完成前就是 NaN，不是 bug。它依赖 loadedmetadata 事件：
- 监听
loadedmetadata事件后读取duration，此时值才可信 - 直播流（如 HLS、DASH）的
duration可能一直是Infinity，因为没有终点 - 如果服务器没返回
Content-Length或没开启Accept-Ranges，duration可能无法解析，video.duration保持NaN，这时只能靠服务端提供时长或估算
真正难的不是调用哪个 API，而是判断当前状态是否允许你调用它——比如用户没点过页面、视频还没加载元数据、网络突然中断。把状态机理清楚，比背 API 更重要。
