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

debugcn 发表于 Dev

星期日

这是我的 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"
     }];

星期日

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。