Question

我正在构建一个Angular js项目，我正在调用API，而API正在为我提供Youtube视频的URL列表。我需要在我的页面上显示这些视频，这样如果我点击播放按钮，我的视频就会开始播放。

我已经获取了URL，我正在尝试使用*ngFor来迭代我得到的数组。我的HTML代码在

下面

   <tr *ngFor="let fetchApi of fetchApi.data.featured">
        <td ></td>
        <td> {{fetchApi.id | json}} </td>
       <td> {{fetchApi.video_id| json}} </td>
       <td><video src="{{fetchApi.video_location}}" controls></video></td>
   </tr>

但是我从第二个td获取了URL，但视频标记无效。只显示播放按钮，而不是视频。

如果我做错了，你能否纠正我。

Answer 1

尝试

<video width="800" [src] = "fetchApi?.video_location" controls>
    Your browser does not support HTML5 video.
</video>

修改

您需要清理网址，

this.safeSrc = this.sanitizer.bypassSecurityTrustResourceUrl("https://www.youtube.com/embed/c9F5kMUfFKk");

和相应的模板，

<iframe [class.thumbnail]="thumbnail" [src]="safeSrc" width="560" height="315" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<强> DEMO
顺便说一句，谢谢你提出这项具有挑战性的任务：P

Answer 2

<video ng-src="{{fetchApi.video_location}}" controls></video>

您是否尝试过ng-src而不是src。

无法使用HTML的视频标记在页面上显示视频

2 个答案: