规范化HTML中媒体元素的备用内容配置指南-html教程-PHP中文网

video必须带poster属性作为加载占位图，audio虽无poster但需嵌套描述性文字替代；二者均须提供fallback文案，且poster须为有效url、内部子节点承担可访问性说明。

规范化html中媒体元素的备用内容配置指南

video 和 audio 必须带 `poster` 和 `alt` 类替代文案

浏览器无法播放媒体时，用户看到的是一片空白或黑屏——这不是“正常”，而是缺失备用内容。HTML 规范要求 <video></video> 至少提供 poster（封面图），<audio></audio> 虽无原生 poster，但需用文字说明替代。实际开发中常误以为加了 controls 就够了，其实它只控制 UI，不解决不可用场景。

poster 必须是有效图片 URL，且该图片需被 Webpack/构建工具识别（见下节）；空字符串 poster="" 或缺失会直接导致 fallback 失效
<video></video> 内部应嵌套 <p></p> 或 <span></span> 描述性文字，例如 <p>本视频介绍产品操作流程，含中文字幕</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件"><img src="https://img.php.cn/upload/manual/000/000/010/170901721079108.gif" alt="使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件" class="overflowclass">使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件</a> <p class="overflowclass">如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更</p> </div> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>，屏幕阅读器可读取
<audio></audio> 不能只放 src，应在标签内写明内容概要：<audio src="guide.mp3">语音指南：如何完成注册流程</audio>
若使用 <source></source> 多格式兜底，每个 <source></source> 都不提供文本 fallback，必须靠外层 <video></video> 或 <audio></audio> 的子节点承担

source 元素的 `type` 属性必须与真实 MIME 类型一致

写 <source src="demo.webm" type="video/webm"></source> 却返回 text/plain 响应头，浏览器会静默跳过该 source —— 不报错、不提示、也不尝试下一个。这是最隐蔽的“播放失败”原因，尤其在本地开发服务器未配 MIME 类型时高频发生。

检查实际 HTTP 响应头中的 Content-Type，用浏览器 DevTools 的 Network → Headers 栏确认，而非只看文件后缀
type 值必须小写，且严格匹配标准类型：如 video/mp4（不是 video/mpeg4），audio/ogg（不是 audio/ogv）
Webpack 构建时，若 source[src] 未被 html-loader 处理（见知识库），路径可能失效，导致 404 后响应头为 text/html，进一步触发 type 不匹配
不要依赖自动探测：即使删掉 type，部分浏览器仍会尝试加载，但行为不一致（Safari 更保守），必须显式声明

track 元素必须配 `kind`、`srclang` 和有效 `src`

<track></track> 不是可选装饰，而是 WCAG 2.1 AA 级合规硬性要求。漏掉 srclang 或 kind="subtitles" 写成 "caption"，会导致字幕不激活、AT（辅助技术）无法识别。

kind 只接受预定义值：subtitles、captions、descriptions、chapters、metadata；其中 subtitles 指翻译字幕，captions 指含音效描述的字幕，二者语义不同
srclang 必须是 BCP 47 标准语言码，如 zh-CN、en-US，不能写 zh 或 english
src 指向的 .vtt 文件需返回 Content-Type: text/vtt，否则 Chrome/Firefox 直接忽略该 track
务必设 default 属性于一种 track（通常是母语字幕），否则用户首次打开视频时字幕不会自动启用

构建工具里 video/src 和 source/src 默认不被 html-loader 处理

Webpack 默认的 html-loader 完全无视 <video src="..."></video> 和 <source src="..."></source>，导致构建后路径没被重写，线上 404。这不是 bug，是设计如此——它只处理 img/script/link 白名单。

必须将 sources 改为对象，并在 list 中显式添加规则：{ tag: "video", attribute: "src", type: "src" } 和 { tag: "source", attribute: "src", type: "src" }
如果用了 srcset 或 base64 data URL，需额外配置 urlFilter 函数，否则可能把远程地址也打包进去
Vue/React 项目若用 v-html 或 dangerouslySetInnerHTML 注入 HTML 字符串，这些 media 标签完全绕过构建处理，必须确保原始字符串里的路径已是部署后绝对路径
测试时别只看本地 file:// 协议能否播——它不校验 MIME，上线后 HTTP 服务才暴露问题