title: Safari: unable to dynamically load video from blob url
body: <p>i'm trying to implement a dynamic loading for an html5 video tag.</p>
  
  <p>when a user picks a video file via the <code>&lt;input type="file"&gt;</code> element, i want to load it dynamically to a <code>&lt;video&gt;</code> element, and append it to body.</p>
  
  <p>the following code works on Chrome but not on Safari:</p>
  
  <pre><code>function load_video(file) { // this came from &lt;input type="file"&gt; change event
      var reader = new FileReader();
      reader.onload = function(event) {
          var blob = new Blob([event.target.result]);
          window.URL = window.URL || window.webkitURL;
          var blobURL = window.URL.createObjectURL(blob);
          $('body').append('&lt;video controls width="320" src="' + blobURL + '" onloadedmetadata="alert('loaded meta data!')"&gt;&lt;/video&gt;');
      }
  }
  </code></pre>
  
  <p>now,
  if i'll replace <code>src="' + blobURL + '"</code> with a local filepath, say- <code>/media/videos/vid1.mp4</code>, the video loads in Safari as well, but I need it to load the video from <code>blobURL</code>. </p>
  
  <p>any suggestions? </p>
  
  <p>thanks alot.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>as Rod says, unfortunately it's a known bug in Safari (not supported by it's media backend).</p>