Angular не отображает фильм в формате mp4 - PullRequest
Новая
       88

Angular не отображает фильм в формате mp4

0 голосов
/ 01 августа 2020

В Angular 9 Я хочу отобразить 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;
  }

Путь к mov ie: 

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>

1 Ответ

0 голосов
/ 01 августа 2020

Пожалуйста, проверьте свой путь к видео, для отладки поместите видеофайл в папку ресурсов проекта. См. Ниже вспомогательные методы для приостановки воспроизведения, остановки и времени обновления вашего видео приложения. 

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