问题摘要

尝试访问本地视频文件：'Not allowed to load local resource: file:///data/user/0/br.com.myapp/files/916354762.mp4'

我需要做的步骤

从Web加载.mp4文件（使用XHR blob），然后将其写入本地数据目录。（效果很好）
使用HTML5或其他播放器在应用程序中播放视频。（无效）

详细说明

我的应用程序（Android和ios）可用于离线视频。首先，我已经使用File native插件将视频下载到设备上了，这一步很好，我可以编写和恢复文件，一切都成功。但是，当我需要在HTML5视频播放器或videogular2（http://videogular.github.io/videogular2）上加载和播放视频时，视频没有加载... videogular2返回错误'Not allowed to load local resource: file:///data/user/0/br.com.myapp/files/916354762.mp4'，而HTML5播放器没有返回任何错误。

我尝试过但没有奏效的东西：

使用HTML5视频播放器
使用videogular2
以base64 string的格式读取视频文件（效果很好，我可以正确获取base64），但是它很大（> 20MB），并且该应用程序消失了。
在allow-origin file://*/文件上设置config.xml。

HTML5视频播放器代码：

html

<video #video controls autoplay></video>

ts

@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();

VIDEOGULAR2代码：

html

<vg-player (onPlayerReady)="onPlayerReady($event)">
    ...
    <video #media
           [vgMedia]="media"
           [src]="src"
           id="singleVideo"
           preload="auto"
           crossorigin>
    </video>
  </vg-player>

ts

video.src = 'file:///data/user/0/br.com.myapp/files/916354762.mp4';
or
video.src = '/data/user/0/br.com.myapp/files/916354762.mp4';

请，有人可以帮助我吗？

Answer 1

我遇到了同样的问题，并使用此本地插件解决了该问题：

https://ionicframework.com/docs/native/file-opener/

这是我的简短工作功能示例：

    playFile() {
    this.fileOpener.open("file:///storage/emulated/0/DCIM/Camera/VID_20190103_143837.mp4", "video/mp4")
      .then(() => console.log("File is opened"))
      .catch(e => console.log("Error opening file", e));
  }

Ionic3 Angular不允许从视频播放器（Android和iOS）访问本地视频文件