JavaScript监听音视频播放状态需绑定原生事件而非轮询，关键事件包括play、pause、ended等；判断是否播放中应结合paused属性与readyState≥2；自动播放须由用户手势触发并处理Promise。
JavaScript 中监听音频视频播放状态，核心是通过 事件监听器 绑定到 <audio> 或 <video> 元素上，响应其生命周期事件。关键不是轮询，而是利用浏览器原生触发的事件。
常用播放状态事件及含义
以下是最常用于判断播放状态的事件，每个都对应明确的用户行为或媒体内部变化：
-
play：用户主动调用
play()或自动播放开始时触发（注意：自动播放需满足策略条件） -
pause：调用
pause()或用户点击暂停按钮时触发 - ended：媒体自然播放完毕（到末尾）时触发
- timeupdate：播放时间发生变化时频繁触发（可用于实时更新进度条或判断是否在播放中）
- waiting：因缓冲不足暂时停止播放时触发
- canplay：媒体已加载足够数据、可以开始播放（不保证能连续播放）
- canplaythrough：媒体已加载足够数据、预计可 uninterrupted 播放到底
- loadeddata：第一帧媒体数据已加载完成（对 video 尤其重要）
判断当前是否正在播放的实用方法
仅靠事件不够，有时需要实时判断状态。推荐结合 paused 属性和 readyState：
-
audio.paused === false && audio.readyState >= 2表示“正在播放”（readyState >= 2意味着至少有第一帧可播放） -
audio.ended === true表示已播完（注意：它不会自动重置，需手动处理） - 避免只用
paused：刚加载完但未播放时，paused也是true，不代表“暂停”，而是“尚未开始”
监听示例：基础状态响应与防重复绑定
实际使用时注意避免重复添加监听器（尤其在动态创建媒体元素时）：
立即学习“Java免费学习笔记（深入）”；
const media = document.querySelector('audio, video');
<p>// 推荐：用函数引用便于移除
function handlePlay() {
console.log('开始播放');
}
function handlePause() {
console.log('已暂停');
}
function handleEnded() {
console.log('播放结束');
}</p><p>media.addEventListener('play', handlePlay);
media.addEventListener('pause', handlePause);
media.addEventListener('ended', handleEnded);</p><p>// 如需清理（例如组件卸载时）
// media.removeEventListener('play', handlePlay);
处理自动播放限制与用户交互后状态同步
现代浏览器限制自动播放（尤其含声音的 media），首次播放必须由用户手势触发。因此：
- 不要依赖
autoplay属性来确保播放；优先用按钮触发play() - 调用
play()后应监听then（返回 Promise）和catch，捕获拒绝错误（如被策略阻止） - 示例：
media.play().then(() => { /* 成功 */ }).catch(e => { /* 被阻止，提示用户点击 */ }) - 用户交互后，
media.paused和media.currentTime可安全读取，用于状态同步
