JavaScript 中事件机制怎么监听音频视频播放状态-js教程-PHP中文网

javascript监听音视频播放状态需绑定原生事件而非轮询，关键事件包括play、pause、ended等；判断是否播放中应结合paused属性与readystate≥2；自动播放须由用户手势触发并处理promise。

javascript 中事件机制怎么监听音频视频播放状态

JavaScript 中监听音频视频播放状态，核心是通过 事件监听器 绑定到 <audio></audio> 或 <video></video> 元素上，响应其生命周期事件。关键不是轮询，而是利用浏览器原生触发的事件。

常用播放状态事件及含义

以下是最常用于判断播放状态的事件，每个都对应明确的用户行为或媒体内部变化：

play：用户主动调用 play() 或自动播放开始时触发（注意：自动播放需满足策略条件）
pause：调用 pause() 或用户点击暂停按钮时触发
ended：媒体自然播放完毕（到末尾）时触发
timeupdate：播放时间发生变化时频繁触发（可用于实时更新进度条或判断是否在播放中）
waiting：因缓冲不足暂时停止播放时触发
canplay：媒体已加载足够数据、可以开始播放（不保证能连续播放）
canplaythrough：媒体已加载足够数据、预计可 uninterrupted 播放到底
loadeddata：第一帧媒体数据已加载完成（对 video 尤其重要）

判断当前是否正在播放的实用方法

仅靠事件不够，有时需要实时判断状态。推荐结合 paused 属性和 readyState：

Java Maven Secondary Analysis

分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。

下载

audio.paused === false && audio.readyState >= 2 表示“正在播放”（readyState >= 2 意味着至少有第一帧可播放）
audio.ended === true 表示已播完（注意：它不会自动重置，需手动处理）
避免只用 paused：刚加载完但未播放时，paused 也是 true，不代表“暂停”，而是“尚未开始”

监听示例：基础状态响应与防重复绑定

实际使用时注意避免重复添加监听器（尤其在动态创建媒体元素时）：

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);
</p>