javascript监听音视频事件核心是为audio/video元素绑定原生事件，如loadedmetadata（获取可靠duration）、timeupdate（更新进度条）、ended（自然结束）、error（捕获code/message）等，需注意异步状态、promise拒绝处理及移动端自动播放限制。
JavaScript 中监听音频与视频播放器的媒体事件，核心是为 <audio></audio> 或 <video></video> 元素绑定原生事件监听器。这些事件覆盖了加载、播放、暂停、时间更新、错误等关键生命周期阶段，合理使用能实现进度控制、自动续播、错误降级、用户行为分析等功能。
常用媒体事件及触发时机
以下是最常监听的事件及其典型用途：
- loadstart：资源开始加载（尚未确定是否成功）
-
loadedmetadata：元数据加载完成（可获取时长
duration、尺寸、轨道信息） - canplay：至少有一帧可播放（缓冲足够解码首帧）
- canplaythrough：预计无需中断即可播放到结束（依赖网络和缓冲策略，不一定 100% 准确）
-
play：播放开始（包括自动播放、用户点击、脚本调用
play()） - pause：播放被暂停
- timeupdate：当前播放时间变化（约每 250ms 触发一次，适合更新进度条）
-
ended：自然播放完毕（
currentTime === duration且无循环） -
error：加载或解码出错（需检查
error.code和error.message） - waiting：因缓冲不足暂停等待（如网速慢）
-
playing：从暂停/等待恢复播放（区别于
play，表示已实际开始渲染）
基础监听写法（推荐使用 addEventListener）
避免内联 HTML 事件（如 onplay="..."），统一用 JavaScript 绑定更清晰可控：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const media = document.querySelector('video#myVideo');
<p>media.addEventListener('loadedmetadata', () => {
console.log('时长:', media.duration); // 此时 duration 可靠
});</p><p>media.addEventListener('timeupdate', () => {
const progress = (media.currentTime / media.duration) * 100;
document.getElementById('progress').style.width = <code>${progress}%</code>;
});</p><p>media.addEventListener('error', (e) => {
console.error('媒体加载失败:', media.error?.code, media.error?.message);
// 可切换备用源、显示提示、上报日志等
});
</p>
注意异步加载与状态判断
媒体元素的状态是异步演进的，不能假设事件按固定顺序触发。例如：
-
duration在loadedmetadata前可能为NaN，直接读取会出错 -
play()返回 Promise，需await或处理拒绝（尤其移动端自动播放受限时） - 用户可能拖动进度条，导致
timeupdate和seeking/seeked一起发生
建议在关键逻辑中加状态校验：
media.addEventListener('timeupdate', () => {
if (isFinite(media.duration) && media.duration > 0) {
updateProgressBar();
}
});
实用技巧与避坑点
-
避免重复绑定：动态创建/替换媒体元素时，记得先
removeEventListener或使用一次性监听（{ once: true }） -
移动端自动播放限制：多数浏览器要求用户手势触发首次
play()；监听play的拒绝 Promise 可捕获失败 -
静音自动播放：带
muted属性的视频在部分平台可自动播放，但仍建议监听play和error做兜底 -
跨域资源：若音视频来自其他域名，需服务端设置
CORS头（如Access-Control-Allow-Origin），否则loadedmetadata等事件可能不触发
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
