title: How come I can embed a video from a blob url, but not from a local file?
body: <p>I am currently attempting to embed a video on an iPhone app, running off ionic.</p>
  
  <p>The HTML is properly formatted and works on android (but only if I'm using some form of crosswalk), however on iOS the video throws the following error: <code>MEDIA_ERR_SRC_NOT_SUPPORTED</code>.</p>
  
  <p>The compiled HTML that does not work is:</p>
  
  <pre><code>&lt;video preload="true" autoplay="true" controls="controls" src="file:///Users/xueye/Library/Developer/CoreSimulator/Devices/78EC1017-3C73-40C0-890A-92874790A463/data/Containers/Data/Application/250685C6-985D-42B4-BD0E-163C319F5C9E/Library/NoCloud/attachments/my_file.mp4"&gt;
      &lt;source src="file:///Users/xueye/Library/Developer/CoreSimulator/Devices/78EC1017-3C73-40C0-890A-92874790A463/data/Containers/Data/Application/250685C6-985D-42B4-BD0E-163C319F5C9E/Library/NoCloud/attachments/my_file.mp4" type="video/mp4"&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>However, when I read the file into an array buffer and then put it into a blob like so, the following compiled video tag works:</p>
  
  <pre><code>$cordovaFile.readAsArrayBuffer(cordova.file.dataDirectory + "attachments/", fileName).then((result) =&gt; {
      var videoBlob = new Blob([result], {type: playerType});
      var blobUrl = URL.createObjectURL(videoBlob);
  
      var newEle = angular.element('&lt;video preload="true" autoplay="true" controls="controls"&gt;&lt;source src="' + blobUrl + '" type="' + playerType + '"&gt;&lt;/source&gt;&lt;/video&gt;');
      player = &lt;HTMLMediaElement&gt;&lt;any&gt;newEle[0];
  
      player.loop = $scope.loop;
      player.src = blobUrl;
  
      player.addEventListener('error', (e) =&gt; {
          console.log(e);
      }, true);
  
      element.append(newEle);
      player.play();
  }, (error) =&gt; {
      console.log(error);
  });
  </code></pre>
  
  <p>Which compiles into:</p>
  
  <pre><code>&lt;video preload="true" autoplay="true" controls="controls" src="blob:file:///4ea350bd-1f61-4b4b-8a4d-4e75d0247fad"&gt;
      &lt;source src="blob:file:///4ea350bd-1f61-4b4b-8a4d-4e75d0247fad" type="video/mp4"&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>I would love to get away from this awful hacky workaround, especially because I'm highly concerned about loading an entire file into an ArrayBuffer and then again into a blob; on any reasonable size video, that seems like a disaster. This was the only way I could hack it together.</p>
  
  <p>There doesn't even appear to be any way to read directly into a blob to at least cut down on a little overhead. Is it possible to get the video working without using this blob hack? Why does that work, anyways?</p>