Angular 不会显示 mp4 电影

Question

在Angular9 我要显示mp4:

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

在component.ts中：

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

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

影片路径为：

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

当我通过上述路径进入浏览器时，播放没有问题。但在 html 中不会：

<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

请检查您的视频路径，出于调试目的，请将视频文件放在项目的资产文件夹中，请参考以下辅助方法了解视频应用的播放暂停、停止和更新时间

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);

Angular 不会显示 mp4 电影

Angular won't display mp4 movie

html

video

mp4

angular