Media capture plugin get error when play captured video file

Ionic Framework ionic-v3
1

I want to add a video capture and play feature in my ionic 3 app. I use media capture plugin, the code is give as below. The app is build and run on Android platform, my phone is HUAWEI Mate 9. It seems the video is successfully recorded, but when I play it, I get err: Uncaught (in promise) DOMException: Failed to load because no supported source was found.
console log shows path and url are:

path:  file:///data/user/0/hello.app/files/VID_20200709_210743.mp4
url:  /data/user/0/hello.app/files/VID_20200709_210743.mp4

I don’t know what is the problem, could you please help?
.ts file

captureVideo(){
    let options: CaptureVideoOptions = {
      limit: 1,
      duration: 10
    };
    this.mediaCapture.captureVideo(options).then((res: MediaFile[]) =>{
      let capturedFile = res[0]
      console.log('my file: ', capturedFile);

      let fileName = capturedFile.name;
      let dir = capturedFile['localURL'].split('/');
      dir.pop()
      let fromDirectory = dir.join('/');
      let toDirectory = this.file.dataDirectory;

      this.file.copyFile(fromDirectory, fileName, toDirectory, fileName).then(res=>{
        this.storeMediaFiles({name: fileName, size: capturedFile.size});
      })
    })
  }

  play(myFile){
    console.log('play:', myFile);
    if(myFile.name.indexOf('.amr')>-1 || myFile.name.indexOf('.wav')>-1){
      const audioFile: MediaObject = this.media.create(myFile.localURL);
      audioFile.play();
    } else {
      let path = this.file.dataDirectory + myFile.name;
      console.log("path: ", path)
      let url = path.replace(/^file:\/\//,'')
      console.log("url: ", url)
      let video = this.myVideo.nativeElement;
      video.src = url;
      video.play()
    }
  }

  storeMediaFiles(files){
    console.log("store: ", files)
    this.storage.get(MEDIA_FILES_KEY).then(res =>{
      if(res){
        let arr = JSON.parse(res);
        arr = arr.concat(files)
        this.storage.set(MEDIA_FILES_KEY, JSON.stringify(arr))
      } else{
        this.storage.set(MEDIA_FILES_KEY, JSON.stringify(files))
      }
      this.mediaFiles = this.mediaFiles.concat(files)
    })
  }

.html

  <button ion-button full (click)="captureVideo()">Capture Video</button>

  <ion-list>
    <ion-item *ngFor="let file of mediaFiles" tappable (click)="play(file)" text-wrap>
      {{file.name}}
      <p>{{file.size / 1000 / 1000 | number}} MB</p>
    </ion-item>
  </ion-list>
  <video controls autoplay #myvideo style="width: 100%; height: 30%;"></video>
2

same issue for me
please suggest how to play video from local device