Why <video> tag in ionic 4 sometimes working, sometimes dont

Is this an issue of “video” tag in ionic 4 or im just doing it wrong ?

I save my video using “file plugin”, And its always behave weird. The video it self is fully working and not broken. But, the video is working randomly even with live reload.

Here is my code:

home.page.html

<video (loadeddata)="slide(i, i1, content.type)" [src]="getUrl(path+content.name)" [ngStyle]="slidedivvideo(x.oriTinggi, x.oriLebar)" #videoPlayer *ngIf="content.type == 'video'" muted>

home.page.ts

ionViewDidEnter(){
    this.platform.ready().then(() => {
        this.path = this.file.externalApplicationStorageDirectory+'files/';
    });
}



getUrl(data){
  // data = file:////storage/emulated/0/.....

  data = this.webview.convertFileSrc(data);

  // data = http://localhost/_app_file_/storage/emulated/0/...
  return data;
}

“Sometimes working” things are 95% of the time race conditions, where you are unwittingly depending on the order of execution of asynchronous operations. These are hard to diagnose in general, and especially hard to diagnose without having a complete MCVE. Small snippets of code you think relevant are rarely sufficient.

Personally, I have found that adopting a functional programming style drastically reduces the potential for creating these sorts of problems, so inside subscriptions, then clauses, and other assorted arrow functions, make an effort to avoid either relying on or modifying external state - this means get rid of as many references to this inside them as you can. Make functions communicate only through their arguments and return value.

Naturally, a big exception to this is the idiom of:

thingies: Thingy[] = [];
constructor(private thingier: ThingyService) {
  thingier.watchRelevantThingies().subscribe(thingies => this.thingies = thingies);
}

…but the justification for getting away with this one (at least that I tell myself) is that the assignment to this.thingies is just part of the pipeline, to be continued by Angular’s change detection goosing the template and causing it to rerender itself based on the new value of thingies. All other code that I write in the controller must operate perfectly (as must all template expressions) regardless of what is in this.thingies, as long as it’s an array, and yes that means even if it’s an empty array.

1 Like

I got the link from request

async onload(){

  let url = this.update;
  await this.http.get(url)
  .subscribe((result:any) => {
    this.content = result //this_is_array
  }, error => {
    console.log(error.message);
  });
}

But somehow thats always giving me this error. Even i hardcode it
Screen Shot 2020-09-02 at 17.41.35
from

[src]="getUrl(path+content.name)"

to

src="http://localhost/_app_file_/storage/emulated/0/Android/data/io.ionic.starter/files/M1598481941574T3092.mp4"

But the problem is still exist. The weird thing is the error sometimes clear and working normally.
Is there any plugin npm like “video” tag does ?

use https://github.com/nchutchind/cordova-plugin-streaming-media
This plugin allows you to stream audio and video in a fullscreen, native player on iOS and Android.

Is the URL that you are using for the http call a local path or api that you are hitting? If it is an api, what code are you using to ensure the video actually exists on the device?

Where is the code that writes the video files to storage?

Your picture above looks as though your code is looking in two different places for one file. Can you post this code?

Is it support to play video inside the div ? Because i need to make dynamic layout and the video is inside the layout.

The flow is. My apps is checking to the server, are there any new videos available -> My apps downloading the video to local (file://emulated/0/android/com.blablabla/…/…) -> download finish -> saving video name and path to localStorage() -> and then showing to html (since ionic 4 doesnt support file://… to show, i need to convert to http:localhost/app_file/… using webview plugin).

what do you mean about “writes the video files” ?

the code about how this video is running is in my post, what else do you need ? so i can provide to you.

You explained what I was asking when I wrote “write the files.” Able to post the markup and code behind?

async download(url, name){

    let path = this.file.externalApplicationStorageDirectory+'files/';
    const transfer: FileTransferObject = this.transfer.create();
      
    transfer.onProgress((progressEvent) => {

      if(progressEvent.loaded == progressEvent.total){

        this.queue_download.splice(0,1);

        if(this.queue_download.length == 0){
          //ga ada download lagi
          this.reset();
          this.show              = false;
          this.show_layout       = this.layout;
          this.show_main_content = this.main_content;
            
          setTimeout(() => {
            this.show = true;
          }, 1000);
        }else{
          var queue = this.queue_download[0];
          this.download(queue.url, queue.name);
        }
          
      }
    });

    await transfer.download(url, path + name).then(entry => {
      console.log('sukses===============================');

    }, (err) => {
      console.log(err);
    });
  }

This is the code how i write the video into a local device storage

I got this error when i play the video using promise. And also i try to input src programatically using :

this.videoplayer.toArray()[number].nativeElement.src = this.getUrl(this.path + name_content);

Then i load and play the video using promise

this.videoplayer.toArray()[number].nativeElement.load();
this.videoplayer.toArray()[number].nativeElement.play().then(res => {
   console.log('sukses');
}).catch(error => {
   console.log(error);
});;

The output error :
Screen Shot 2020-09-03 at 07.59.21

Please help me!