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

【问题标题】：Multiple YouTube embed videos with custom play button多个带有自定义播放按钮的 YouTube 嵌入视频
【发布时间】：2017-11-02 16:24:02
【问题描述】：

我正在尝试在页面上嵌入多个 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';
    });
  }
}

提前感谢您提供的任何指点！

【问题讨论】：

基于此thread，确保 iframe src URL 末尾有?enablejsapi=1。在link 中还指出，onPlayerReady 不起作用的原因是 iframe 缺少一个属性：enablejsapi="1"，并且在 YouTube 视频 url 中也缺少?enablejsapi=1。您也可以参考这篇 SO 帖子：@987654324 @

标签： javascript youtube-api

【解决方案1】：

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

修复代码的两件事，

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

其次，在绑定 EventListener 时，函数 .playVideo() 在变量 players 上被调用，但这只是 iframe。它需要在之前创建的 YT.Player 上调用。这就是为什么我还将变量名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();
        });
    }
}

【讨论】：