如何为 HTML5 中的元素设置多个媒体资源？

HTML5 为多媒体资源提供了许多新的标签和属性，可以轻松地在网页中嵌入音频、视频等多媒体内容。本文将介绍如何为 HTML5 中的元素设置多个媒体资源。

<audio> 元素设置多个媒体资源

<audio> 元素可以用于在网页中嵌入音频文件。如果要为 <audio> 元素设置多个媒体资源，可以使用多个 <source> 子元素。每个 <source> 元素应该包含一个 src 属性指定媒体文件的 URL，并且可以添加一个 type 属性指定媒体的 MIME 类型。

<audio controls>
  <source src="sound1.ogg" type="audio/ogg">
  <source src="sound1.mp3" type="audio/mpeg">
  <source src="sound1.wav" type="audio/wav">
</audio>

上面的示例代码中，我们为 <audio> 元素设置了三个 <source> 子元素，分别指定了 sound1.ogg、sound1.mp3、sound1.wav 三个媒体文件。浏览器会自动选择支持的媒体类型进行播放。

<video> 元素设置多个媒体资源

<video> 元素可以用于在网页中嵌入视频文件，方法与 <audio> 元素类似。也是使用多个 <source> 元素来设置多个媒体资源。同样，每个 <source> 元素应该包含一个 src 属性指定媒体文件的 URL，并且可以添加一个 type 属性指定媒体的 MIME 类型。

<video controls>
  <source src="movie1.mp4" type="video/mp4">
  <source src="movie1.ogg" type="video/ogg">
  <source src="movie1.webm" type="video/webm">
</video>

上面的示例代码中，我们为 <video> 元素设置了三个 <source> 子元素，分别指定了 movie1.mp4、movie1.ogg、movie1.webm 三个媒体文件。浏览器也会自动选择支持的媒体类型进行播放。

手动设置媒体类型

如果浏览器无法根据文件扩展名或 MIME 类型正确地识别媒体类型，可以手动为 <source> 元素设置 type 属性值。

<source src="movie1.avi" type="video/x-msvideo">

上面的代码中，我们明确指定了 movie1.avi 的媒体类型为 video/x-msvideo，即使浏览器无法识别也能够正确播放。

本文简单介绍了如何为 HTML5 中的元素设置多个媒体资源。通过使用多个 <source> 元素，可以轻松地为音频、视频等多媒体内容提供多个备选资源，增强了网站的兼容性和用户体验。