多个带有自定义播放按钮的YouTube嵌入视频

Question

我正在尝试在页面上嵌入多个YouTube视频，每个视频都有自己的叠加和播放按钮，单击该按钮时会隐藏相关的叠加层并播放视频。

我可以让它适用于单个视频，但是当我尝试添加更多内容并循环访问视频时，onPlayerReady 函数似乎没有被调用。

https://codepen.io/anon/pen/mqeZgX

这是我的JavaScript

// Inject YouTube API script
const tag = document.createElement('script');
tag.src = '//www.youtube.com/player_api';
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
const players = document.querySelectorAll('.js-video-embed > iframe');
const playButtons = document.querySelectorAll('.video__button');
const overlays = document.querySelectorAll('.video__overlay');
window.onYouTubePlayerAPIReady = () => {
  for (var i = 0; i < players.length; i++) {
    new YT.Player(players[i], {
      events: {
        'onReady': onPlayerReady
      },
    });
  }
};
function onPlayerReady() {
  for (var i = 0; i < players.length; i++) {
    // bind events
    playButtons[i].addEventListener('click', () => {
      players[i].playVideo();
      overlays[i].style.display = 'none';
    });
  }
}

提前感谢您可能提供的任何指示！

Answer 1

我

今天遇到了同样的问题，你的代码补充了我所拥有的，所以如果你仍然阅读这个老问题，谢谢你。我会为遇到这种情况的人发布它。

修复代码的 2 件事，

首先是YT。玩家需要一个 ID，因此您无法选择文档中的所有类并将其插入。因此，我选择了文档中以视频开头的所有 ID。该文档具有#video1和#video2。然后，您可以获取 ID 并将其放在 YT 中。播放器作为参数。

其次，当绑定事件侦听器时，函数.playVideo()在变量players上调用，但这只是 iframe。它需要在 YT 上调用。较早创建的播放器。这就是为什么我还将变量名称players更新为 videos .new YT.Player存储在数组players中，然后用于调用函数.playVideo()

更新的代码：

const videos = document.querySelectorAll('iframe[id^="video"]')
let player;
let players = []
const playButtons = document.querySelectorAll('.video__button');
window.onYouTubePlayerAPIReady = () => {
    for (let i = 0; i < videos.length; i++) {
        player = new YT.Player(videos[i].id, {
            events: {
                'onReady': onPlayerReady
            },
        });
        players.push(player)
    }
};
function onPlayerReady() {
    for (let i = 0; i < videos.length; i++) {
        // bind events
        playButtons[i].addEventListener('click', () => {
            players[i].playVideo();
        });
    }
}