如何使用 HTML5 的 source 标签为 audio 和 video 元素指定多个媒体源？

推荐答案

// www.javascriptcn.com code example
<audio controls>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

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

本题详细解读

source 标签是 HTML5 中 audio 和 video 元素内部的子元素，用于为这些媒体元素指定多个媒体源。这样做的主要目的是为了兼容不同的浏览器，因为不同的浏览器可能支持不同的媒体格式。

以下是 source 标签的一些关键点：

• src 属性: 指定媒体文件的 URL 地址。
• type 属性: 指定媒体文件的 MIME 类型。这非常重要，浏览器会根据 type 属性来判断是否支持该媒体格式。常见的音频 MIME 类型有 audio/ogg、audio/mpeg、audio/wav 等；常见的视频 MIME 类型有 video/webm、video/mp4、video/ogg 等。
• 浏览器加载顺序: 浏览器会按照 source 标签在 HTML 中出现的顺序依次尝试加载媒体资源。一旦成功加载一个资源，浏览器会停止尝试加载后面的资源。
• 备选文本: audio 和 video 元素内，除了 source 标签以外还可以添加提示文本，当浏览器不支持 audio 或 video 元素时，会显示这些提示文本。

使用 source 标签的优势:

• 兼容性: 可以确保在多种浏览器和设备上都能正常播放音频和视频，即使某个浏览器不支持特定格式，也会尝试使用其他可用的格式。
• 更好的用户体验: 避免了因为浏览器不支持某种格式而导致用户无法观看或收听媒体内容的情况。
• 灵活的媒体管理: 可以根据不同的场景提供不同的媒体源，比如针对移动设备提供较低分辨率的视频，针对桌面设备提供较高分辨率的视频。

示例中的代码解释:

1. 音频示例 (<audio>):
   • 第一个 <source> 标签尝试加载 audio.ogg 文件，并指定其类型为 audio/ogg。
   • 如果浏览器不支持 Ogg 格式的音频，则会尝试加载第二个 <source> 标签中的 audio.mp3 文件，类型为 audio/mpeg。
   • 如果两个格式都不支持，浏览器会显示 "您的浏览器不支持 audio 元素。" 这段文字。
2. 视频示例 (<video>):
   • 第一个 <source> 标签尝试加载 video.webm 文件，并指定其类型为 video/webm。
   • 如果浏览器不支持 WebM 格式的视频，则会尝试加载第二个 <source> 标签中的 video.mp4 文件，类型为 video/mp4。
   • 如果两个格式都不支持，浏览器会显示 "您的浏览器不支持 video 元素。" 这段文字。
   • controls 属性为 video 元素添加默认的播放控件， width 和 height 属性设置视频播放区域的宽高。

总结: source 标签是 HTML5 中实现跨浏览器媒体播放的重要机制，开发者应该充分利用它，为用户提供更好的媒体体验。