Storing video locally and embed into view


I am downloading a video from server as blob and storing it with capacitor.
So far this works, but i cant insert the locally file path in view, it cant find the source (but i can see the file via dev tools) or if i want to embed it via file:/// it will not allow to embed that.

My steps:

  1., null, { responseType: ‘blob’ }).subscribe(…
  2. Blob response to text:
    const reader = new FileReader();
    reader.addEventListener(‘loadend’, (e: any) => {
    const text = e.srcElement.result;
    this.fileWrite(‘video.mp4’, text);
  3. Filesystem.writeFile({ path: ‘video.mp4’, data: filedata, directory: FilesystemDirectory.Data })…
  4. Filesystem.getUri({ path: ‘video.mp4’, directory: FilesystemDirectory.Data })…
  5. Set Capacitor.convertFileSrc(‘file://’ + res.uri) as video source (while res.uri = /DATA/video.mp4)

What am i doing wrong?

Thanks in advance!
Kind regards,

1 Like


1 Like

Doesnt really help at all and most of these steps i already mentioned.

I get stuck on inserting the video als video source:

1 Like

Have you tried passing the blob to the src attribute as a base64 encoded string? I ran a few test and it should work fine.