HTML <source> media 属性

在进行 web 前端开发过程中，我们经常会使用到多媒体文件，如音频和视频。为了确保网站在不同设备上能够流畅播放这些多媒体文件，我们需要使用 HTML5 提供的 <source> 标签以及其属性来指定不同格式和分辨率的媒体源。

什么是 <source> 标签？

<source> 标签是 HTML5 中用于指定多媒体文件的标签，通常与 <audio> 和 <video> 标签一起使用。它允许我们为同一个媒体文件提供不同格式的备用源，以确保在不同浏览器和设备上都能够正常播放。

<source> 标签的常用属性

src

src 属性用于指定媒体文件的 URL 地址，可以是相对路径或绝对路径。如果浏览器不支持指定的媒体文件格式，将会自动选择下一个 <source> 标签中的媒体源。

示例代码：

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

type

type 属性用于指定媒体文件的 MIME 类型，告诉浏览器如何解析和播放该文件。常见的视频格式包括 video/mp4、video/webm、video/ogg，音频格式包括 audio/mp3、audio/wav、audio/ogg。

示例代码：

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

media

media 属性用于指定媒体查询条件，只有当条件满足时才会加载该 <source> 标签中的媒体源。这个属性通常用于响应式设计，根据设备屏幕大小或其他条件加载不同分辨率的媒体文件。

示例代码：

<video controls>
  <source src="video-low.mp4" type="video/mp4" media="(max-width: 480px)">
  <source src="video-high.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

总结

通过使用 <source> 标签及其属性，我们可以为网站的多媒体文件提供更好的兼容性和用户体验。在实际开发中，我们可以根据不同的需求和设备条件，灵活地配置多媒体文件的格式和分辨率，以确保用户能够顺利地观看和听到网站上的音视频内容。