通过添加多个source标签提供不同格式视频，可提升浏览器兼容性。浏览器按顺序尝试加载MP4、WebM、OGG等格式，直至找到支持的类型，推荐将广泛支持的MP4放在首位，并正确设置type属性与服务器MIME类型，以确保高效播放。
在HTML中为视频添加多个源文件，主要是为了提升不同浏览器对视频格式的兼容性。由于各浏览器支持的视频编码格式不同，比如Chrome、Firefox、Safari等对MP4、WebM、OGG的支持程度不一样，因此通过提供多种格式的视频源，可以确保大多数设备和浏览器都能正常播放。
使用多个source标签指定不同格式
HTML5的<video>元素允许嵌套多个
<source></7>标签，浏览器会按顺序尝试加载，直到找到一个它能支持的格式为止。</p> <p>示例如下：</p> <font face="Courier New"> <pre class="brush:php;toolbar:false;"> <video controls width="640" height="360"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> 您的浏览器不支持 video 标签。 </video>
说明：
立即学习“前端免费学习笔记（深入）”；
- 浏览器从上到下检查每个
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类型也很关键。基本上按标准来就没问题。
