Невозможно воспроизвести MP4 видео в Angular после передачи его в виде файлов JSON из ресурсов / видео

Question

Это мой HTML-шаблон, в котором я отображаю данные для просмотра:

<mat-grid-list cols="2" rowHeight="550px">
<mat-grid-tile *ngFor='let video of videos'>
<video controls (click)="toggleVideo()" #videoPlayer width="640" height="400" allow="autoplay">
<source src="{{video.videoUrl}}" type="video/mp4" />
  Browser not supported
</video>
    <mat-grid-tile-header>
    {{ video.pageTitle }}
    </mat-grid-tile-header>
    <mat-grid-tile-footer style="background-color: black">
     <span>Posted on -  {{ video.postDate }}</span>
    </mat-grid-tile-footer>
  </mat-grid-tile>
</mat-grid-list>

Это мой компонент TS, в котором я решаю воспроизвести видео или приостановить видео:

@ViewChild('videoplayer') private videoplayer: any;
toggleVideo(event: any) {
    this.videoplayer.nativeElement.play();
    // this.videoplayer.nativeElement.pause();}

Это файл JSON, который я передаю шаблону для представления:

const posts =
 [
     {
       videoId: "kode5476",
       pageTitle: "The man of my dream",
       postDate: "Mar 18, 2019",
       videoUrl: "../src/assets/videos/theweekend.mp4"

     },
     {
       videoId: "jkde5498",
       pageTitle: "The woman who makes the money",
       postDate: "June 23, 2018",
       videoUrl: "../src/assets/videos/daniel.mp4"
     },
     {
       videoId: "jkde`enter code here`5498",
       pageTitle: "The woman who makes the money",
       postDate: "November 17, 2000",
       videoUrl: "../src/assets/videos/theweekend.mp4"
     }];

Answer 1

Я наконец-то решил это через 5 дней, пытаясь разными методами.Проблема заключалась в том, что мои видео размещались в ресурсах через папку src, а не на прямые ссылки на папку ресурсов.Поэтому я, наконец, сделал это так, и все заработало нормально. Поэтому мне пришлось отредактировать файл JSON, чтобы он выглядел так:

 const posts = [
{
  videoId: "fade3536",
  pageTitle: "A woman who build her home",
  postDate: "June 18, 2017",
  videoUrl: "assets/videos/daniel.mp4",
  Type: "video/mp4"

},
 {
   videoId: "kode5476",
   pageTitle: "The man of my dream",
   postDate: "Mar 18, 2019",
   videoUrl: "assets/videos/theweekend.mp4",
   Type: "video/mp4"

 },
   {
   videoId: "jkde5498",
   pageTitle: "The woman who makes the money",
   postDate: "June 23, 2018",
   videoUrl: "assets/videos/twws.mp4",
   Type: "video/mp4"
   },
    {
      videoId: "jkde5498",
      pageTitle: "The woman who makes the money",
      postDate: "November 17, 2000",
      videoUrl: "assets/videos/daniel.mp4",
      Type: "video/mp4"
    }

];

Мне не нужно было добавлятьnativeElement для воспроизведения или приостановки видео, поскольку тег видео уже имеет эти функции.

Answer 2

Я думаю, вы забыли сослаться на элемент видео в компоненте ts

Вместо

@ViewChild('videoplayer') private videoplayer: any; toggleVideo(event: any) { this.videoplayer.nativeElement.play(); // this.videoplayer.nativeElement.pause();}

Попробуйте

@ViewChild('videoplayer') private videoplayer: ElementRef; toggleVideo(event: any) { this.videoplayer.nativeElement.play(); // this.videoplayer.nativeElement.pause();}