не удалось отобразить видео на странице, используя тег видео HTML

Question

Я создаю проект Angular js, в котором я вызываю API, и этот API дает мне список URL видео Youtube.Мне нужно отобразить эти видео на моей странице, чтобы, если я нажму кнопку воспроизведения, началось мое видео.

Я выбрал 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>

, но я получаю URL-адреса со второго тд, но тег видео не работает.Просто показывает кнопку воспроизведения, а не видео.

Можете ли вы исправить меня, если я делаю что-то не так.

Answer 1

Попробуйте

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

РЕДАКТИРОВАТЬ

Вам необходимо санировать URL как

 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.