Загрузка нескольких видеоплееров с помощью youtube api

Ответ 1

Так как функция onYouTubeIframeAPIReady должна вызываться только один раз, можно использовать следующий подход:

• инициализировать и сохранять информацию о видеоплеерах (ControlId,width,height,VideoId) в массиве

• вызов onYouTubeIframeAPIReady для создания всего видео игроки

Пример

var playerInfoList = [{id:'player',height:'390',width:'640',videoId:'M7lc1UVf-VE'},{id:'player1',height:'390',width:'640',videoId:'M7lc1UVf-VE'}];

      function onYouTubeIframeAPIReady() {
        if(typeof playerInfoList === 'undefined')
           return; 

        for(var i = 0; i < playerInfoList.length;i++) {
          var curplayer = createPlayer(playerInfoList[i]);
        }   
      }
      function createPlayer(playerInfo) {
          return new YT.Player(playerInfo.id, {
             height: playerInfo.height,
             width: playerInfo.width,
             videoId: playerInfo.videoId
          });
      }

Ответ 2

Первым параметром нового YT.Player должен быть идентификатор элемента HTML (например, DIV), который должен быть заменен iframe на видео. Когда вы используете "плеер" для обоих этих объектов, вы загружаете оба в один и тот же элемент.

<div id="ytplayer1"></div>
<div id="ytplayer2"></div>

<script>
  var player;
  var player2;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer1', {
      height: '390',
      width: '640',
      videoId: 'hdy78ehsjdi'
    });
    player2 = new YT.Player('ytplayer2', {
      height: '390',
      width: '640',
      videoId: '81hdjskilct'
    });
  }
</script>

Параметры функций описаны в документации API Youtube:
https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player (EDIT: изменено на правильную ссылку)

Ответ 3

Мне нужно было то же самое в React. Развернувшись на Вадиме, вы можете сделать что-то вроде следующего и добавить их к объекту, а затем создать игрока, если не знаете, как будет выглядеть массив игроков.

const YoutubeAPILoader = {
  _queue: [],
  _isLoaded: false,

  load: function (component) {
    // if the API is loaded just create the player
    if (this._isLoaded) {
      component._createPlayer()
    } else {
      this._queue.push(component)

      // load the Youtube API if this was the first component added
      if (this._queue.length === 1) {
        this._loadAPI()
      }
    }
  },

  _loadAPI: function () {
    // load the api however you like
    loadAPI('//youtube.com/player_api')

    window.onYouTubeIframeAPIReady = () => {
      this._isLoaded = true
      for (let i = this._queue.length; i--;) {
        this._queue[i]._createPlayer()
      }
      this._queue = []
    }
  }
}

Ответ 4

У меня была более широкая проблема, которая сводилась к этой же проблеме. Требования, которые у меня были, заключались в том, чтобы написать класс JS для управления одним или несколькими (количество может варьироваться от 1 до бесконечности). Бэкэнд-системой является ExpressionEngine (но это не имеет значения здесь). Основная цель состояла в том, чтобы создать платформу для аналитики, которая подталкивает отдельные данные к нашей платформе Adobe Analytics. Здесь показана только часть, которая дает игровой счет, его можно значительно расширить отсюда.

CMS позволяет редакторам создавать модули на странице с изображением видео. Одно видео на модуль. Каждый модуль в основном представляет собой раздел HTML, организованный через Bootstrap 3 (не относится к этому вопросу).

Соответствующий HTML выглядит следующим образом:

<div id="js_youTubeContainer_{innov_mod_ytplayer:id}" class="embed-responsive embed-responsive-16by9">
  <div id="js_youTubeFrame_{innov_mod_ytplayer:id}" class="embed-responsive-item"></div>
</div>