必须嵌套在、或内作为直接子元素，脱离则报domexception或静默失效；type须与服务器content-type严格一致，路径错误亦静默跳过。
<source></source> 标签本身不渲染、不独立存在，它必须作为 <audio></audio>、<video></video> 或 <picture></picture> 的直接子元素出现；脱离这三类父容器，它就失去语义和功能，浏览器会静默忽略或报 DOMException: The element has no supported sources。
为什么 <source></source> 不能写在 <div> 里
<p>它不是“媒体播放器”，只是“候选资源列表”。浏览器解析时只在特定上下文中读取它：<br>• 遇到 <code><audio></audio> 或 <video></video>，才开始收集其内部的 <source></source> 元素
• 遇到 <picture></picture>，才启用 srcset/media 匹配逻辑
• 写在 <div> 里、或放在 <code><audio></audio> 外部闭合标签之后 → 浏览器根本不会识别它为有效源，控制台可能无提示，但播放器区域为空
type 属性必须与服务器返回的 Content-Type 响应头严格一致
type 属性必须与服务器返回的 Content-Type 响应头严格一致浏览器不看文件后缀，只比对 type 值和 HTTP 响应头中的 Content-Type 字段：
• MP3 文件必须用 type="audio/mpeg"，不是 audio/mp3 或 audio/x-mp3
• OGG 容器通常用 type="audio/ogg"，但若含 Opus 编码，部分 Safari 要求 type="audio/opus"
• 视频同理：video/mp4、video/webm、video/ogg 必须一字不差
• 本地开发用 file:// 协议时，type 会被完全忽略，所有 <source></source> 失效 —— 必须起一个本地 HTTP 服务（如 python -m http.server）才能测试
路径错误、跨域、404 不会报错，只会静默跳过
这是最容易误判的点：
• <source src="missing.mp3"></source> 加载失败，控制台不报错，也不显示 fallback 文本
• 你看到的只是一个空控件，或干脆没控件
排查方法：
• 在 Network 面板中过滤 media 或状态码 4xx/5xx
• 把每个 src 地址单独粘贴进新标签页，确认能否下载
• 注意大小写：Linux 服务器上 song.MP3 ≠ song.mp3
• 相对路径以 HTML 文件所在位置为基准，不是 JS 或 CSS 所在目录
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
<source></source> 和父元素的 src 属性互斥
一旦用了 <source></source>，就不能再给 <audio></audio> 或 <video></video> 设置 src 属性：
• 同时存在时，浏览器优先使用 src，忽略全部 <source></source>
• 这是规范行为，不是 bug
• 正确做法：只保留 <source></source> 列表，删掉父标签上的 src
真正容易被忽略的是：它没有视觉反馈机制。出问题时既不报错、也不提示、更不 fallback —— 你得靠 Network 面板和逐个验证来定位，而不是等控制台提醒。
