video.play()必须由用户手势触发，否则报错；需用事件监听播放状态变化；currentTime跳转受关键帧限制；静音、全屏、画中画等API均有严格调用时机和兼容性要求。
video 元素的 play() 和 pause() 怎么用才不报错
直接调用 play() 报 DOMException: play() failed because the user didn't interact with the document first 是最常见问题。浏览器强制要求播放必须由用户手势（如 click、touchstart）触发，自动执行或在异步回调里调用会失败。
- ✅ 正确：在
button.addEventListener('click', () => video.play())里调用 - ❌ 错误：在
setTimeout(() => video.play(), 1000)或fetch().then(() => video.play())中调用 - ⚠️ 注意：
video.autoplay属性在多数桌面 Chrome/Firefox 中已失效，除非同时设置muted；移动端即使muted也常需用户点击后才可解禁音频轨道
怎么监听播放状态变化，比如“正在缓冲”或“播放完成”
靠轮询 video.readyState 或 video.paused 不可靠。应使用原生事件，但要注意各事件触发时机和兼容性差异：
-
loadeddata：首帧已加载，可渲染画面（但未必能播） -
canplay：至少一帧可播放，video.play()调用后通常会触发 -
canplaythrough：浏览器预估能连续播完（含缓冲），但实际受网络影响大，别依赖它做 UI 切换 -
waiting：开始缓冲（如网速跟不上），此时video.networkState === 3（NETWORK_LOADING） -
ended：自然播完（video.currentTime === video.duration），不是用户暂停
video.addEventListener('waiting', () => {
console.log('开始缓冲，可显示 loading 指示器');
});
video.addEventListener('ended', () => {
console.log('视频播完了，但注意：seek 后再播到末尾也会触发');
});
currentTime 跳转不准？为什么设了 12.5 秒却跳到 12.3 或 13.1
关键原因：视频编码是基于关键帧（I-frame）的，currentTime 实际会就近跳转到最近的关键帧位置，而非精确时间点。尤其在低码率、高 GOP（帧间隔）的视频中更明显。
- ✅ 可缓解：服务端用工具（如
ffmpeg -g 30）缩短 GOP 长度，增加关键帧密度 - ⚠️ 注意：
video.seeking为true表示正在跳转中，seeked事件才表示跳转完成 —— 不要用setTimeout猜测跳转结束 - ❌ 别依赖
video.currentTime的赋值结果做逻辑判断，它可能滞后或被修正。需要精确控制时，优先用MediaSource或 MSE 方案
静音、全屏、画中画这些控制为什么有时无效
这些 API 都有严格的上下文限制，不是加个属性就能生效：
立即学习“Java免费学习笔记（深入）”；
-
video.muted = true必须在play()前设置，且部分安卓 WebView 对动态 mute 不敏感 -
video.requestFullscreen()必须在用户手势回调内调用，且返回 Promise，需.catch(e => console.warn('全屏失败', e))捕获拒绝（比如页面被 iframe sandbox 隔离） -
video.requestPictureInPicture()同样需用户手势，且仅支持<video>元素（<audio>不行），iOS Safari 完全不支持 - ⚠️ 兼容性检查建议：用
'requestPictureInPicture' in video或document.fullscreenEnabled判断再调用
button.addEventListener('click', async () => {
try {
await video.requestPictureInPicture();
} catch (err) {
console.warn('画中画不可用：', err.name); // 可能是 'SecurityError' 或 'NotSupportedError'
}
});
有些行为（比如跨域视频的 video.duration 读取、video.webkitDecodedFrameCount）在非同源或未设置 CORS 头时会被浏览器静默限制，这类细节容易漏查。 
