HTML <source> 标签

1. 简介

HTML <source> 标签用于为媒体元素（如 <video> 或 <audio>）指定多个媒体资源。它通常和 <video> 或 <audio> 标签一起使用，以提供不同的媒体格式选项，从而确保在各种浏览器中正确地播放媒体文件。

2. 基本语法

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>

在上述例子中，<source> 标签用于为 <video> 元素指定两个媒体资源：一个是 movie.mp4（MP4 视频格式），另一个是 movie.ogg（Ogg 视频格式）。浏览器会尝试使用第一个可用的媒体资源。

3. 属性

src: 指定媒体文件的 URL。
type: 指定媒体资源的 MIME 类型，例如 video/mp4、video/ogg、audio/mpeg 等。
media: 指定媒体资源的适用性，通常与 CSS 媒体查询一起使用，以确保在特定设备或环境下加载合适的媒体文件。

4. 注意事项

<source> 标签必须包含在 <video>、<audio>、<picture> 等支持多个资源的元素内部。
浏览器会按照 <source> 标签出现的顺序来尝试加载媒体文件，直到找到一个可用的为止。因此，通常将最受支持和高质量的格式放在前面。
如果浏览器不支持 <source> 标签中指定的媒体类型，则会跳过该资源并尝试下一个。为了保证在所有情况下都能正常播放媒体文件，最好提供多个格式选项。
<source> 标签内容是空的，不需要使用结束标签（如 </source>）。
为了确保在所有浏览器中都能正常播放媒体文件，最好同时提供带有音频轨道和无音频轨道的视频文件版本。这样可以避免某些浏览器在切换到静音模式后仍然播放背景音乐的问题。

5. 示例

5.1 简单的视频播放器

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

5.2 带有多个媒体资源选项的视频播放器

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>

5.3 使用 `media` 属性的图片切换器

<picture>
  <source srcset="img_small.jpg" media="(max-width: 600px)">
  <source srcset="img_large.jpg" media="(min-width: 601px)">
  <img src="img_default.jpg" alt="图片切换器示例">
</picture>

通过以上内容，你应该对 HTML <source> 标签的使用有了更加深入的理解。希望这个教程能够帮助您更好地掌握如何在项目中运用它。