Video标签无原生优雅降级能力，需通过HTML中按优先级声明多个<source>实现基础降级，再结合canPlayType()返回的"probably"/"maybe"/""置信度提示与JS动态处理增强兼容性。
Video 标签本身不提供“优雅降级”能力，canPlayType() 是用于探测浏览器对特定 MIME 类型的支持程度，它返回 "probably"、"maybe" 或空字符串，仅作参考。真正的优雅降级靠的是在 HTML 中按优先级顺序声明多个 <source>，并结合 JS 检测结果动态加载或提示。
理解 canPlayType 的返回值含义
canPlayType() 不是布尔判断，而是置信度提示：
-
"probably"：浏览器明确支持该类型+编码组合（如video/webm; codecs="vp9,opus"） -
"maybe"：MIME 类型合法，但无法确认是否支持具体编码 -
""（空字符串）：不支持该类型，或格式/编码组合被拒绝
注意：不同浏览器对同一字符串的返回可能不同；省略 codecs 参数（如只写 "video/webm"）通常返回 "maybe"，实际意义极低。
HTML 中声明多源并设置合理 fallback 顺序
将 WebM 放在首位，MP4（H.264+AAC）紧随其后，确保主流浏览器能按需选择：
立即学习“前端免费学习笔记（深入）”；
<video controls> <source src="video.webm" type='video/webm; codecs="vp9,opus"'> <source src="video.mp4" type='video/mp4; codecs="avc1.64001f,mp4a.40.2"'> 您的浏览器不支持视频播放。 </video>
浏览器会按顺序尝试 <source>，遇到第一个 canPlayType() !== "" 的就加载，无需 JS 干预——这是原生优雅降级的基础。
用 JavaScript 主动检测并补充行为
若需更精细控制（如统计不支持 WebM 的用户、显示提示、或动态替换 src），可这样操作：
const video = document.querySelector('video');
const webmSource = 'video.webm';
const mp4Source = 'video.mp4';
const testWebM = video.canPlayType('video/webm; codecs="vp9,opus"');
if (testWebM === 'probably') {
// 可直接使用 WebM
} else {
// 回退到 MP4，或触发加载逻辑
const mp4El = document.querySelector('source[type="video/mp4"]');
if (mp4El) {
video.src = mp4El.src;
video.load();
}
}
注意：不要仅依赖 canPlayType 就跳过 HTML 多源结构——它不能替代语义化 fallback，且部分环境（如 iOS Safari）可能返回不准。
兼容性要点与常见陷阱
WebM 支持已较成熟，但仍需注意：
- iOS Safari 直到 iOS 17.4 才开始支持 VP9 解码（此前仅支持 VP8），若用 VP9 编码，旧 iOS 设备会跳过 WebM 源
- 避免写
type="video/webm"（无 codecs）——多数现代浏览器返回"maybe"，无法触发可靠判断 - 服务端需正确配置 WebM 的 MIME 类型为
video/webm，否则即使浏览器支持，也可能因响应头错误而加载失败 - 如果使用自定义播放器，应在
loadedmetadata或canplay后再显示控件，避免空界面
