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

Posted 2023-03-13

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

【英文标题】：Ionic3 Angular not allows to access local video file from video player (Android & iOS)

【发布时间】：2019-03-23 16:15:53

【问题描述】：

我在使用 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）并且应用程序死了。 在config.xml 文件上设置allow-origin file://*/。

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';

拜托，谁能帮帮我？

【参考方案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));