备用文本必须写在<video>或<audio>标签体内而非属性中，是浏览器无法加载任何<source>时才渲染的真实DOM内容，可含简单HTML但不执行JS，需兼顾可访问性与容错逻辑。
备用文本写在
很多人误以为备用内容要写成 fallback="提示文字" 这类属性，其实它就是标签体内的普通文本内容。浏览器解析时，如果无法播放任何 <source>，才会渲染这段文字——它不是“提示”，而是真正 fallback 的 DOM 内容。
常见错误现象：页面显示空白，控制台没报错，但视频区域什么也不出现；或老版本 IE 显示一片灰。
- 正确写法必须是直接放在
<video>或<audio>开始与结束标签之间，不能用alt、title等属性替代 - 文本内容可含简单 HTML，比如
<a href="https://www.php.cn/link/885fa5d204701e6e00b4252f7fa98a52">点击下载视频</a>，但避免复杂结构（JS 不会执行） - 若用了
<picture>或响应式<source>，备用文本仍需保留在最外层标签内，不随 source 切换
为什么备用内容经常不显示？检查这三点
写了备用文本却看不见，大概率不是语法错，而是被其他逻辑覆盖或加载路径干扰。
常见错误现象：Chrome DevTools 里能看到备用文字的 DOM 节点，但页面上完全不可见；或者只在禁用 JS 后才出现。
立即学习“前端免费学习笔记（深入）”；
-
<video>标签设置了width/height为 0 或display: none，导致整个容器不可见——备用文本也跟着消失 - 父容器 CSS 设置了
overflow: hidden且备用文字超出尺寸，被裁剪掉（尤其长文本 + 小容器） - 视频资源地址 404，但浏览器仍尝试加载并卡在 loading 状态，未触发 fallback 渲染（此时应监听
error事件手动显隐）
提升容错：用 JS 监听 error 并接管 fallback
原生 fallback 是静态的，一旦视频因网络、CORS、编码等失败，它不会重试或降级，只能靠 JS 补位。
使用场景：企业后台视频教程页、教育平台课件页、需要统计播放失败率的业务。
- 给
<video>绑定error事件，而不是只依赖原生 fallback - 在事件回调中，隐藏 video 元素，显示一个带按钮的
<div class="fallback-ui">，里面放下载链接、转码提示、客服入口等 - 注意：iOS Safari 有时会触发多次
error，建议加防抖或状态锁（如if (video.error) { ... }） - 不要在
error里直接修改src再调load()——移动端可能拒绝二次加载，优先走服务端兜底
语义与可访问性：备用内容不是装饰，是功能必需
屏幕阅读器会把备用文本当作正常段落朗读，但它不会自动说明“这是视频无法播放时的提示”——你得自己说清楚。
使用场景：政府网站、医疗服务平台、无障碍合规项目。
- 开头明确说明性质，例如：
您的浏览器不支持视频播放。以下是本视频的文字摘要： - 避免纯图标或 emoji 替代文字（如 ❌ “视频加载失败”），它们无法被语音识别
- 如果备用内容是文字摘要，确保它和视频信息一致，而非“请更换浏览器”这类无效话术
- 不要省略
aria-hidden="true"在 video 元素上——当 fallback 激活时，需同步隐藏原 video，否则屏幕阅读器可能读两遍
