阶段 5 · 媒体基础入门14 分钟
媒体能力体检：浏览器究竟能处理什么？
MIME、Codec、canPlayType 与渐进增强
先区分容器、编解码器与浏览器 API，再用能力检测决定播放、处理和录制方案。
LEARNING GOALS
先明确本课目标
1
区分容器格式与音视频 Codec
2
使用 canPlayType 与特性检测
3
为可选能力设计渐进增强路径
MENTAL MODEL · 再建立心智模型
媒体文件像快递包裹：容器是纸箱，音视频编码是箱内货物，浏览器 API 则是拆箱、加工和展示货物的工具。
MINIMAL EXAMPLE
一个 “probably” 能保证播放成功吗？
canPlayType() 只根据 MIME 与 codecs 字符串给出浏览器的静态把握程度；网络、文件损坏、Profile、硬件限制和 DRM 仍可能让真实播放失败。
javascriptconst video = document.createElement('video');
const support = video.canPlayType(
'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
);
console.log(support || '不支持');- 写完整类型 容器 MIME 后附 codecs 参数，比只测 video/mp4 更有信息量。
- 读取三态结果 空字符串表示不支持，maybe/probably 仍不是运行成功保证。
- 保留降级路径 真实播放失败时应尝试备用 Source 或给出清晰错误。
能力检测用于排序候选方案，最终仍以真实资源加载和播放结果为准。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开，不打断主线实验。
展开⌄
音视频原理Media Container组织多条压缩轨道、时间戳、索引和元数据的文件或流格式，例如 MP4、WebM。音视频基础Codec把原始音视频压缩成编码数据并负责反向解码的算法与实现，例如 Opus、AV1、H.264。音视频基础MIME Type描述媒体资源类型的字符串，可通过 codecs 参数进一步声明容器内的具体编码。音视频基础canPlayTypeHTMLMediaElement 根据 MIME Type 与 codecs 参数返回 probably、maybe 或空字符串的能力探测方法；结果不是播放成功保证。音视频基础Feature Detection运行时检查接口、方法、格式或能力是否存在，再选择主路径与降级路径，而不是依据浏览器名称猜测支持情况。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
做一个输入 MIME 字符串就能给出播放、录制和底层处理建议的能力诊断器。
回到原理，解释刚才发生了什么
先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
扩展名不是完整能力描述
同为 .mp4 的文件可以封装不同视频与音频编码。浏览器是否能播放，取决于容器、Codec、Profile、Level 与设备实现的组合。
先检测，再选择路径
HTMLMediaElement、Web Audio、MediaRecorder 和 WebCodecs 的可用范围不同。产品应检测具体入口与配置，而不是只判断浏览器品牌。
OPTIONAL · 迁移时查阅Web 与原生实现对照主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。
展开⌄
先选择浏览器托管的媒体路径，再按需要下沉到可编程处理。
WebGL
可编程路径暴露声音节点、像素、帧或编码队列，适合分析、创作和实时处理。
WebGPU
高层媒体路径负责资源加载、解码、缓冲、同步和展示，最适合普通播放。
能由媒体元素完成的普通播放，不必一开始就选择更底层的帧处理。