HTML5怎么检测视频是否可播放_判断浏览器支持视频格式的技巧【指南】

canPlayType() 是检测浏览器视频格式支持最直接轻量的方法，返回 “probably”、”maybe” 或空字符串，需结合 loadedmetadata、canplay、Error 事件及 fallback 才可靠。

用 canPlayType() 判断浏览器是否支持某视频格式

html5 的 元素提供 canPlayType() 方法，是检测格式支持最直接、最轻量的方式。它不加载资源，只查 MIME 类型注册表和解码器能力。

注意：返回值只有三种："probably"、"maybe"、""（空字符串），没有布尔值。空字符串 = 明确不支持；"maybe" 不代表能播，只是“无法确定”，实际播放时仍可能失败。

• video.canPlayType("video/mp4; codecs='avc1.42E01E, mp4a.40.2'") —— 检查 H.264 + AAC 组合（最兼容）
• video.canPlayType("video/webm; codecs='vp9, opus'") —— 检查 VP9 + Opus（chrome/firefox 支持好，safari 旧版不支持）
• video.canPlayType("video/ogg; codecs='theora, vorbis'") —— 已基本淘汰，仅作兼容参考

为什么 canPlayType() 返回 "maybe" 却播不了？

因为该方法只检查容器和编码器声明是否被识别，不验证硬件解码能力、DRM 状态、或是否启用了对应功能（如 Safari 对 HEVC 的限制）。尤其在移动端或企业环境，即使返回 "probably"，也可能因缺少硬件加速或策略拦截而卡在 stalled 或 error 状态。

真正可靠的判断必须结合事件监听：

立即学习“前端免费学习笔记（深入）”；

• 监听 loadedmetadata：说明元数据已解析，时长、尺寸可用
• 监听 canplay：说明至少一帧可渲染，但未必流畅
• 监听 error 事件，捕获 video.error.code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED

自动 fallback 到备用格式的实用写法

不要只靠 canPlayType() 决定 src，而应按优先级顺序尝试多个 ，让浏览器自己选择。这是 html5 规范推荐做法，也规避了 js 判断的局限性。

关键点：

• 把最兼容的格式（如 MP4/H.264）放在最前面
• 每个 必须带 type 属性，否则浏览器可能跳过检测
• 避免在 JS 中手动设置 src 后再调 load()，这会打断原生 fallback 流程

移动端 Safari 和 ios 的特殊限制

iOS Safari 对自动播放、后台音频、HEVC 解码等有强策略控制。即使 canPlayType() 返回 "probably"，也可能：

• 拒绝播放未用户手势触发的视频（autoplay 失效）
• 对 HEVC（hvc1）格式返回 ""，除非设备为 iphone 8+ 且系统 ≥ iOS 11，且用户未关闭“高效编码”设置
• 在低电量模式下禁用部分解码器，导致 canplay 触发但画面黑屏

真实项目中，建议对 iOS 用户默认降级到 H.264，并用 navigator.userAgent 粗略识别后加额外兜底逻辑，比如监听 timeupdate 是否推进，超时则提示“格式不兼容”。