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，而应按优先级顺序尝试多个
关键点：
- 把最兼容的格式（如 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 是否推进，超时则提示“格式不兼容”。
