如何通过HTML5中Video标签的CanPlayType接口实现WebM格式的优雅降级-H5教程-PHP中文网

video标签无原生优雅降级能力，需通过html中按优先级声明多个实现基础降级，再结合canplaytype()返回的"probably"/"maybe"/""置信度提示与js动态处理增强兼容性。

如何通过html5中video标签的canplaytype接口实现webm格式的优雅降级

Video 标签本身不提供“优雅降级”能力，canPlayType() 是用于探测浏览器对特定 MIME 类型的支持程度，它返回 "probably"、"maybe" 或空字符串，仅作参考。真正的优雅降级靠的是在 HTML 中按优先级顺序声明多个 <source></source>，并结合 JS 检测结果动态加载或提示。

理解 canPlayType 的返回值含义

canPlayType() 不是布尔判断，而是置信度提示：

"probably"：浏览器明确支持该类型+编码组合（如 video/webm; codecs="vp9,opus"）
"maybe"：MIME 类型合法，但无法确认是否支持具体编码
""（空字符串）：不支持该类型，或格式/编码组合被拒绝

注意：不同浏览器对同一字符串的返回可能不同；省略 codecs 参数（如只写 "video/webm"）通常返回 "maybe"，实际意义极低。

HTML 中声明多源并设置合理 fallback 顺序

将 WebM 放在首位，MP4（H.264+AAC）紧随其后，确保主流浏览器能按需选择：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

<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"'>
  您的浏览器不支持视频播放。
</source></source></video>

浏览器会按顺序尝试 <source></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）可能返回不准。