<source>标签的作用与多媒体资源指定方法
在HTML5的多媒体开发中，<source>标签是处理不同格式、不同兼容性多媒体资源的核心标签，它主要用于为<audio>和<video>标签提供多个可选的多媒体资源文件，帮助浏览器自动选择自身支持的资源进行加载播放，有效解决不同浏览器对多媒体格式支持不一致的问题。
<source>标签的核心作用
<source>标签的核心价值体现在以下几个场景：
多格式兼容：不同浏览器对音视频编码格式的支持存在差异，比如部分浏览器支持MP4格式但无法播放WebM格式，另一部分浏览器则相反。通过<source>标签可以同时指定多种格式的资源，浏览器会按照顺序尝试加载，直到找到自身支持的文件。
多分辨率适配：对于视频资源，可以通过<source>标签指定不同分辨率的版本，配合媒体查询相关属性，让不同设备加载适配自身屏幕分辨率的资源，优化加载速度和播放体验。
资源降级处理：如果所有指定的资源都无法被浏览器支持，还可以配合<audio>、<video>标签内部的 fallback 内容，为用户提供替代提示或者其他解决方案。
多媒体资源的指定方式
使用<source>标签指定多媒体资源时，需要结合<audio>或<video>标签共同使用，具体规则如下：
1. 基础使用结构
<source>标签不能作为独立标签使用，必须放置在<audio>或<video>标签内部，一个多媒体标签可以包含多个<source>标签。浏览器会从上到下依次检查每个<source>标签指定的资源，遇到第一个可支持的资源就会停止检查并加载该资源。
基础语法结构示例：
<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <p>您的浏览器不支持视频播放，请升级浏览器或更换设备访问。</p> </video>
2. 核心属性说明
<source>标签有两个核心属性用于指定资源信息：
src：指定多媒体资源的URL地址，支持相对路径和绝对路径。如果需要展示外部资源示例，可以使用https://www.ipipp.com作为示例地址，比如
src="https://www.ipipp.com/video/demo.mp4"。type：指定资源的MIME类型，帮助浏览器快速判断自身是否支持该资源，避免不必要的加载尝试，提升效率。常见音视频MIME类型如下：
| 资源类型 | 文件格式 | MIME类型 |
|---|---|---|
| 视频 | MP4 | video/mp4 |
| WebM | video/webm | |
| Ogg | video/ogg | |
| 音频 | MP3 | audio/mpeg |
| WAV | audio/wav | |
| Ogg | audio/ogg |
3. 视频多分辨率适配示例
对于需要适配不同屏幕分辨率的视频场景，可以通过media属性配合媒体查询指定不同分辨率的资源，示例代码如下：
<video controls> <source src="video-1080p.mp4" type="video/mp4" media="(min-width: 1920px)"> <source src="video-720p.mp4" type="video/mp4" media="(min-width: 1280px)"> <source src="video-480p.mp4" type="video/mp4" media="(max-width: 1279px)"> <source src="video-720p.webm" type="video/webm"> <p>您的浏览器不支持视频播放，请访问https://www.ipipp.com查看文字版内容。</p> </video>
上述代码中，浏览器会先根据media属性的媒体查询条件匹配对应分辨率的MP4资源，如果没有匹配的MP4资源或者浏览器不支持MP4格式，会尝试加载WebM格式的资源，如果所有资源都不支持，则显示 fallback 提示内容。
4. 音频资源指定示例
音频资源的使用方式和视频类似，只是外层标签替换为<audio>，示例代码如下：
<audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> <source src="https://www.ipipp.com/audio/demo.wav" type="audio/wav"> <p>您的浏览器不支持音频播放，可访问https://www.ipipp.com下载音频文件。</p> </audio>
使用注意事项
<source>标签不需要闭合标签，按照HTML5规范可以自闭合，也可以不写斜杠，两种写法都符合语法要求。
如果<audio>或<video>标签本身已经通过
src属性指定了资源，再添加<source>标签时，浏览器会优先使用<source>标签指定的资源。务必正确填写
type属性，虽然浏览器可以自动检测资源类型，但提前声明可以减少不必要的资源加载消耗，提升页面性能。