HTML 零基础教程

HTML <source> 标签

<source> 标签允许你为同一个 <audio> 或 <video> 元素提供多个媒体资源。这样，浏览器就可以根据自身能力和用户的网络状况，智能地选择最合适的格式。

这确保了无论用户使用什么浏览器或设备，都能获得流畅且可访问的多媒体体验。

如果没有 <source> 标签，你就只能提供单一的媒体文件，这可能会将不支持该格式的用户拒之门外。

1. 理解 <source> 标签

<source> 标签是一个空元素（意味着它没有结束标签），用于为 <audio> 和 <video> 元素指定替代的媒体资源。

它被放置在这些元素内部，用来提供同一媒体的不同文件格式或分辨率。浏览器会从上到下扫描，并选择它支持的第一个 <source> 元素，然后忽略其余的。

2. <source> 标签的关键属性

  1. src： 指定媒体文件的 URL。这是最重要的属性，因为它告诉浏览器去哪里找文件。
  2. type： 指定媒体资源的 MIME 类型。这有助于浏览器快速判断它是否能播放该文件，而无需先下载。提供正确的 MIME 类型对于优化性能至关重要。

2.1 浏览器是如何选择的？

浏览器会按照 <source> 元素在 <audio> 或 <video> 标签中出现的顺序进行遍历。

  1. 浏览器检查 type 属性，看是否支持该 MIME 类型。
  2. 如果支持，它将尝试加载并播放 src 属性中指定的文件。
  3. 如果不支持该 MIME 类型或文件无法加载，它将移动到下一个 <source> 元素。
  4. 如果所有的 <source> 元素都不支持，浏览器将显示后备信息（通常是写在 <audio> 或 <video> 标签内部的文本）。

3. 实战示例

让我们看看如何在 <video> 和 <audio> 元素中使用 <source> 标签。

3.1 示例 1：在 <video> 标签中使用 <source>

<video width="640" height="360" controls>
  <source src="myvideo.mp4" type="video/mp4">
  <source src="myvideo.webm" type="video/webm">
  <source src="myvideo.ogv" type="video/ogg">
  你的浏览器不支持 video 标签。
</video>

在这个例子中：

  • 我们有一个带有 width、height 和 controls 属性的 <video> 元素。
  • 提供了三个 <source> 元素，分别指向 MP4、WebM 和 Ogg 格式的同一个视频。
  • type 属性指定了每种格式的 MIME 类型。
  • 如果浏览器不支持任何一种格式，就会显示“你的浏览器不支持 video 标签。”

3.2 示例 2：在 <audio> 标签中使用 <source>

<audio controls>
  <source src="myaudio.mp3" type="audio/mpeg">
  <source src="myaudio.ogg" type="audio/ogg">
  <source src="myaudio.wav" type="audio/wav">
  你的浏览器不支持 audio 元素。
</audio>

在这个例子中：

  • 我们有一个带有 controls 属性的 <audio> 元素。
  • 提供了三个 <source> 元素，分别指向 MP3、Ogg 和 WAV 格式的同一个音频。
  • type 属性指定了每种格式的 MIME 类型。

4. MIME 类型详解

<source> 标签中的 type 属性使用 MIME 类型来告诉浏览器它正在处理什么类型的文件。以下是一些常见的视频和音频 MIME 类型：

4.1 视频

  • video/mp4：用于 MP4 视频（使用 H.264 视频编码和 AAC 音频编码）。
  • video/webm：用于 WebM 视频（使用 VP8 或 VP9 视频编码和 Vorbis 或 Opus 音频编码）。
  • video/ogg：用于 Ogg 视频（使用 Theora 视频编码和 Vorbis 音频编码）。

4.2 音频

  • audio/mpeg：用于 MP3 音频。
  • audio/ogg：用于 Ogg 音频（使用 Vorbis 编码）。
  • audio/wav：用于 WAV 音频。
  • audio/aac：用于 AAC 音频。
注意：使用正确的 MIME 类型至关重要。如果你指定了错误的类型，浏览器可能无法播放媒体文件，即使它实际上支持该格式。

5. 最佳实践

  1. 提供多种格式： 始终提供多种格式以确保跨浏览器的广泛兼容性。MP4 是基本的兼容性选择，而 WebM 通常提供更好的压缩率，且被大多数现代浏览器支持。
  2. 按优先级排序： 将首选格式放在第一位。例如，如果你希望优先使用 WebM（因为它体积小），请将它放在 MP4 之前。
  3. 指定正确的 MIME 类型： 仔细检查每种格式的 MIME 类型是否正确。
  4. 包含后备信息： 始终在 <audio> 或 <video> 元素内包含后备文本，以通知那些浏览器不支持这些元素的用户。