<source> ：提供多种格式的媒体文件

在网页中，为了提供给用户最佳的媒体体验，开发者通常需要准备多个版本的媒体文件，以便根据用户的设备和网络环境选择最合适的播放资源。HTML5 引入了 <source> 元素来简化这一过程，允许在一个 <video> 或 <audio> 标签内指定多个媒体文件源。浏览器将自动选择第一个可播放的媒体文件。

<source> 元素的基本使用

<source> 元素用于指定多媒体文件的不同格式版本，如 MP4、WebM、Ogg 等，以及不同分辨率的版本（例如，高清晰度和标准清晰度）。浏览器会尝试播放这些文件中的第一个可用格式。

示例代码：

<!-- 在一个视频标签中添加多个媒体文件源 -->
<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>

在这个例子中，我们提供了两种不同的视频格式源：.mp4 和 .ogg。如果浏览器支持 .mp4 格式，则播放该文件；如果浏览器不支持 .mp4，则尝试播放 .ogg 文件。如果两者都不支持，页面会显示提示信息。

自动选择最优格式

现代浏览器通常能够自动检测用户设备的播放能力，并选择最佳的媒体文件格式进行播放。然而，通过 type 属性明确指定文件类型仍然是一种好习惯，可以避免因浏览器解析错误导致的播放失败。

示例代码：

<!-- 明确指定文件类型，提高兼容性 -->
<video controls>
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>

在这个示例中，我们为每个 <source> 元素都指定了文件类型，确保即使浏览器不自动检测到最优格式，也可以通过明确的类型信息来判断并选择合适的文件。

使用 <source> 的优势

1. 优化用户体验：通过提供不同格式和分辨率的媒体文件，可以确保所有用户都能获得最佳的播放体验。
2. 减少资源加载时间：通过预估用户可能访问的资源，可以提前加载相应的文件，减少加载延迟。
3. 提高兼容性：明确的文件类型和格式选择可以帮助解决浏览器之间的差异问题，确保不同设备和浏览器都能正常播放媒体内容。

总之，<source> 元素是构建跨平台、跨设备的动态媒体展示的有力工具。合理利用 <source>，可以使您的网站或应用在各种环境下都能提供流畅、高质量的多媒体体验。