Source src 属性

在 web 开发中，<source> 元素的 src 属性用于指定媒体资源的 URL。在前端开发中，我们经常会使用 source 元素来为 video 或 audio 元素指定不同的媒体资源，以便在不同的设备或网络环境下提供最佳的用户体验。

语法

<source> 元素是嵌套在 video 或 audio 元素内部的，其语法如下：

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

在上面的示例中，我们为 video 元素指定了两个不同格式的视频资源：movie.mp4 和 movie.ogg。浏览器会根据支持的格式选择其中一个进行播放。如果浏览器不支持 <video> 标签，那么会显示 Your browser does not support the video tag.。

属性

<source> 元素支持以下属性：

• src: 指定媒体资源的 URL。
• type: 指定媒体资源的 MIME 类型。如果不指定，浏览器会根据 src 属性的文件扩展名自动推断类型。

示例

下面是一个更完整的示例，演示了如何为 video 元素指定多个不同格式的视频资源：

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

在这个示例中，我们为 video 元素指定了三种不同格式的视频资源：movie.mp4、movie.webm 和 movie.ogg。浏览器会根据支持的格式选择其中一个进行播放。

总结

通过合理使用 source 元素的 src 属性，我们可以为媒体元素提供多个不同格式的资源，以确保在不同的浏览器和设备上都能正常播放。这样可以提高用户体验，让用户更流畅地观看视频或听取音频。