代码之家 › 专栏 › 技术社区 › taiwo sunday

从assets/videos将mp4视频作为json文件传递后,无法以角度播放它

video typescript angular

0

taiwo sunday · 技术社区 · 7 年前

这是我将数据显示到视图的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"
     }];

2 回复 | 直到 7 年前

1

taiwo sunday 7 年前

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

2

0

Joana Mendes 7 年前

我想你忘了在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();}