title: How do YouTube/Facebook display videos using blob?
body: <p>I would like to know the process that these websites use to source a video in blob format from their server?</p>
  
  <pre><code>&lt;video height="390" width="693" preload="auto" src="blob:https://www.facebook.com/34799f7c-34d4-48c7-976f-1e2ddba0728a"&gt;&lt;/video&gt;
  </code></pre>
  
  <p>I'm looking to implement the same method on my site.</p>
  
  <p>I am able to source a video using blob. But the process is slow as I have to first retrieve (download) the video from the server, then create the blob.</p>
  
  <pre><code>var xhr = new XMLHttpRequest();
  xhr.open("GET", "video.mp4"); 
  xhr.responseType = "blob";
  xhr.onload = function() 
  {
      var video = document.getElementById("videoId");
      video.src = URL.createObjectURL(xhr.response);
  }
  xhr.send();
  </code></pre>
  
  <p>If the video is 10 minutes long it takes about 15 seconds after the page has loaded for the video source to update.</p>
  
  <p>However, when you watch a video on YouTube for example, it loads almost instantly. How do they load videos so fast using blob?</p>