HTML中source标签在音视频播放中的作用-html教程-PHP中文网

标签本身不播放，仅按顺序提供备选资源；浏览器严格执行三步判断（type匹配→content-type逐字符一致→首帧解码），ios safari强制首个必须是h.264 baseline+aac-lc的mp4且type含精确codecs，否则静音或白屏。

html中source标签在音视频播放中的作用

<source></source> 标签本身不播放任何东西，它只是告诉浏览器“这里有几个备选资源，你按顺序挑一个能播的”。它的核心价值不是功能丰富，而是容错——没有它，<video></video> 或 <audio></audio> 就只能赌一个格式，赌输了就白屏或静音。

为什么必须用而不是只写video的src属性

直接在 <video></video> 上写 src 属性，等于放弃所有 fallback 能力：浏览器只试这一个文件，不支持就报错，不会往下找。而多个 <source></source> 是显式声明“我准备了多个版本”，浏览器会严格按顺序执行三步判断：

检查 type 是否被 canPlayType() 返回 "probably" 或 "maybe"
发起 HTTP 请求，要求响应头 Content-Type 与 type 属性逐字符一致（比如 video/mp4; codecs="avc1.42E01E, mp4a.40.2" 中的空格、逗号、引号都不能错）
尝试解码视频第一帧——Network 面板看到 200 ≠ 播得通；iOS Safari 就常卡在这一步静音

iOS Safari 对顺序和type的硬性要求

这是最常翻车的点：iOS Safari（包括所有 WebKit WebView）根本不会 fallback。它只认第一个 <source></source>，且必须同时满足：

格式是 MP4 容器
视频编码是 H.264 Baseline Profile（不能是 Main 或 High）
音频编码是 AAC-LC
type 属性完整写出 codecs，例如：video/mp4; codecs="avc1.42E01E, mp4a.40.2"
该 <source></source> 必须排在第一位；哪怕后面跟了完全合法的 WebM，它也根本不发请求

错误示例：<source src="vid.webm" type="video/webm"></source> 放首位 → 真机上无报错、无日志、无声无画。

media 属性在 video/audio 的 source 中完全无效

别被 <picture></picture> 带偏：media 属性对 <video></video> 或 <audio></audio> 内的 <source></source> 没有任何作用。Chrome、Firefox、Safari、Edge 全部忽略它——这不是 bug，是 HTML 标准明文规定的适用范围仅限 <picture></picture>。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

常见误判来源：