HTML <source> src 属性

在 HTML 中，<source> 标签用于为媒体元素（如 <video> 和 <audio>）指定多个媒体资源，以便根据浏览器的支持情况选择最合适的资源进行加载和播放。其中，src 属性是 <source> 标签中最重要的属性之一，用于指定媒体资源的 URL。

src 属性的语法

<src> 属性的语法非常简单，只需在 <source> 标签中添加 src 属性并设置其值为媒体资源的 URL 即可。例如：

<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>

在上面的示例中，<source> 标签中的 src 属性分别指定了两个不同格式的视频资源，浏览器会根据支持的格式选择其中一个进行加载和播放。

src 属性的值

<src> 属性的值应该是媒体资源的 URL，可以是相对路径或绝对路径。通常情况下，我们会为同一个媒体元素添加多个 <source> 标签，每个 <source> 标签对应不同格式的媒体资源，以确保兼容性。

<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> 元素添加了三个 <source> 标签，分别指定了 mp4、webm 和 ogg 格式的视频资源。

注意事项

• 在使用 <source> 标签时，务必确保至少有一个 <source> 标签的 src 属性指定的媒体资源可以被浏览器支持。否则，浏览器将无法加载和播放该媒体元素。
• 虽然可以为一个媒体元素添加多个 <source> 标签，但通常情况下只有一个 <source> 标签的 src 属性会被浏览器选择并加载播放，因此建议只指定几种常见格式的媒体资源。

总结

<src> 属性是 <source> 标签中最重要的属性之一，用于指定媒体资源的 URL。通过合理使用 <source> 标签和 src 属性，可以确保在不同浏览器和设备上都能够正常加载和播放媒体元素。希望本文对您理解和使用 HTML <source> src 属性有所帮助！