Web前端技术 · 第 6 课预测 · 验证 · 解释
代码实验

视频内部的备用文字不是加载失败提示

video 内部的备用文字用于不支持该元素的浏览器。现代浏览器支持 video,但没有可播放资源时,不会因此自动把内部文字显示出来;摘要可以放在元素外,始终可读。

先判断

在支持 video 的浏览器中运行,哪一段说明会作为普通正文显示?

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>黄梅戏唱段备用阅读</title>
</head>
<body>
  <video controls width="280" height="160">
    <p id="fallback">您的浏览器不支持 video,请阅读唱词。</p>
  </video>
  <p id="summary">摘要:唱段讲述人物为救李郎考取功名。</p>
  <details>
    <summary>展开唱词节选</summary>
    <p>为救李郎离家园,谁料皇榜中状元。</p>
  </details>
</body>
</html>

再改一个条件

展开答案与分析

C。浏览器支持 video,就把它作为媒体元素处理;内部备用文字不是通用的加载错误提示。外部摘要和可展开的唱词不依赖媒体资源,所以仍然可读。要提供稳定的阅读替代,应把关键信息放在播放器外部,而不是只放在 video 标签内部。

观察位置:看摘要和唱词能否独立阅读,再比较说明放在 video 内外的差别。