Angular won't display mp4 movie

Question

In Angular 9 I want to display mp4:

<video controls (click)="toggleVideo()" preload="none" *ngIf="post.moviePath != null" #videoPlayer>
        <source [src]="getMovieSanitazePath(post.moviePath)" type="video/*" />
        Browser not supported
      </video>

In component.ts:

toggleVideo() {
    this.videoplayer.nativeElement.play();
}

getMovieSanitazePath(moviePath) {
    
    var safeUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(environment.apiUrl + moviePath);
    return safeUrl;
  }

The path of the movie is:

http://localhost:20677/media/movies/uploads\fbf8152f-ccea-45a2-b9a9-150cd4c421a5\VID_20200713_111118_2f7d.mp4

When I past above path to the browser, it's play without problem. But in html it won't:

<video controls="" preload="none"><source type="video/*" src="http://localhost:20677/media/movies/uploads\fbf8152f-ccea-45a2-b9a9-150cd4c421a5\VID_20200713_111118_2f7d.mp4"> Browser not supported </video>

Answer 1

Kindly check your video Path , for debugging purpose kindly place video file inside asset folder of Project, Refer below helper methods for play pause, stop and update time of your video app

this.video = this.videoplayer.nativeElement;
toggleVideo() {
  
  this.video.paused? this.video.play(): this.video.pause();

}

 updateProgress(e) {
// Progress can be your time showing html elemnt 
  this.progress.value = (this.video.currentTime/this.video.duration) *100;
  let min = Math.floor(this.video.currentTime/60)
  min= min<10? `0${min}`:min ;
  let sec= Math.floor(this.video.currentTime%60);
  sec= sec<10? `0${sec}`:sec ;
 //  timestamp.innerHTML =`${min}:${sec}`

}

setVideoProgress(e) {
 this.video.currentTime = (+this.progress.value * this.video.duration)/100;
}

 stopVideo(e) {
  this.video.currentTime=0;
  this.video.pause();
  
}


this.video.addEventListener('click',toggleVideoStatus);
this.video.addEventListener('pause',updatePlayIcon)
// this.video.addEventListener('play',updatePlayIcon)
this.video.addEventListener('timeupdate',updateProgress);