HTMLMediaElement 提供音频视频基础控制，需监听 loadedmetadata 后操作；play() 返回 Promise 必须捕获错误；currentTime 跳转应等待 seeked 事件；volume 与 muted 独立且移动端限制多；playing 事件才是播放真正开始的可靠信号。
如何用 HTMLMediaElement 控制音频和视频播放
浏览器原生的 和 元素都继承自 HTMLMediaElement，所有基础控制（播放、暂停、音量、时间跳转等）都通过它提供。不需要额外库，直接操作 DOM 元素即可。
常见错误是试图在元素未加载元数据时调用 play() 或读取 duration，导致 NaN 或 Promise rejected。
- 确保监听
loadedmetadata事件后再读取duration、readyState - 自动播放受策略限制：无用户交互时调用
play()很可能被静音或拒绝，需捕获Promise拒绝 -
play()返回 Promise，必须.catch(e => console.warn("play failed:", e))，否则静默失败
currentTime 跳转和 seeking 事件要注意什么
currentTime 是可读写的属性，但设置后不会立即生效——浏览器需要缓冲对应位置的数据。跳转过程中会触发 seeking（开始跳转）和 seeked（跳转完成），但这两个事件不保证帧精度，尤其在低带宽或未预加载时。
- 设置前检查
readyState >= HTMLMediaElement.HAVE_METADATA，否则跳转会失败 - 跳转后立即读
currentTime可能仍为旧值，应等待seeked事件 - HLS 或 MSE 流媒体中，
currentTime跳转可能受限于分片边界，无法精确到毫秒
const video = document.querySelector('video');
video.addEventListener('seeked', () => {
console.log('实际跳转到:', video.currentTime.toFixed(2));
});
video.currentTime = 120; // 跳到第 2 分钟
音量、静音和 muted 的区别与兼容性
volume 是 0.0–1.0 的浮点数，muted 是布尔值。两者独立：设 muted = true 会覆盖 volume，但改 volume 不会影响 muted 状态。
- 移动端 Safari 强制忽略
volume设置，只响应系统音量键；muted可控，但首次播放必须由用户手势触发 -
muted改变会触发volumechange事件，volume改变也会触发，需统一处理 - 部分安卓 WebView 中，
muted = false后不自动恢复音量，需手动设回原volume
如何检测播放是否真正开始（而非被策略拦截）
仅靠 play() 调用成功不代表声音已输出。真正可靠的信号是 playing 事件（进入播放状态）或 timeupdate 开始频繁触发。
-
canplay表示至少一帧可播，但可能卡顿；playing才表示已解码并开始渲染 - 不要依赖
paused === false判断——有些情况（如后台标签页）会暂停但paused仍为false - 结合
video.playbackRate检查是否被降速（如 iOS 后台自动设为 0）
video.addEventListener('playing', () => {
console.log('播放器已真正出声');
});
video.addEventListener('pause', () => {
console.log('被暂停 —— 可能因失去焦点或策略限制');
});
很多问题出在「假设浏览器行为一致」上。iOS 对自动播放、音量、后台播放的限制最严；安卓碎片化严重；桌面 Chrome 有独立的媒体策略开关。真实项目里，得把每个控制操作都当作可能失败的异步操作来处理。 
