嵌入多媒体

在HTML5出现之前，要在网页上播放视频或音频，通常需要依赖像Flash这样的第三方插件，过程繁琐且兼容性差。 幸运的是，HTML5为我们带来了原生的<video>和<audio>标签，让嵌入多媒体变得前所未有的简单。

播放音频：<audio>标签

如果你想在网页上嵌入一段背景音乐、一首歌曲或者一段播客，<audio>标签是你的不二之选。 最简单的用法是直接指定音频文件的路径：

|
<audio src="path/to/your/music.mp3"></audio>

但是，如果你只写上面这行代码，刷新页面后会发现什么也看不见。这是因为我们还没有给它提供播放控件。

controls 属性

这个属性至关重要。一旦加上它，浏览器就会为音频播放器提供一套默认的控制界面，包括播放/暂停按钮、音量调节、进度条等。

|
<audio src="https://cdn.freesound.org/previews/825/825290_16094772-lq.mp3" controls></audio>

controls是一个布尔属性，你只需要写上属性名，不需要给它赋值。

其他常用属性

• autoplay: 如果设置了这个属性，音频在页面加载后会自动开始播放。
• loop: 设置后，音频播放结束后会自动重新开始。
• muted: 设置后，音频会静音播放。

播放视频：<video>标签

<video>标签的用法和<audio>非常相似。它用于在网页上嵌入视频内容。

|
<video src="movie.mp4" controls></video>

|
<video
  src="epic-trailer.mp4"
  width="640"
  height="360"
  controls
  poster="trailer-poster.jpg">
</video>

提升兼容性：<source>标签

不同的浏览器可能支持不同的音视频格式（如.mp3, .ogg, .wav, .mp4, .webm）。为了让你的多媒体内容能被尽可能多的用户正常访问，最佳实践是提供多种格式的媒体文件。 这时，我们可以使用<source>标签。它被包裹在<audio>或<video>标签内部，允许你指定多个媒体源。

|
<video controls width="640" height="360" poster="cover.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <p>抱歉，你的浏览器不支持播放此视频。</p>
</video>

掌握了<audio>和<video>标签，你就拥有了构建真正动态、引人入胜的富媒体网页的能力。无论是个人作品集里的背景音乐，还是产品介绍页里的演示视频，现在你都可以轻松实现了。

为多媒体添加字幕：<track>标签

为了让你的多媒体内容更具可访问性（例如，服务于听障人士或在静音环境下观看的用户），你应该为它们提供文字说明，比如字幕或解说。HTML5提供了<track>标签来实现这一功能。

<track>标签被放置在<audio>或<video>标签内部，它指向一个包含定时文本信息的文本文件。最常见的格式是WebVTT（Web Video Text Tracks），后缀为.vtt。

|
<video controls width="640" height="360" poster="cover.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
 
  <!-- 添加英文字幕 -->
  <track src="subtitles_en.vtt" kind="subtitles"

<track> 标签的关键属性

WebVTT (.vtt) 文件是什么样的？

它是一个格式非常简单的文本文件。类似如下的结构

|
WEBVTT
 
00:01.000 --> 00:04.000
你好，欢迎观看这个视频。
 
00:05.500 --> 00:09.000
在这一节，我们将学习如何添加字幕。

你只需要按照“开始时间 --> 结束时间”的格式，在下面写上对应时间段要显示的文本即可。