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

Question

我有一个关于 Ionic 3 的问题（这似乎很难，我搜索了很多但没有找到任何可行的解决方案）。

问题摘要

• 尝试访问本地视频文件：'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';

拜托，有人可以帮助我吗？

标签： angulartypescriptionic-frameworkionic3videogular

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));
  }