JavaScript如何操作视频_媒体API怎么控制播放

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() 同样需用户手势，且仅支持 元素（ 不行），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 头时会被浏览器静默限制，这类细节容易漏查。