Set path to video dependent on it's existence in persistent device storage

Ionic Framework ionic-v3
#1

If the file already exists in device persistent storage, I would like to set “finalVideoSource” to device path.
Otherwise it should be set to remote path.
I have problems setting the varibale’s value from within File.checkFile and then using it as part of <source src="..." > in video tag.

Can anyone help?

In .ts constructor:

if (this.platform.is('ios')) {
         this.storageDirectory = cordova.file.documentsDirectory;
}

File.checkFile(this.storageDirectory, this.selectedItem.src)
            .then((data) => {
              this.finalVideoSource = this.storageDirectory;
              return data;
            })
            .catch((err) => {
              this.finalVideoSource = 'https://www.mywebsite.com/path-to-video/';
              return false;
            });

In Template:
<source src="{{finalVideoSource+selectedItem.src}}" type='video/mp4' id="source" />

#2

Any errors…? Anyway here’s a few ideas

  1. Try with [src]="finalVideoSource+selectedItem.src"
  2. Try DomSanitizer to sanitize the url (SafeResourceURL, I believe)
  3. Is mywebsite.com allowed in your config.xml? In case it’s on the device it doesn’t work
#3

The created path is good, I can display it in a div below the video container, but it seems to be a timing problem due tue the async. If I set the path statically like

if (this.platform.is('ios')) {
this.storageDirectory = cordova.file.documentsDirectory;
this.finalVideoSource = this.storageDirectory;
}

or

if (this.platform.is('ios')) {
this.storageDirectory = cordova.file.documentsDirectory;
this.finalVideoSource = 'https://www.mywebsite.com/path-to-video/';
}

it works.

#4

Hence why I listed no. 1 previously, thought that could do it, but it’s hard to say without any error information. Maybe you also shouldn’t display the video until the promise has completed, just with something like <video *ngIf="promiseCompleted">

#5

I think you saved my day(s).
<video controls class="video-content" id="video" width="100%" height="310" poster="{{selectedItem.poster}}" *ngIf="finalVideoSource">

…finally did the trick. Thank you!

1 Like