HTMLMediaElement是音视频操作核心接口，提供播放控制、状态监听等能力；需监听loadedmetadata等事件后再操作；自动播放需用户手势触发且不可延迟；MediaRecorder仅支持录制getUserMedia或captureStream获取的流。
HTMLMediaElement 是操作音视频的核心接口
所有 <audio> 和 <video> 元素都继承自 HTMLMediaElement，它提供了播放控制、状态监听、元数据读取等基础能力。直接操作 DOM 元素就能调用这些方法，不需要额外库。
常见误操作：在元素未加载完成时就调用 play() 或读取 duration，会返回 NaN 或触发 NotAllowedError。应监听 loadedmetadata 或 canplay 事件后再执行依赖媒体信息的操作。
-
play()/pause()：触发播放/暂停，返回 Promise（失败时 reject） -
load()：重载资源，清空当前缓冲和播放位置 -
currentTime：读写当前播放时间（秒），设值可能触发seeking→seeked -
volume、muted、loop、autoplay：可直接赋值的属性（注意autoplay在多数浏览器中受策略限制）
如何可靠地自动播放带声音的视频
现代浏览器禁止无用户交互触发的有声自动播放。绕过的关键是：首次用户手势（如 click、touchstart）后，再调用 play()，且不能跨事件循环延迟（比如不能包在 setTimeout(..., 0) 里）。
典型失败场景：
立即学习“Java免费学习笔记（深入）”；
- 页面 onload 后立即
video.play()→NotAllowedError - 在
setTimeout或Promise.resolve().then()中调用 → 失去“用户激活上下文” - 用
video.muted = true后再play()→ 大部分浏览器允许（静音即豁免）
推荐做法：绑定一次用户点击，内部调用 play() 并移除监听；或默认静音，后续再根据需要取消静音。
获取音视频元数据和实时状态
元数据（如分辨率、时长、码率）需等待加载。关键事件和属性如下：
-
loadedmetadata：元数据已加载（duration、videoWidth、videoHeight可读） -
loadeddata：首帧已解码（可安全 drawImage 到 canvas） -
timeupdate：播放过程中频繁触发（约每 250ms），适合更新进度条 -
ended：自然播放结束（注意：不会触发于loop=true） -
error：加载或解码失败，检查video.error.code（如MediaError.MEDIA_ERR_NETWORK）
networkState 和 readyState 可判断当前加载阶段：readyState === 4 表示可随时播放（HAVE_ENOUGH_DATA）。
用 MediaRecorder 录制用户媒体流
录制页面内播放的音视频不被原生支持；MediaRecorder 只能录制来自 getUserMedia() 或 canvas.captureStream() 的流。若要录下 <video> 内容，需先用 captureStream() 提取其轨道：
const video = document.querySelector('video');
const stream = video.captureStream(); // 注意：仅在播放中有效
const mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = e => {
const blob = e.data;
const url = URL.createObjectURL(blob);
// 可创建 <a download> 下载，或上传到服务器
};
mediaRecorder.start();
限制点：
-
captureStream()在 Safari 中不支持<video>（仅支持<canvas>） -
MediaRecorder输出格式依赖浏览器（Chrome 常为 webm，Safari 为 mp4） - 无法录制被 CORS 阻止的跨域视频（会抛出
SecurityError）
真正难的是跨浏览器一致录制——没有银弹，得按目标环境做降级或转封装处理。
