title: Why browsers load video from all sources?
body: <p>I have multiple video elements on my page. They look like this:</p>
  
  <pre><code>&lt;video class="video-js" width="800" height="500" controls="controls" preload="auto"&gt;
  &lt;source src="http://myurl.com/videos/video01.mp4" type="video/mp4" /&gt;
  &lt;source src="http://myurl.comvideos/video01.webmvp8.webm" type="video/webm" /&gt;
  &lt;source src="http://myurl.com/videos/video01.ogg" type="video/ogg" /&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>I suppose different browsers should load only videos from sources they need, not all videos from all three sources at once. Though when I look into Firebug logs I see that they load all files and it takes too long. What can I do to make browsers load only files they really need to play the video?</p>