Отображение нескольких видеороликов youtube на странице с использованием youtub iframe api angular 6

Здравствуйте, я использую Angular 6, и у меня есть компонент видео, в котором я инициализирую API iframe youtube и отображаю видео YouTube с определенным идентификатором видео (встроенный идентификатор)

вот мой videos.component.ts

  public YT: any;
  public player: any;
  public reframed: Boolean = false;

  constructor() { }

  ngOnInit() {
    this.init();
    window['onYouTubeIframeAPIReady'] = (e) => {
      this.YT = window['YT'];
      this.reframed = false;
      this.player = new window['YT'].Player('player', {
        videoId: 'z4JUm0Bq9AM',
      });
    };
  }

  init() {
    var tag = document.createElement('script');
    tag.src = 'https://www.youtube.com/iframe_api';
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }
}

Вот мой videos.component.html

<div class="width">
    <div id="player">
    </div>
</div>

все работает нормально !!

Здесь я хочу показать несколько видео на одной странице, где я буду получать идентификатор видео из базы данных. Итак, я пробовал это ... из другого компонента я получу идентификатор видео в виде массива строк. Я отправляю эти идентификаторы в качестве входного параметра для компонента videos.component.

    <div *ngFor="let video of topic._source.videos">
        <app-videos [video]='video'></app-videos>
    </div>

здесь видео - это встроенный идентификатор видео на YouTube.

теперь мой videos.component.ts

export class VideosComponent implements OnInit {

  @Input() video: string;

  public YT: any;
  public player: any;
  public reframed: Boolean = false;

  constructor() { }

  ngOnInit() {
    this.init();
    console.log(this.video)
    window['onYouTubeIframeAPIReady'] = (e) => {
      this.YT = window['YT'];
      this.reframed = false;
      this.player = new window['YT'].Player('player', {
        videoId: this.video,
      });
    };
  }

  init() {
    var tag = document.createElement('script');
    tag.src = 'https://www.youtube.com/iframe_api';
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }
}

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

Так что я на самом деле пытаюсь показать все видео. Я имею в виду все идентификаторы, которые я получаю из базы данных. Извините, если я делаю что-то в корне не так. пожалуйста, помогите мне. заранее спасибо

Если я правильно понял, _source.videos - это массив свойств, и вы можете увидеть только одно видео вместо трех частей вашего app-video, верно?

Jacopo Sciampi 10.09.2018 12:02

@JacopoSciampi да, это массив строк.

vamsi krishna 10.09.2018 12:25

Я не понимаю, вы передаете видео в качестве входа, а видео компонент не @Input(). Вы просто удалили его перед публикацией или как? К тому же такая отладка довольно сложна, можете ли вы предоставить плункер?

Jacopo Sciampi 10.09.2018 12:31

@JacopoSciampi есть оператор input () перед публичным YT: any;

vamsi krishna 11.09.2018 06:03

@JacopoSciampi я постараюсь предоставить плункер

vamsi krishna 11.09.2018 06:03
1
5
780
0

Другие вопросы по теме