title: HTML5 Video: Streaming Video with Blob URLs
body: <p>I have an array of Blobs (binary data, really -- I can express it however is most efficient. I'm using Blobs for now but maybe a <code>Uint8Array</code> or something would be better). Each Blob contains 1 second of audio/video data. Every second a new Blob is generated and appended to my array. So the code roughly looks like so:</p>
  
  <pre><code>var arrayOfBlobs = [];
  setInterval(function() {
      arrayOfBlobs.append(nextChunk());
  }, 1000);
  </code></pre>
  
  <p>My goal is to stream this audio/video data to an HTML5 element. I know that a Blob URL can be generated and played like so:</p>
  
  <pre><code>var src = URL.createObjectURL(arrayOfBlobs[0]);
  var video = document.getElementsByTagName("video")[0];
  video.src = src;
  </code></pre>
  
  <p>Of course this only plays the first 1 second of video. I also assume I can trivially concatenate all of the Blobs currently in my array somehow to play more than one second:</p>
  
  <pre><code>// Something like this (untested)
  var concatenatedBlob = new Blob(arrayOfBlobs);
  var src = ...
  </code></pre>
  
  <p>However this will still eventually run out of data. As Blobs are immutable, I don't know how to keep appending data as it's received.</p>
  
  <p>I'm certain this should be possible because YouTube and many other video streaming services utilize Blob URLs for video playback. How do <strong><em>they</em></strong> do it?</p>