通过添加多个source标签提供不同格式视频，可提升浏览器兼容性。浏览器按顺序尝试加载MP4、WebM、OGG等格式，直至找到支持的类型，推荐将广泛支持的MP4放在首位，并正确设置type属性与服务器MIME类型，以确保高效播放。
在HTML中为视频添加多个源文件，主要是为了提升不同浏览器对视频格式的兼容性。由于各浏览器支持的视频编码格式不同，比如Chrome、Firefox、Safari等对MP4、WebM、OGG的支持程度不一样，因此通过提供多种格式的视频源，可以确保大多数设备和浏览器都能正常播放。
使用多个source标签指定不同格式
HTML5的元素允许嵌套多个
标签，浏览器会按顺序尝试加载，直到找到一个它能支持的格式为止。 示例如下：
说明：
立即学习“前端免费学习笔记（深入）”；
- 浏览器从上到下检查每个
source，一旦发现支持的格式就停止加载后面的源。- 推荐将最广泛支持的格式（如MP4）放在前面，以加快加载速度。
- type属性帮助浏览器快速判断是否支持该格式，避免不必要的请求。
常见视频格式与浏览器兼容性
了解主流格式的支持情况有助于合理选择多源组合：
- MP4 (H.264 + AAC)：被Chrome、Firefox、Safari、Edge、移动端iOS和Android广泛支持，是最推荐的首选格式。
- WebM (VP8/VP9 + Vorbis/Opus)：主要在Chrome、Firefox、Edge中表现良好，开源且免版权，适合现代浏览器。
- OGG (Theora + Vorbis)：Firefox和早期版本的Opera支持较好，但普及率低，一般作为备用。
优化多源设置的建议
- 优先提供MP4和WebM两种格式，已可覆盖绝大多数用户场景。
- 使用工具如FFmpeg批量转换视频为多种格式，命令示例：
ffmpeg -i input.mp4 -c:v libvpx-vp9 -b:v 1M -c:a libopus output.webm- 可通过JavaScript检测当前使用的视频源，用于调试或统计：
const video = document.querySelector('video');console.log(video.currentSrc);基本上就这些。只要合理配置多个source标签并选择合适的编码格式，就能有效解决HTML视频在不同平台上的播放兼容问题。不复杂但容易忽略细节，比如type属性写错会导致格式无法识别。确保服务器正确返回MIME类型也很关键。基本上按标准来就没问题。
