HTML5怎么检测视频是否正在播放_判断视频播放状态的代码技巧【方法】

最直接的播放状态判断是读取 paused 属性：false 表示正在播放（含缓冲中），true 表示暂停或未开始；但需结合 playing/pause 事件、readyState、networkState 及 Error 综合判断真实状态。

用 paused 属性判断视频是否在播放

html5 元素最直接的播放状态判断方式是读取 paused 属性：它为 false 表示正在播放（包括缓冲中但未暂停），true 表示已暂停或尚未开始播放。

注意：这个属性不区分“正在解码”“卡在首帧”或“网络卡顿”，只反映用户交互或脚本调用导致的暂停状态。比如调用 play() 后立刻读取，可能仍为 true（因异步加载未就绪）。

• 推荐在 play 和 pause 事件回调里读取，确保状态准确
• 不要依赖单次读取结果做关键逻辑，尤其在自动播放场景下
• paused 是只读属性，设为 false 不会触发播放

监听 playing 和 pause 事件来捕获状态变化

仅靠轮询 paused 容易漏掉瞬时状态切换。更健壮的做法是监听原生事件：playing 触发表示视频已真正开始呈现帧（跳过加载/解码等待），pause 触发表示用户或脚本主动暂停。

这两个事件比 play（只是发起播放请求）和 ended（仅结尾）更能反映真实播放意图。

立即学习“前端免费学习笔记（深入）”；

const video = document.querySelector('video'); video.addEventListener('playing', () => {   console.log('视频已开始播放（有画面输出）'); }); video.addEventListener('pause', () => {   console.log('视频已暂停'); });

结合 readyState 和 networkState 排查“假播放”

有时候 paused === false 但画面卡住不动，实际是网络中断或解码失败。这时要查 readyState（内容可播放程度）和 networkState（网络连接状态）：

• readyState === 0：尚未初始化（HAVE_NOTHING）
• readyState ：还没到“至少有一帧可播放”（HAVE_FUTURE_DATA）
• networkState === 0：网络断开（NETWORK_EMPTY）
• networkState === 3：网络出错（NETWORK_NO_SOURCE）

如果 paused === false 但 readyState ，说明视频名义上在播，实际没数据可渲染——这时候该显示 loading 或报错，而不是认为“一切正常”。

移动端自动播放限制下的特殊处理

ios safari 和 android chrome 对自动播放加了严格限制：没有用户手势触发的 play() 调用会静默失败，并抛出 NotAllowedError。此时 paused 仍为 true，但后续所有状态事件都不会触发。

必须用 try/catch 捕获错误，并降级处理：

video.play().catch(err => {   if (err.name === 'NotAllowedError') {     console.log('自动播放被阻止，请用户点击后重试');     // 显示播放按钮、提示文案等   } });

别忘了检查 video.error 是否为非空对象，它可能包含更具体的失败原因（如 MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED）。

真正难的不是写判断代码，而是理解浏览器什么时候“嘴上说在播，其实一帧都没画出来”。状态组合（paused + readyState + error + 事件流）缺一不可。