无法使用 HTML 的视频标签在页面上显示视频答案

【问题标题】：failed to display the video on page using video tag of HTML无法使用 HTML 的视频标签在页面上显示视频
【发布时间】：2018-06-11 14:04:44
【问题描述】：

我正在构建一个 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，但视频标签不起作用。只显示播放按钮，而不是视频。

如果我做错了什么，你能纠正我吗？

【问题讨论】：

使用let fetchApi以外的其他名称
我这样做了，同样的问题。

标签： html angular angular5

【解决方案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

【讨论】：

也试过了。同样的问题是@Sajeetharan
你能把视频网址发一下吗
我正在使用组件来获取所有 JSON，如下所示：ngOnInit() { const scope = this; this.userService.getUsers() .subscribe( data => { this.fetchApi =data; console.log(this.fetchApi); //this.fetchApi = data; }); }; 我应该如何以及在何处使用 this.safeSrc = this.sanitizer.bypassSecurityTrustResourceUrl("https://www.youtube.com/embed/c9F5kMUfFKk"); 我正在处理 URL 数组。
只需分配 this.fetchApi.video_location
不明白。能给我举个例子吗？我的组件代码是：export class FetchApiComponent implements OnInit { fetchApi: FetchApi; constructor(private router: Router, private userService: UserService) { } ngOnInit() { const scope = this; this.userService.getUsers() .subscribe( data => { this.fetchApi =data; console.log(this.fetchApi); }); }; }

【解决方案2】：

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

你试过用 ng-src 代替 src。

【讨论】：

我试过<iframe width="854" height="480" src="https://www.youtube.com/embed/{{fetchApi.video_id| json}}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>，但我仍然面临同样的问题