为路线页加入音频和视频 | 自在学

为路线页加入音频和视频

图片能说明路线外观，音频可以提供沿途讲解，视频可以示范入口和路况。HTML 自带 audio 和 video 元素，不需要第三方播放器就能提供基本控制。

先整理媒体文件

在项目中创建 media 文件夹：

files

city-walk/
├── index.html
├── routes.html
├── schedule.html
├── contact.html
├── images/
│   ├── favicon.png
│   ├── river-walk.jpg
│   ├── old-town.jpg
│   └── route-video-cover.jpg
└── media/
    ├── canal-guide.mp3
    ├── canal-guide.ogg
    ├── route-preview.mp4
    ├── route-preview.webm
    └── captions-zh.vtt

课程使用这些文件名演示结构，你需要换成自己有权发布的媒体。不要把视频网站页面地址直接当成 video 的 src；src 应指向真实媒体文件，第三方播放器通常使用下一章的 iframe。

audio 提供音频控制

最简单的音频播放器是：

html

<audio src="media/canal-guide.mp3" controls></audio>

没有 controls 时，用户通常看不到可操作界面。路线讲解更合适的写法是提供多个格式和后备文字：

html

<audio controls preload="metadata">
  <source src="media/canal-guide.mp3" type="audio/mpeg">
  <source src="media/canal-guide.ogg" type="audio/ogg">
  <p>
    你的浏览器无法播放音频，
    <a href="media/canal-guide.mp3">下载讲解音频</a>。
  </p>
</audio>

浏览器会按顺序尝试 source。preload="metadata" 表示先读取时长等基本信息，不要求立即下载完整文件。

video 提供画面和声音

html

<video
  controls
  preload="metadata"
  poster="images/route-video-cover.jpg"
  width="960"
  height="540"
>
  <source src="media/route-preview.mp4" type="video/mp4">
  <source src="media/route-preview.webm" type="video/webm">
  <p>
    你的浏览器无法播放视频，
    <a

poster 是视频播放前显示的封面。width 和 height 提供画面比例。和图片一样，真实项目还要用 CSS 限制视频不要超过容器宽度。

不要默认开启 autoplay，尤其不要自动播放有声音的媒体。突然出现的声音会打断用户，也可能被浏览器拦截。把播放决定交给用户。

track 为视频提供字幕

在 video 中加入字幕轨道：

html

<track
  src="media/captions-zh.vtt"
  kind="captions"
  srclang="zh-CN"
  label="简体中文"
  default
>

完整位置如下：

html

<video controls preload="metadata" poster="images/route-video-cover.jpg">
  <source src="media/route-preview.mp4" type="video/mp4">
  <track
    src="media/captions-zh.vtt"
    kind="captions"
    srclang="zh-CN"
    label="简体中文"
    default
  >
  <p><a href=

字幕文件使用 WebVTT 格式，内容类似：

vtt

WEBVTT
 
00:00:00.000 --> 00:00:03.500
这里是游客中心，也是路线的集合点。
 
00:00:03.500 --> 00:00:07.000
出发后沿右侧河岸步道向北行走。

字幕不仅帮助听障用户，也适合静音环境和听不清现场声音的情况。

把媒体加入 routes.html

在运河路线的文字和列表之后加入：

html

<section aria-labelledby="media-title">
  <h2 id="media-title">出发前先听一段讲解</h2>
  <p>音频介绍集合点和前 500 米的路况。</p>
 
  <audio controls preload="metadata">
    <source src="media/canal-guide.mp3" type="audio/mpeg">
    <source src="media/canal-guide.ogg" type=

如果你暂时没有媒体文件，可以先完成结构，再在开发者工具“网络”面板观察 404，从而练习根据请求路径定位错误。下一章我们会加入在线地图，并给外部内容设置明确边界。