capacitor: bug: Serving local videos occasionally fails on Android

Bug Report

Capacitor Version

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 4.4.0
  @capacitor/core: 4.4.0
  @capacitor/android: 4.4.0
  @capacitor/ios: 4.4.0

Installed Dependencies:

  @capacitor/cli: 3.5.1
  @capacitor/core: 3.5.1
  @capacitor/android: 3.5.1
  @capacitor/ios: 3.5.1

[success] iOS looking great! 👌
[success] Android looking great! 👌

Platform(s)

Android

Current Behavior

On iOS : the video plays without a problem. On Android : the video plays but we get a network error from time to time that stop the video and “crashes” the player (we have to change page and come back to replay it again). Sometimes the video won’t play at all.

GET http://localhost/_capacitor_file_/data/user/0/com.myapp/files/videoXYZ.mp4 net::ERR_FAILED

Expected Behavior

The video play thoroughly on android.

Code Reproduction

We use a html5 video player in an Ionic/Angular app to play local video like such:

<video *ngIf="src" #video  disablePictureInPicture playsinline preload="auto" [src]="src"></video>

Where srcis set using an input : Capacitor.convertFileSrc('video/videoXYZ.mp4')

@Component({
  selector: 'video-player',
  templateUrl: './video-player.component.html',
  styleUrls: ['./video-player.component.scss'],
})
export class VideoPlayerComponent implements OnInit, AfterViewInit {

    @ViewChild('video', {static: false}) videoRef: ElementRef;

    @Input() src: string;

    // ...
}

Other Technical Details

We can have multiple videos on the same page. And the bug seems to happen more often when we seek through multiple videos quickly.

npm --version output: 8.7.0

node --version output: v14.19.0