Как я могу использовать события из youtube iframe Api на нескольких игроках - PullRequest
Новая
       72

Как я могу использовать события из youtube iframe Api на нескольких игроках

0 голосов
/ 18 июня 2020

Я нашел эту скрипку js с помощью youtube iframe api, чтобы определять, когда заканчивается видео

http://jsfiddle.net/jakecigar/8tgycb50/14/

Я хотел бы использовать этот 'onStateChange' на несколько игроков.

Я уже успешно добавил своих нескольких игроков, но не могу понять, как использовать на них события.

Заранее спасибо. 

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

var playerInfoList = [{
  id: 'player1',
  videoId: 'dOy7vPwEtCw'
}, {
  id: 'player2',
  videoId: 'QWtsV50_-p4'
}, {
  id: 'player3',
  videoId: 'y-JqH1M4Ya8'
}, {
  id: 'player4',
  videoId: 'gH7dMBcg-gE'
}, {
  id: 'player5',
  videoId: '7wL9NUZRZ4I'
}, {
  id: 'player6',
  videoId: 'S4R8HTIgHUU'
}];

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

  for (var i = 0; i < playerInfoList.length; i++) {
    var curplayer = createPlayer(playerInfoList[i]);
    players[i] = curplayer;
  }
}

var players = new Array();

function createPlayer(playerInfo) {
  return new YT.Player(playerInfo.id, {
    events: {

              'onStateChange': onPlayerStateChange
            },
    videoId: playerInfo.videoId,
    playerVars: {
      showinfo: 0,
    }
  });
}

</script>

<div class="wrapper">
    <div id="player1"></div>
    <div id="player2"></div>
    <div id="player3"></div>
</div>

<div class="wrapper">
    <div id="player4"></div>
    <div id="player5"></div>
    <div id="player6"></div>
</div>

1 Ответ

0 голосов
/ 18 июня 2020

Я придумал это решение. Не уверен, что это правильный путь, но он работает.

Сначала обновите функцию, которая создает игрока, добавляя событие: 

function createPlayer(playerInfo) {
  return new YT.Player(playerInfo.id, {
    events: { 
        'onStateChange': function(event) {
           onPlayerStateChange(event, playerInfo.id);
         }
     },
    videoId: playerInfo.videoId,
    playerVars: {
      showinfo: 0,
    }
  });
}

Затем функция события 

function onPlayerStateChange(event, player) {
    let playerId = document.getElementById('player');
}
...