修正点击按钮 3 时视频不播放的问题

Question

如何调试和修复这个问题？

我发现代码非常难以调试。

如何在代码中解决这个问题？

我希望代码能够按照演示代码中的方式工作：https ://jsfiddle.net/awwt6u37/

这data-id适用于哪里：

<button class="playSingle2 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>

添加下面给出的答案代码后，如何解决代码中当前存在的问题？

演示代码中的行为：https://jsfiddle.net/awwt6u37/

单击<button> #3时，此处会显示正确的视频。

<div class="playButtonContainer with-curtain ">
  <button class="playSingle0 cover" data-container="play1"></button>
  <button class="playSingle1 cover" data-container="play1"></button>
  <button class="playSingle2 cover" data-container="play1" data-id="-Xgi_way56U"></button>
</div>

function findPlayers() {
    const buttons = document.querySelectorAll(".cover");
    const wrapper = document.querySelector(".wrap");
    buttons.forEach(function addToPlayers(button) {
      players.push({
        "cover": button,
        "wrapper": wrapper
      });
    });
  }

for (let i = 0; i < 3; i++) {
    players.add(".playSingle" + i, (playerVarsList[i] || {}));
  }

应该与这里的代码以相同的方式工作，但有 3 个按钮的编写方式不同。https://jsfiddle.net/7xz6gw1b/

这里需要写什么不同的东西？

function findPlayers() {
    const allCovers = document.querySelectorAll(".cover");
    const allWrappers = document.querySelectorAll(".wrap");
    allCovers.forEach(function addToPlayers(cover, index) {
      players.push({
        "cover": cover,
        "wrapper": (index < allWrappers.length) ? allWrappers[index] : allWrappers[allWrappers.length - 1]
      });
    });
  }

//to add the player to all the play buttons
  let totalPlayButtons = document.querySelectorAll('[data-container="play1"]').length;

  //looping over all the play buttons and adding player to that
  for (let i = 0; i < totalPlayButtons; i++) {
    players.add(".playSingle" + i, (playerVarsList[i % (Object.keys(playerVarsList).length)] || {}));
  }

在演示代码中，单击没有给出播放列表的<button> #3 ，而是从其播放列表中播放视频data-id=""

要重现该问题：

这是我现在正在处理的带有3 个按钮的代码： https ://jsfiddle.net/3htaxrse/

当我点击<button> #3时

我看到了 #1的视频

0: {
      playerVars: {
        playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
      }
    }, // Button 1

相反，这是应该观看的视频。data-id="-Xgi_way56U"

<div class="playButtonContainer with-curtain ">
  <button class="playSingle0 cover" data-container="play1"></button>
  <button class="playSingle1 cover" data-container="play1"></button>
  <button class="playSingle2 cover" data-container="play1" data-id="-Xgi_way56U"></button>
</div>

这就是我正在处理的代码中试图解决的问题。

如何调整我正在编写的带有3 个按钮的代码，以便播放正确的视频？https://jsfiddle.net/7xz6gw1b/

有没有办法查看演示代码是如何编写的，以便能够对其他代码进行适当的更改？

https://jsfiddle.net/7xz6gw1b/

因为在演示代码中它应该按预期工作。

演示代码： https: //jsfiddle.net/awwt6u37/

查看演示代码有帮助吗？

因为它在那里工作。

尝试修复：

替换这一行：

players.add(".playSingle" + i, (playerVarsList[i % (Object.keys(playerVarsList).length)] || {}));

有了这一行：

players.add(".playSingle" + i, (playerVarsList[i] || {}));

不工作。

我刚刚尝试过。

当我这样做时，它会破坏按钮 3：https ://jsfiddle.net/vpjrsb9z/

单击按钮 3 时根本不显示视频。

也许几乎已经修复了？

第一个视频不再被选择，这很好。

Answer 1

发生问题的原因是在您的源代码中，有多个带有“video”类的 div。该代码使用带有“video”类的 div 将视频 ID 从按钮传输到实际的视频播放器。

因为课程视频有多个 div，所以这是行不通的。

一种解决方法是删除第一个类为“play2”的 div 块以及该 div 中包含的所有内容。但是，您可能希望能够在同一页面上设置视频播放器的多个独立实例，因此我们需要修复代码，以便使用具有“Video”类的正确 div。

为此，更改按钮的单击事件处理程序的实现。

从：

const myVideo = document.querySelector('.video');

document.querySelectorAll('button.cover').forEach(function(button) {
  button.addEventListener('click', function(event) {
    myVideo.dataset.id = event.currentTarget.dataset.id;
  });
});

到：

document.querySelectorAll('button.cover').forEach(function(button) {
  button.addEventListener('click', function(event) {
    let container=event.currentTarget.dataset.container;
    let myVideo = document.querySelector('.' + container + ' .video');
    myVideo.dataset.id = event.currentTarget.dataset.id;
  });
});

我们首先从被单击的按钮中获取“容器”。然后我们搜索具有“video”类的 div，该 div 位于具有该容器类的另一个 div 内。

请注意，您不再需要全局myvideo变量。

还将代码更改onYouTubeIframeAPIReady为原始状态：

//to add the player to all the play buttons
let totalPlayButtons = document.querySelectorAll('[data-container="play1"]').length;

//looping over all the play buttons and adding player to that
for (let i = 0; i < totalPlayButtons; i++) {
        players.add(".playSingle" + i, (playerVarsList[i] || {}));
}
players.add(".playInitial", {});

另外，您的退出按钮逻辑存在错误，但这超出了这个问题的范围。如果您在那里遇到问题，请询问另一个问题。