Как удалить прослушиватель событий на плеере Youtube? - PullRequest
Новая
       15

Как удалить прослушиватель событий на плеере Youtube?

0 голосов
/ 12 сентября 2018

Мне нужно отправить некоторую статистику, когда видео YouTube, которые мы встраиваем, воспроизводятся, но только при первом воспроизведении видео пользователем, я должен удалить прослушиватель событий. Моя проблема в том, как это сделать с помощью Google Youtube API?

player.removeEventListener(event:String, listener:String):Void, похоже, не работает вообще.

Вот упрощенный тестовый пример: 

'use strict'

function onPlayerStateChange ({ data, target }) {
  const sendClickLink = data === YT.PlayerState.PLAYING
  const annotationID = target.getIframe().id

  if (sendClickLink) {
    console.log('send stats', annotationID)
    unlistenPlayer(target)
  }
}

function createPlayer ({ annotationID, videoId }) {
  const player = new YT.Player(annotationID, { videoId })
  player.addEventListener('onStateChange', 'onPlayerStateChange')
  console.log('createPlayer', annotationID)
  return player
}

function unlistenPlayer (player) {
  player.removeEventListener('onStateChange', 'onPlayerStateChange')
  console.log('unlistenPlayer', player.getIframe().id)
}

window.onYouTubeIframeAPIReady = function onYouTubeIframeAPIReady () {
  createPlayer({
    videoId: 'a2-1yVxaxuI',
    annotationID: '004ET3NX1RANJ5X51R0P288ZMN'
  })
}

А вот HTML-код для запуска вышеуказанного: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Youtube removeEventListener</title>
  <script src="https://www.youtube.com/iframe_api" defer></script>
  <script>
     // insert above javascript here
  </script>
</head>
<body>
  <iframe
    id="004ET3NX1RANJ5X51R0P288ZMN"
    src="https://www.youtube.com/embed/a2-1yVxaxuI?enablejsapi=1"
    class="annotation annotation__youtube"
    frameborder="0"
    allowfullscreen="true"
    allowtransparency="true"
    allow="encrypted-media"
    tabindex="1"
    style="width: 311.204px; height: 170.244px;"></iframe>
</body>
</html>
...