onsuspend 是 audio/video 元素在浏览器中止媒体数据加载时触发的原生事件，常见于页面失焦、网络中断、资源错误或 load() 后立即 pause() 等场景，仅表示数据拉取链路断开，不表示用户暂停播放。
onsuspend 是什么，什么时候会触发
onsuspend 是 <audio></audio> 和 <video></video> 元素的原生事件，它在浏览器**中止媒体数据加载**时触发，不是用户主动暂停（那是 onpause），而是底层加载行为被中断。常见场景包括：
- 页面进入后台（标签页失焦），浏览器为节省资源主动挂起未播放的媒体加载
- 网络临时中断或超时，导致 fetch 流被终止
- 服务器返回 404、CORS 拒绝、MIME 类型不匹配等错误，加载流程提前退出
- 调用
load()后立即调用pause()或修改src，旧加载任务被丢弃
注意：onsuspend 不表示“播放已暂停”，也不等于“用户点了暂停按钮”。它只反映**数据拉取链路断开**这个事实。
怎么绑定 onsuspend —— 三种写法及其兼容性差异
绑定方式有 HTML 属性、onsuspend 属性赋值、addEventListener 三种，但行为和兼容性不同：
-
<video src="a.mp4" onsuspend="handleSuspend()"></video>：简单直接，但要求handleSuspend是全局函数；IE8+ 支持 -
video.onsuspend = function() { ... };：覆盖式赋值，后设会替换前设；所有现代浏览器支持 -
video.addEventListener('suspend', handler)：推荐，可多次绑定、便于移除；IE9+ 支持，IE8 及更早版本不支持
如果你需要兼容老 IE，优先用前两种；否则一律用 addEventListener，避免事件被意外覆盖。
onsuspend 里能做什么 —— 实用但有限的响应动作
onsuspend 是一个**只读信号**，它本身不能恢复加载、不能重试、不能修改 src。但它是个关键判断点，可用于：
- 记录日志：标记某次媒体加载因何中断（配合
onerror、onstalled对比分析） - 清理资源：比如已创建的
MediaSource实例、blob URL，防止内存泄漏 - 切换 UI 状态：隐藏 loading 动画、显示“加载中断”提示（但别自动重试——没网络时重试只会加重失败）
- 放弃依赖该媒体的后续逻辑：例如取消基于
duration的时间轴计算，因为元数据可能未加载完成
示例：
video.addEventListener('suspend', () => {
console.log('媒体加载被中止，当前状态:', video.networkState); // 可能是 NETWORK_NO_SOURCE 或 NETWORK_EMPTY
if (window.URL && video.src.startsWith('blob:')) {
window.URL.revokeObjectURL(video.src);
}
});
容易踩的坑：别把它当 onpause 用
最常犯的错误是把 onsuspend 当成播放控制事件来响应：
- 在
onsuspend里调用play()—— 大概率失败，因为此时上下文可能被挂起（AudioContext.state === 'suspended'），且用户未交互过，浏览器会拒绝自动播放 - 认为
onsuspend触发就代表视频“卡住了”——其实可能是正常节电行为（如标签页切走），用户切回来后会自动恢复加载 - 和
onstalled混用：后者表示加载卡住但尚未中止，前者是加载已被终止，两者触发条件和含义完全不同
真正要响应播放/暂停，用 onplay / onpause；要响应加载失败，优先看 onerror 和 onemptied；onsuspend 的价值，在于帮你识别“加载流程被浏览器接管并放弃”的那一刻——这个时刻往往意味着你该收手，而不是强行续上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
