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来播放或暂停视频，因为video标签已经具有这些功能。

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

将mp4视频作为JSON文件从素材资源/视频传递后，无法在Angular中播放mp4视频

2 个答案: