Как воспроизводить видео в приложении Angular? Мой код не работает

Question

У меня есть приложение angular, и я хочу отобразить список видео, URL-адрес которых исходит от службы Odata.

Видео не отображается, но есть элементы управления для видео. В результате отображается только черный фон. Это HTML, который я использую.

`

<div *ngFor="let video of videos" class="videos">
    <video class="videos" width="305" controls>
        <source src="{{video.Url1}}" alt="video" type="video/mp4">
        Your browser does not support HTML5 video.
    </video>
</div>

`

Служба корректно возвращает URL-адрес видео, но я не могу понять, что я делаю неправильно , Пожалуйста, помогите

Я приложил пример того, как отображаются видео

Answer 1

Предполагая, что вы получаете ответ, как показано ниже

videos=[
    {Url1:"anyVideo_1.mp4"},
    {Url2:"anyVideo_2.mp4"}
  ];

измените ваш html, как показано ниже:

<div *ngFor="let video of videos; let i = index;" class="videos">
  <video class="videos" width="305" controls>
      <source [src]="video['Url' + (i+1)]" alt="video" type="video/mp4">
      Your browser does not support HTML5 video.
  </video>
</div>

лучший способ поставить с ожидаемым ответом:

videos=[
    {Url:"anyVideo_1.mp4"},
    {Url:"anyVideo_2.mp4"}
  ];

<div *ngFor="let video of videos;" class="videos">
  <video class="videos" width="305" controls>
      <source src="{{video.Url}}" alt="video" type="video/mp4">
      Your browser does not support HTML5 video.
  </video>
</div>

с вашим примером ответа, как показано ниже, добавив https: // к вашей ссылке "http://youtube.com/watch?v=9Q2DOSyt3i0", html должно работать:

  videos = [
    { IdService: "1922946358", IdVideo: 1525836411, Link1: "http://youtu.be/LlmwfRjkT9c", Link2: "https://youtube.com/watch?v=9Q2DOSyt3i0" }
  ];

изменить ваш html как показано ниже:

 <div *ngFor="let video of videos;" class="videos">
  <video class="videos" width="305" controls>
      <source src="{{video.Link1}}" alt="video" type="video/mp4">
      Your browser does not support HTML5 video.
  </video>
  <video class="videos" width="305" controls>
    <source src="{{video.Link2}}" alt="video" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div>

иначе вы можете увидеть ниже предупреждение CORB на консоли:

Повар ie, связанный с межсайтовым ресурсом в http://youtube.com/ было установлено без атрибута SameSite. Он был заблокирован, так как Chrome теперь доставляет файлы cookie только с межсайтовыми запросами, если они установлены с SameSite=None и Secure. Вы можете просмотреть файлы cookie в инструментах разработчика в разделе «Приложения»> «Хранилище»> «Файлы cookie» и получить более подробную информацию в https://www.chromestatus.com/feature/5088147346030592 и https://www.chromestatus.com/feature/5633521622188032.

, для которых нужно изменить некоторые заголовки запроса: Блокировка чтения из разных источников (CORB)