Javascript 使用toggleClass暂停/播放YouTube视频API

我正在尝试使用YouTube API让YouTube视频暂停并再次播放。当在播放图标和暂停图标之间单击时，我使用一些字体很棒的图标来切换类。 到目前为止，我可以让视频暂停，但当单击播放图标恢复播放时，它不会触发事件，我也不完全确定为什么？到目前为止，我相信这可能与

onPlayerStateChange（）

有关，但我不确定它是如何直接检查该事件的

以下是我所拥有的：

$( ".playback" ).click(function() {
   $(this).fadeOut("fast", function() {
    $(this).toggleClass('fa-play').fadeIn("fast");
    $(this).toggleClass('fa-pause').fadeIn("fast");
   });
 });

function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('yt-holder', {
videoId: 'BlahBlah',
width: "100%",
height: "100%",
playerVars: {
  autoplay: 1,
  controls: 0,
  showinfo: 0,
  modestbranding: 1,
  loop: 1,
  fs: 1,
  cc_load_policy: 1,
  iv_load_policy: 3,
  autohide: 1,
  rel:0,
  playlist: 'BlahBlah',
  enablejsapi: 1
   },
events: {
  onReady: function(e) {
    e.target.mute();
   }
  }
});
 $( ".fa-play" ).on('click', function() {
   player.playVideo();
});
  $( ".fa-pause" ).on('click', function() {
   player.pauseVideo();
 });
}

不确定在什么地方，什么时候我需要检查球员状态的变化

这是我想做的事：

---

代码的问题是，您正在将click事件附加到要切换的类，这不会像那样直接工作，因为事件的附加发生在您执行函数

onYouTubeIframeAPIReady

这意味着在附加侦听器时，您只附加了

fa play

onclick

方法，这意味着您的

player.playVideo（）

在click事件中反复运行（即使类发生更改，侦听器也保持不变）

---

要解决这个问题，您可以阅读事件委派（这里是一个很好的例子），并检查我已创建的，其中我使用了另一个解决方案，即在回放容器中再添加两个div，因此，我们可以将不同的方法附加到不同的元素。

尝试将.fa play和.fa pause移到onyoutubeiframeapiread函数之外。我相信，一旦第一次单击“按钮”，您就失去了功能。

好的，在对它进行了多次修改并阅读了API文档之后，我终于找到了答案

我更改了

事件

并添加：

 events: {
      onReady: onPlayerReady,
      onStateChange: onPlayerStateChange
    }

然后，我修改了在初始播放时保持视频静音的功能，然后能够有条件地检查视频是否正在播放或暂停，并以这种方式处理逻辑：

  function onPlayerReady(event) {
    event.target.playVideo();
    player.mute();
  }
  function onPlayerStateChange(event) {
    $(".fa-pause").on("click", function() {
      if (player.getPlayerState() == 1) {
        player.pauseVideo();
      } else {
        player.playVideo();
      }
    });
  }
  $(".fa-volume-off").on("click", function() {
    if (player.isMuted()) {
      player.unMute();
    } else {
      player.mute();
    }
  });

这样，我的另一个

toggleClass

项就可以工作了，它只是运行一个检查，看看视频是否正在播放，音频是否静音

谢谢大家的帮助

这是我更新过的钢笔，供参考：

---

如果您创建了一个提琴或包含了html，可能会有所帮助好的，我添加了一支笔！你试过下面的答案吗？嗯，好的。嗯，我看了一下你用钢笔做的东西，这很有道理。但我仍然不确定在YT API事件中具体需要映射什么？它们似乎很好，但要了解更多细节，请参阅。我确实看过那个，这就是我开始构建它的方式。我必须和你一起工作，看看我还缺少什么。是的，请继续使用该示例，看看你的笔，你有一个事件

onStateChange:onPlayerStateChange

，你的函数在那里添加了一个事件侦听器，但该事件只有在状态已经更改时才会触发（例如player.playVideo（）；或player.pauseVideo（）；已执行）因此，您添加事件侦听器太晚了，很抱歉，我现在无法提供任何帮助，但youtube在我的办公室被阻止，因此我无法真正测试它。尝试了该操作后，什么也没有发生。我反复查看了代码，但仍然没有看到它，但看起来回放函数切换类，然后立即将其切换回原来的状态。您可以尝试将“自动播放”设置为0，将按钮设置为“开始播放”，然后查看单击是否提供线索。