使用toggleclass暂停/播放YouTube视频API

Question

我正在尝试获取YouTube视频以暂停并使用YouTube API再次播放。当在播放图标和暂停图标之间单击时，我将使用一些字体出色的图标来 toggleClass。到目前为止，我可以让视频暂停，但是在单击"播放图标"恢复播放时，它没有发射活动，我不确定为什么呢？我认为到目前为止，我相信这可能与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();
 });
}

不确定我需要检查该播放器状态的何时何处。

这是我 sorta 试图做的笔：https://codepen.io/ultraloveninja/pen/gwmwrj

Answer 1

代码的问题是，您将点击事件附加到要切换的类中，这不会像这样，因为事件的附件发生时发生您执行功能onYouTubeIframeAPIReady

这意味着在附加侦听器的那一刻，您只附加fa-play onclick方法，这意味着您的player.playVideo();在单击事件中一遍又一遍地运行(即使类更改，听众保持相同((

要解决此信息，您可以在Event委托中阅读(这是一篇关于它的好博客文章(，然后检查我创建的这支笔，我使用了一个替代解决方案，该解决方案是在播放容器中添加两个Divs，因此我们可以将不同的方法附加到不同的元素。

Answer 2

尝试将.fa-play和.fa pape移到OnyoutubeiframeApiReady函数之外。我相信，一旦第一次单击"按钮"，您就会失去功能。

Answer 3

好的，在用它进一步搜索并阅读API文档后，我终于弄清楚了。

我更改了events并添加：

 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项目工作，它只是运行检查以查看视频是否在播放以及音频是否静音。

感谢大家的帮助！

这是我更新的笔以供参考：https://codepen.io/ultraloveninja/pen/gwmwrj