keyup событие на видео на ютубе

Я пытаюсь создать демонстрационное приложение, которое воспроизводит список видео на YouTube. Я добавил функцию, которая воспроизводит следующее/предыдущее видео на основе нажатия стрелки вверх/вниз. Это отлично работает, когда видео не нажимается. Но он перестает работать при нажатии на видео.

  var video_list=[{'videoId':'abcd', 'videoId':'efgh'];
  var index = 0;
  $(document).on('keyup', function(event){
      var keycode = (event.keyCode ? event.keyCode : event.which);
      if(keycode == '38') {
        if(index < video_list.length-1){
          index += 1;
        } else {
        index = 0;
        }
        player.loadVideoById({'videoId': video_list[index].videoId});
     }
    if (keycode == '40') { 
      if( index > 0) {
        index -= 1;
      } else {
        index = video_list.length-1;
      }

 player.loadVideoById({'videoId': video_list[index].videoId});
    }
}); 

Любая идея, как я могу заставить событие keyup запускаться, когда видео сфокусировано?


person shanks    schedule 21.10.2015    source источник


Ответы (1)


Используйте document.activeElement, чтобы узнать, какой элемент сфокусирован, если это тег видео (или что-то еще, что вы используете), вызовите функцию, которая запускает видео.

person Noctisdark    schedule 21.10.2015
comment
Я получаю предупреждение «KeyboardEvent.keyLocation» устарело. Вместо этого используйте «KeyboardEvent.location». и похоже, что iframe фокусируется - person shanks; 21.10.2015
comment
Предоставленный вами код ничего не содержит о KeyboardEvent.keyLocation, но я думаю, что это что-то связано с e.what/e.keyCode, что вы подразумеваете под тем, что он сфокусирован? - person Noctisdark; 21.10.2015
comment
Извиняюсь. при попытке распечатать document.activeelement он возвращает iframe YouTube. - person shanks; 21.10.2015
comment
var videoTag = document.getElemengById('videoElement') и затем проверьте, если document.activeElement == videoTag - person Noctisdark; 21.10.2015