API-интерфейс YouTube iframe - OnStateChange не работает

Я буквально просто скопировал и вставил код с страницы разработчика YouTube Ссылка API API YouTube для фреймов iframe (из-под заголовка "Получение Начал" ). Единственное различие заключается в том, что я добавил предупреждение для запуска, когда состояние изменилось, потому что я думал, что я делаю что-то неправильно внутри функции onPlayerStateChange.

Вы можете увидеть jsFiddle в http://jsfiddle.net/jesMv/.

Как указано, это просто точная копия кода с страницы разработчика YouTube с добавленным

alert('State Changed')

как первое, что нужно запустить в функции onPlayerStateChange.

Однако ничего не происходит... Независимо от того, как я смотрю на это и что меняю, я просто не могу заставить onStateChange что-либо делать.

Как я могу исправить эту проблему?

ОТВЕТЫ

Ответ 1

Возникла временная проблема с API iFrame Player (исправленная в июне 2013 года), о которой вы можете прочитать здесь: https://code.google.com/p/gdata-issues/issues/detail?id=4706

Джефф Посник разместил временный обходной путь здесь: http://jsfiddle.net/jeffposnick/yhWsG/3/

В качестве временного исправления вам просто нужно добавить прослушиватель событий в событие onReady:

function onReady() {
    player.addEventListener('onStateChange', function(e) {
        console.log('State is:', e.data);
    });
}

Обязательно удалите событие onStateChange из конструктора YT.PLAYER (см. jsfiddle).

Кроме того, как кто-то упомянул в теме проблем с кодом Google, вы устанавливаете интервал и опрашиваете плеер на предмет его текущего состояния, а не прослушивает событие onStateChange. Вот пример кода для этого:

setInterval( function() {
  var state = player.getPlayerState();
  if ( playerState !== state ) {
    onPlayerStateChange( {
      data: state
    });
  }
}, 10);

Проблемы с Firefox и IE

Другие люди упоминали, что Firefox не будет создавать экземпляр YouTube Player, если он помещен в контейнер со свойством css display: none. Internet Explorer также не будет работать с visibility: hidden. Если вы обнаружите, что это является проблемой, попробуйте разместить контейнер вне страницы с помощью чего-то вроде left: -150%.

Стив Мейснер говорит об этом здесь: API YouTube не загружается в Firefox, IFrame загружается, но событие onPlayerReady никогда не запускается?

И еще один связанный с этим вопрос: API iframe YouTube - события onReady и onStateChanged не запускаются в IE9

Изменение: я отредактировал этот ответ, чтобы быть более тщательным, потому что люди все еще видят эту ошибку после исправления первоначальной ошибки в 2013 году.

Ответ 2

onStateChange не работает ни в одной версии Internet Explorer или Edge. Я предполагаю, что он начнет работать, как только Microsoft переведет Edge на Chromium. Но, будь то IE9, 11 или Edge, я не могу запустить это событие, даже если оно запускается чисто в Chrome, идентичный код.