Question

我尝试使用YouTube API暂停和播放YouTube视频。在播放图标和暂停图标之间点击时，我使用了一些字体真棒图标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

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

这意味着在附加侦听器时，您只附加了onYouTubeIframeAPIReady fa-play方法，这意味着您的onclick在点击事件上反复运行（即使班级发生变化，听众也会保持不变）

要解决此问题，您可以阅读事件委托（这里是一个很好的blog post about it），并检查我创建的this pen，其中我使用了另一种解决方案，即在内部添加两个div回放容器，所以我们可以将不同的方法附加到不同的元素。

Answer 2

尝试在.YouTubeIframeAPIReady函数之外移动.fa-play和.fa-pause。我相信一旦＆＃34;按钮＆＃34;是第一次点击。

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

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

3 个答案: