title: Ionic3 Angular not allows to access local video file from video player (Android & iOS)
body: <p>I have an issue (it seems to be hard, I've searched a lot and not found any working solution) with Ionic 3.</p>
  
  <h2>Summary of issue</h2>
  
  <ul>
  <li>Trying to access local video file: <code>'Not allowed to load local resource: file:///data/user/0/br.com.myapp/files/916354762.mp4'</code></li>
  </ul>
  
  <h2>Steps I need to do</h2>
  
  <ul>
  <li>Load .mp4 files from web (using XHR blob) and write then on local data directory. (works well)</li>
  <li>Play the video in app with HTML5 or the other player. (not works)</li>
  </ul>
  
  <h2>Detailed description</h2>
  
  <p>My app (android &amp; ios) will work with offline video. First, I've downloaded the videos to the device, using a File native plugin and this step is nice, I can write and recover the file, all with success. But when I need to load and play the video on HTML5 video player, or with videogular2(<a href="http://videogular.github.io/videogular2" rel="nofollow noreferrer">http://videogular.github.io/videogular2</a>), the video isn't loading... The videogular2 returns an error <code>'Not allowed to load local resource: file:///data/user/0/br.com.myapp/files/916354762.mp4'</code>, and the HTML5 player isn't returning any error.</p>
  
  <h2>What i've tried and didn't work:</h2>
  
  <ul>
  <li>Use HTML5 video player</li>
  <li>Use videogular2</li>
  <li>Read the video file as <code>base64 string</code> (works well, i can get base64 correctly), but it's large file (>20MB) and the app dies.</li>
  <li>Set <code>allow-origin file://*/</code> on <code>config.xml</code> file.</li>
  </ul>
  
  <h2>HTML5 video player code:</h2>
  
  <p>html</p>
  
  <pre><code>&lt;video #video controls autoplay&gt;&lt;/video&gt;
  </code></pre>
  
  <p>ts</p>
  
  <pre><code>@ViewChild('video') videoPlayer: ElementRef;
  ...
  let video = this.videoPlayer.nativeElement;
  video.src = 'file:///data/user/0/br.com.myapp/files/916354762.mp4';
  or
  video.src = '/data/user/0/br.com.myapp/files/916354762.mp4'; // i've tried also without file://, also not works, i also tried with DomSanitizer
  video.play();
  </code></pre>
  
  <h2>VIDEOGULAR2 code:</h2>
  
  <p>html</p>
  
  <pre><code>&lt;vg-player (onPlayerReady)="onPlayerReady($event)"&gt;
      ...
      &lt;video #media
             [vgMedia]="media"
             [src]="src"
             id="singleVideo"
             preload="auto"
             crossorigin&gt;
      &lt;/video&gt;
    &lt;/vg-player&gt;
  </code></pre>
  
  <p>ts</p>
  
  <pre><code>video.src = 'file:///data/user/0/br.com.myapp/files/916354762.mp4';
  or
  video.src = '/data/user/0/br.com.myapp/files/916354762.mp4';
  </code></pre>
  
  <p>Please, anyone can help me?</p>