title: Local caching of blob (HTML5)
body: <p>I'm dealing with a scenario where users in the hundreds access to videos stored on a web server on a regular basis. Two conditions are mandatory
  1 - Videos must be 100% downloaded before playback is allowed
  2 - The last played video(s) should be accessible offline</p>
  
  <p>To begin with, I am providing the Video element not with a static source, but rather with a blob, like follows (webkit only for now)</p>
  
  <pre><code>var xhr = new XMLHttpRequest();
  xhr.addEventListener("progress", updateProgress, false);
  xhr.open('GET', 'http://someurl/content.mp4', true);
  xhr.responseType = 'blob';
  xhr.onload = function(e) 
  {
   if (this.status == 200) 
   {
    var myBlob = this.response;
    var data = (window.webkitURL ? webkitURL : URL).createObjectURL(myBlob);
    var video = document.getElementById("player");
    video.src = data;
    video.play();
   }
  }
  xhr.send();
  </code></pre>
  
  <p>Now, the question: how can I locally cache the above blob? How can I check for its presence in the local machine's cache and retrieve it rather than download it from the web server again?</p>
  
  <p>Thanks</p>
  
  <p>r.</p>