Question

我能够很好地添加事件。

addEventListener("onStateChange", "handleStateChange");

但是在尝试删除事件时，却没有。

removeEventListener("onStateChange", "handleStateChange");

暂停/播放视频时，仍然会调用

handleStateChange。有没有人碰到这个并有解决方案？或者API上有错误吗？

Answer 1

我认为问题是YouTube API的播放器对象没有removeEventListener方法。请记住，当您调用addEventListener时，您正在将其作为构建的youtube播放器对象的方法，而不是使用定义为DOM元素方法的方法（YouTube API选择将其方法命名为相同）为了更熟悉开发人员）。

过去对其他人有用的一个建议是，当您处于可能需要删除事件监听器的情况时，您只需重新定义状态更改回调...类似于：

handleStateChange = function() {};

Answer 2

这对于我的应用程序来说是个问题，我为YouTube播放器对象制作了一种事件发出代理。

用法（其中player是您的YouTube Iframe API Player实例）：

const playerEventProxy = new YouTubeEventProxy(player);

function handleStateChange(e) {
  // …
}

playerEventProxy.on('stateChange', handleStateChange);
playerEventProxy.off('stateChange', handleStateChange);

班级：

/**
 * YouTubeEventProxy
 * Quick and dirty hack around broken event handling in the YouTube Iframe API.
 * Events are renamed, dropping the "on" and lower-casing the first character.
 * Methods 'on', 'off', etc. are supported, as-provided by event-emitter.
 * See also:  https://stackoverflow.com/q/25880573/362536
 * 
 * Brad Isbell <brad@audiopump.co>
 * License: MIT <https://opensource.org/licenses/MIT>
 */

import EventEmitter from 'event-emitter';

// From: https://developers.google.com/youtube/iframe_api_reference#Events
const ytApiEvents = [
  'onApiChange',
  'onError',
  'onPlaybackQualityChange',
  'onPlaybackRateChange',
  'onReady',
  'onStateChange'
];

export default class YouTubeEventProxy extends EventEmitter {
  constructor(player) {
    super();

    this.player = player;

    ytApiEvents.forEach((eventName) => {
      player.addEventListener(
        eventName,
        this.emit.bind(
          this,
          eventName.substr(2, 1).toLowerCase() + eventName.substr(3)
        )
      );
    });

  }
}

这是event-emitter软件包：https://www.npmjs.com/package/event-emitter

youtube-api removeEventListener不工作

2 个答案: