时间戳

首页 > 解决方案 > 如何在多个播放器上使用来自 youtube iframe Api 的事件

youtube-iframe-api - 如何在多个播放器上使用来自 youtube iframe Api 的事件

问题描述

我发现这个小提琴 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>

标签： youtube-iframe-api

解决方案

我想出了这个解决方案。不确定这是否是正确的方法，但它有效。

首先更新创建玩家添加事件的函数：

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');
}

推荐阅读