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

Question

我的页面上有多个视频元素。他们是这样的：

<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日志时，我发现它们加载了所有文件，但花费时间太长。我能做些什么来使浏览器只加载他们真正需要播放视频的文件？

Answer 1

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

您还必须指定一个编解码器。

1. 类型Paramters：http://wiki.whatwg.org/wiki/Video_type_parameters
2. 完全指南：http://diveintohtml5.ep.io/video.html