Ionic V4 playing local video broken?

Ionic Framework
1

I’m upgrading an app from V3 to V4-beta11. This app (V3) downloaded video files and played them locally using the following html code:

<video *ngIf="showVid" controls="controls" controlsList="nodownload">
  <source [src]="videoURL" type="video/mp4">
</video>

I change the contents of videoURL from an internet address to a local file address, and toggle ‘showVid’ to reload the contents of the video player.

This worked in V3, and the internet address works in V4, but I can’t seem to get it to play local files.

I download the file using the file-transfer plugin with this code:

  downloadfile(){
      let url = this.server + this.filename;
        const fileTransfer: FileTransferObject = this.filexfer.create();
        fileTransfer.download(url, this.path + this.filename).then((entry) => {
         if(this.debug){
          console.log('fileTransfer.download data:' + JSON.stringify(entry));
           }
         //this.getFileList();
       }, (err) => {
         // handle error
         console.log("downloadfile() error: "+JSON.stringify(err));
       });
  }

where this.path is from this code:

this.path = this.fileCtrl.dataDirectory + "files/";

where fileCtrl is the File plugin.

finally… the string that is put into the videoURL file to play it locally is the following:
on mobile:
/var/mobile/Containers/Data/Application/C8B6F8F7-3448-4942-9A6d-4F2769AD94B5/Library/NoCloud/files/10thRoutine-oldCam_1.mp4#0.1

and on the xcode simulator is:
/Users/MyUserName/Library/Developer/CoreSimulator/Devices/B580439D-etc etc etc-70F3/data/Containers/Data/Application/9A0429-etc etc etc-4BDB/Library/NoCloud/files/10thRoutine-oldCam_1#t=0.1

and when streaming from the web is:
http://myIpsAdress/media/10thRoutine-oldCam_1#t=0.1

the http address works in the video player, but the local file path does not.

This worked on V3, but doesn’t in V4… but I’m really at a loss as to how to troubleshoot this. I’m sure the file is at that path since I can see it using

getFileList()
 {
  this.fileCtrl.listDir(this.path, '').then(
    (files: any) => 
    { this.fileList = files;}
  )}

and even get the correct file size using:

  getFileSize(fileUri) {
    return new Promise(function(resolve, reject) {    
        window['resolveLocalFileSystemURL'](fileUri, function(fileEntry:any) {
            fileEntry.file(function(fileObj) {
                resolve(fileObj.size);
            },
            function(err){   });
        }, 
        function(err){ reject(err);});
    });
}

Any help would be greatly appreciated… including other ideas for troubleshooting.

UPDATE: I manually put a video file in the assets folder, and loaded this.videoURL with “assets/videos/10thRoutine-oldCam_1.mp4” and it worked… so it looks like, maybe, something changed with how V4 interacts with the File plugin?

UPDATE2: in order to troubleshoot this further, I switched to downloading a photo and trying to display it in an tag. I put the code here: Ionic V4 download and show photo with File Plugin not working

2

Answering my own question here. I’ll repeat what I put for the photo plugin question linked to at the bottom of the original post:

What it boils down to is this,
When you want to download a file to the phone, you do it with these two paths, one for downloading the file, and the other for displaying the downloaded file:

    this.downloadPath = this.file.dataDirectory + "filename.jpg"
    this.showFilePath = normalizeURL(this.file.dataDirectory + "filename.jpg")

where normalizeURL is imported with: import { normalizeURL } from “ionic-angular”;

On the iPhone simulator, the download path starts looks like this:
file:///Users/myUserName/Library/etc etc etc

and the display file path looks like:
http://localhost:8080/_file_ /Users/myUserName/Library/etc etc etc

more info here: https://ionicframework.com/docs/wkwebview/

So, therefore the above TS file would look like this:

import { normalizeURL } from 'ionic-angular'

downloadfile() {
    let url = this.server + this.filename;
    const fileTransfer: FileTransferObject = this.filexfer.create();
    fileTransfer.download(url, this.path + this.filename).then((entry) => {
      console.log('fileTransfer.download data:' + JSON.stringify(entry));
    }, (err) => {
      console.log("downloadfile() error: " + JSON.stringify(err));
    });
  }

  loadVid(file) {
    console.log("loadVid")
    this.message = "loadVid"
    this.videoURL = normalizeURL(this.path + file) + "#t=0.1";
  }

and the html would be:

    <video *ngIf="showVid">
      <source [src]="videoURL" type="video/mp4">
    </video>