video 标签内嵌套 source 元素时 type 属性如何指定 MIME 类型
source 元素的 type 属性用于声明媒体文件的 MIME 类型，帮助浏览器快速识别并跳过不支持的格式。
浏览器如何识别并跳过不支持的格式
当 video 标签内嵌套多个 source 元素时，浏览器会依次检查每个 source 的 type 属性。type 属性包含媒体文件的 MIME 类型，例如 video/mp4 或 audio/mp3。浏览器根据这个声明判断自身是否支持该格式。如果浏览器不支持该 MIME 类型，它会直接跳过该 source 元素，继续检查下一个。这种机制避免了浏览器尝试加载并解码不支持的文件，从而节省带宽和计算资源。
如果 source 元素没有设置 type 属性，浏览器将加载并尝试播放每个文件，直到找到能播放的一个。这会导致不必要的网络请求和加载时间。通过在 source 中明确指定 type，浏览器可以更高效地选择兼容的格式。例如，在提供 MP4 和 WebM 两种格式时，指定 type 可以让浏览器优先尝试它支持的格式，而不是盲目加载所有文件。
如何正确填写 type 属性的 MIME 类型
type 属性的值应与实际文件的 MIME 类型完全一致。对于视频文件，常见的 MIME 类型包括 video/mp4、video/webm 和 video/ogg。对于音频文件，常见的 MIME 类型包括 audio/mp3、audio/ogg 和 audio/wav。例如，如果 source 指向一个 .mp4 文件，type 应设置为 video/mp4。如果指向一个 .webm 文件，type 应设置为 video/webm。确保 type 与文件扩展名和实际编码格式匹配。
MDN 文档建议在 source 元素中包含 type 属性，即使它是可选的。这有助于浏览器快速识别文件格式。如果不确定文件的 MIME 类型，可以查阅相关文档或使用在线工具检测。例如，一个指向 rabbit320.mp4 的 source 元素应包含 type='video/mp4'。一个指向 rabbit320.webm 的 source 元素应包含 type='video/webm'。正确的 type 声明可以显著提升媒体加载的效率。
排查 type 属性设置错误的检查步骤
首先，检查 source 元素中的 type 属性值是否与文件扩展名和实际格式匹配。例如，如果文件是 .mp4，type 应为 video/mp4。如果文件是 .webm，type 应为 video/webm。使用浏览器开发者工具查看网络请求，确认浏览器是否跳过了不支持的格式。在网络面板中，如果某个文件被请求但未播放，可能是 type 属性设置错误或浏览器不支持该格式。
其次，验证浏览器是否支持指定的 MIME 类型。不同浏览器支持不同的容器和编码格式。例如，MP4 容器通常包含 H.264 视频，而 WebM 容器通常包含 VP8/VP9 视频。如果浏览器不支持指定的容器或编码，即使 type 属性正确，媒体也可能无法播放。确保提供的格式在目标浏览器中广泛支持。例如，同时提供 MP4 和 WebM 格式可以覆盖大多数现代浏览器。
验证 type 属性生效的测试方法
使用浏览器开发者工具的“网络”面板测试 type 属性的效果。加载包含多个 source 元素的页面，观察网络请求。如果 type 属性正确，浏览器应只请求它支持的格式。例如，如果浏览器支持 MP4 但不支持 WebM，它应只请求 MP4 文件。如果 type 属性缺失，浏览器可能会请求所有文件，直到找到可播放的一个。通过对比请求列表，可以确认 type 属性是否生效。
使用不同浏览器测试兼容性。确保在目标浏览器中，媒体能够正常播放，且只请求兼容的格式。例如，在 Chrome 中测试 MP4 和 WebM 格式，确认浏览器优先播放支持的格式。如果媒体无法播放，检查 type 属性是否正确，以及浏览器是否支持该格式。通过多浏览器测试，可以验证 type 属性在不同环境下的有效性。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。