Pause/Play 带有 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

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

这意味着在附加监听器的那一刻，你只是附加了fa-play onclick 方法，这意味着你的 player.playVideo(); 是运行一遍又一遍再次点击事件（即使 class 发生变化，侦听器保持不变）

要解决这个问题，您可以阅读事件委托（这是我创建的一个很好的 blog post about it), and check this pen，我在其中使用了另一种解决方案，即在播放容器中再添加两个 div，这样我们就可以将不同的方法附加到不同的元素。

Answer 2

尝试将 .fa-play 和 .fa-pause 移到 onYouTubeIframeAPIReady 函数之外。我相信一旦 "button" 被第一次点击，您就会失去功能。

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

Pause/Play 带有 toggleClass 的 YouTube 视频 API

Pause/Play YouTube video API with toggleClass

javascript

youtube

video

youtube-api

youtube-javascript-api