HTML5视频播放异常诊断依赖video.error、readyState、canPlayType()、networkState等API实时反馈状态。video.error返回MediaError对象标识错误类型；readyState配合loadedmetadata事件判断元数据解析是否成功；canPlayType()预判格式兼容性；networkState结合fetch探测真实网络与MIME问题。
HTML5 视频播放异常诊断不靠“猜”，而靠几个关键 API 接口实时反馈状态。这些接口不是用来“播放”的，而是告诉你“为什么播不了”“卡在哪一步”“错在哪儿”。掌握它们，比反复刷新页面或换浏览器更有效。
video.error 与 error 事件
这是定位播放失败根源的第一入口。只要 <video></video> 触发了加载或解码错误，video.error 就会返回一个 MediaError 对象，其 code 属性明确标识错误类型：
- MEDIA_ERR_ABORTED (1)：用户主动中断（如快速切换清晰度），无需重试
- MEDIA_ERR_NETWORK (2)：网络不可达或请求被拒，可探测后有限重试
- MEDIA_ERR_DECODE (3)：文件损坏或编码异常，应降级源或提示刷新
-
MEDIA_ERR_SRC_NOT_SUPPORTED (4)：格式不支持，需切换
<source></source>或转码
绑定方式简单：video.addEventListener('error', () => console.log(video.error))。注意：该事件只在错误发生时触发一次，需确保监听器在 src 设置前就位。
video.readyState 与 loadedmetadata
readyState 表示媒体资源的当前就绪程度（0～4），配合 loadedmetadata 事件可判断是否成功解析元数据：
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
readyState === 0：尚未初始化，src可能为空或无效 -
readyState === 1：已获取元数据（宽高、时长等），但未加载帧数据 -
readyState === 2：至少一帧视频已缓冲，可调用play() - 若长时间停留在 0 或 1，说明
src路径不对、MIME 错误或 CORS 拦截
建议在 loadedmetadata 中检查 video.videoWidth 和 video.duration 是否为合法数值，避免“静音黑屏却无报错”的假成功。
video.canPlayType() 与实际解码能力
这个方法不发起真实加载，仅预判浏览器能否解码指定格式，是前端做格式兜底的依据：
-
video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')返回"probably"表示高概率支持 - 返回空字符串
""表示完全不支持该编码组合（如 H.265 在 Chrome Windows 版） - 务必传入完整 codec 字符串，仅写
video/mp4无法反映真实兼容性
实践中，应按优先级顺序尝试多个 <source></source>，并用 canPlayType() 预筛选，而非依赖浏览器自动 fallback。
networkState 与 fetch 探测辅助
video.networkState 提供底层连接状态（0=空闲，1=正在加载，2=加载完成，3=加载失败），但它不暴露 HTTP 状态码。要确认资源是否真能访问，需配合 fetch() 主动探测：
- 当
video.error.code === MEDIA_ERR_NETWORK时，用fetch(src, { method: 'HEAD' })快速验证 URL 可达性 - 响应状态码为 404/403，说明路径或权限问题，重试无意义
- 响应头中缺失
Content-Type: video/mp4，则问题出在服务器配置，非前端代码
这一组合能区分“连不上”和“接上了但看不懂”，避免把 MIME 配置错误当成网络故障来处理。
