title: Detect 404 on video blob:https source
body: <p>I am using blob:https as source for my video-tags, like this:</p>
  
  <pre><code>function mk_bloburl(source_id, url) {
      var xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      xhr.responseType = 'blob'; //important
      xhr.onload = function(e) {
          if (this.status == 200) {
              var blob = this.response;
              var source = document.getElementById(source_id);
              var video = source;
              if (video.tagName=="SOURCE") {
                  video = source.parentNode;
              }
              video.oncanplaythrough = function() {
                  URL.revokeObjectURL(source.src);
              };
              source.src = URL.createObjectURL(blob);
              video.load();
          }
      };
      xhr.send();
  }
  
  mk_bloburl('review-video-source', my_video_url );
  </code></pre>
  
  <p>Having HTML like this:</p>
  
  <pre><code>&lt;video id="review-video" controls="" width="100%"&gt;
      &lt;source id="review-video-source" /&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>Now if I reload the page and start playing, it works. If I play and let it play through and then replay with no wait-time it works.
  If I however reload the page and then wait for a while (like 1-2 minutes) and then press play, it fails.</p>
  
  <p>Message I get in the Chrome browser looks like this:</p>
  
  <pre><code>GET blob:https://example.com/debeecfe-49b0-4c98-87d6-8ead325b2d75 404 (Not Found)
  </code></pre>
  
  <p>So, it's like the blob is auto-removed from the browser memory after a while. I want to catch the event when it is erased or when I get the 404 by starting the playback, so I can refresh the blob.</p>
  
  <p>I have tried:</p>
  
  <pre><code>var source = document.querySelector("#review-video-source");
  source.addEventListener("error", function(event) {
      console.debug("An error accoured");
  });
  </code></pre>
  
  <p>But this does not seem to catch the error.
  What can I do?</p>