使用 promise 处理媒体播放错误，核心做法是将媒体操作封装在 promise 中，利用 .catch() 捕获异步异常，或在 async/await 语法中使用 try...catch 块。这样可以将分散的 dom 事件监听逻辑集中管理，确保网络中断、解码失败或权限拒绝等错误能被统一拦截并处理。
如何将 HTMLMediaElement 的操作封装为 Promise
将媒体元素的方法调用包装在 Promise 构造函数中，通过监听 load、play、pause 和 error 事件来决议（resolve）或拒绝（reject）Promise。当媒体加载成功时调用 resolve，当发生错误时调用 reject 并传入错误对象。
function loadMedia(url) {
return new Promise((resolve, reject) => {
const video = document.createElement('video');
video.addEventListener('loadeddata', () => {
resolve(video);
});
video.addEventListener('error', (e) => {
reject(new Error(`Media load failed: ${e.message || 'Unknown error'}`));
});
video.src = url;
video.load();
});
}
上述代码创建了一个 loadMedia 函数，它接收一个 URL 字符串作为输入。函数内部创建一个临时的 元素，并绑定 loadeddata 事件以在数据加载完成后解析 Promise，同时绑定 error 事件以在出错时拒绝 Promise。调用该函数后，开发者可以链式调用 .then() 获取视频元素，或使用 await 等待结果。
如何在 async/await 结构中统一捕获播放错误
在 async 函数中调用封装好的媒体 Promise，并使用 try...catch 结构包裹调用过程。这样可以避免嵌套回调，使错误处理逻辑与正常流程分离。在 catch 块中，可以根据错误类型执行不同的恢复策略，如重试或提示用户。
async function playVideo(src) {
try {
const videoEl = await loadMedia(src);
videoEl.play().catch(err => console.error('Play failed:', err));
return videoEl;
} catch (error) {
console.warn('Failed to load media:', error.message);
// 执行降级逻辑，例如显示占位图
return null;
}
}
// 调用示例
playVideo('https://example.com/video.mp4').then(el => {
if (el) console.log('Video ready');
});
这段代码展示了 playVideo 函数的实现。它首先 await loadMedia 的结果，如果加载成功，则尝试播放并返回视频元素。如果加载过程中抛出异常（如网络错误或格式不支持），程序会跳转到 catch 块，记录警告日志并返回 null。这种结构清晰地分离了成功路径和错误路径，便于后续扩展错误处理逻辑。
如何处理 MediaError 中的具体错误码
HTMLMediaElement 的 error 属性是一个 MediaError 对象，包含 code 和 message 两个主要属性。错误码 1 表示用户中止，2 表示网络错误，3 表示解码错误，4 表示源不可用。在 catch 块中检查 error.code 可以针对性地处理不同场景，例如网络错误可触发重试，解码错误可提示格式不支持。
function handleMediaError(error) {
switch (error.code) {
case MediaError.MEDIA_ERR_ABORTED:
console.log('User aborted playback');
break;
case MediaError.MEDIA_ERR_NETWORK:
console.log('Network error occurred');
break;
case MediaError.MEDIA_ERR_DECODE:
console.log('Media decode error');
break;
case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
console.log('Source not supported');
break;
default:
console.log('Unknown error');
}
}
此代码片段定义了 handleMediaError 函数，用于解析 MediaError 对象。通过 switch 语句匹配 error.code，可以精确识别错误原因。在实际应用中，可以将此函数集成到 catch 块中，根据错误类型更新 UI 或执行特定的恢复操作。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
