Html 为什么浏览器从所有来源加载视频？

我的页面上有多个视频元素。它们看起来像这样：

<video class="video-js" width="800" height="500" controls="controls" preload="auto">
<source src="http://myurl.com/videos/video01.mp4" type="video/mp4" />
<source src="http://myurl.comvideos/video01.webmvp8.webm" type="video/webm" />
<source src="http://myurl.com/videos/video01.ogg" type="video/ogg" />
</video>

我认为不同的浏览器应该只加载来自他们需要的源的视频，而不是同时加载来自所有三个源的所有视频。不过，当我查看Firebug日志时，我发现它们加载了所有文件，而且耗时太长。如何使浏览器只加载播放视频所需的文件？

<video width="320" height="240" controls preload>
  <source src="pr6.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
  <source src="pr6.ogv"  type='video/ogg; codecs="theora, vorbis"'>
</video>

还必须指定编解码器

类型参数：

完整指南：