Как определить, нажата ли клавиша escape при просмотре видео на Youtube?

#jquery #youtube

#jquery #YouTube

Вопрос:

Это будет странный вопрос, но он продолжается. У меня есть страница, на которой я показываю фотографию в большом формате, например, лайтбокс. При нажатии ESC я закрываю страницу и возвращаю пользователя на страницу, с которой он перешел, на которой отображаются фотографии в обычном формате:

 $(document).keyup(function(e) {
 if (e.keyCode == 27) {
    var closeURL = $('.close').attr('href');
        window.location = closeURL;
 }
});
  

Однако на той же странице лайтбокса также есть боковая панель, которая может содержать встроенные видеоролики Youtube. Пользователи могут увеличить это видео до полноэкранного режима, используя стандартные элементы управления видео в проигрывателе Youtube. Если пользователь нажмет ESC в этом сценарии, он закроет полноэкранное видео и вернется на страницу лайтбокса (стандартное поведение встроенного проигрывателя, чего я и добиваюсь), однако событие клавиши ESC также запускает мой код ввода, который закрывает лайтбокс, что нежелательно в данном конкретном сценарии.

Я обнаружил, что это происходит в Chrome, но не в Firefox. По сути, я хочу, чтобы мой код ESC не срабатывал при нажатии ESC для закрытия проигрывателя Youtube, но чтобы он срабатывал только тогда, когда пользователи нажимают ESC при просмотре фотографии (а не видео).

Я просматривал event.target, чтобы различать эти сценарии, но пока безуспешно. Есть идеи?

Обновление: пока я собираюсь принять эту ошибку только для Chrome. Тем не менее, все еще открыт для решений.

Комментарии:

1. Не могли бы вы опубликовать HTML-код для панели, содержащей проигрыватель YouTube

2. Это странно, поскольку Chrome, похоже, ведет себя очень странно при нажатии клавиши.

3. @JohnHartsock Мои мысли в точности 🙂 Я вообще не ожидал, что клавиша ESC запустит мое событие, поскольку я думал, что это произошло в iframe. Теперь я в замешательстве относительно того, каким было бы правильное поведение, все, что я знаю, это то, что я не хочу, чтобы событие перемещалось с Youtube на мою страницу.

Ответ №1:

Я не верю, что это будет возможно. Flash Player фиксирует ввод, когда он сфокусирован — например, если вы нажмете play в видео YouTube, а затем нажмете Ctrl-W, чтобы закрыть вкладку, она не закроется, пока вы не нажмете на страницу за пределами видео, возвращая фокус браузеру.

Управление вводом фактически передается другому процессу (Flash Player), пока он сфокусирован, поэтому вы не сможете перехватывать ввод или действовать с ним, пока пользователь явно не вернет управление браузеру.

Комментарии:

1. Спасибо, я думаю, это объясняет это, хотя жаль, что разные браузеры обрабатывают это по-разному.

Ответ №2:

Может быть, что-то подобное сработало бы :

 $(document).not("iframe").keyup(...
  

Комментарии:

1. Спасибо, что согласились подумать. Пробовал, но с этим кодом, похоже, больше ничего не запускает.

Ответ №3:

Просто наткнулся на это.. Я знаю, что это немного устарело, но есть возможное решение (потребует дополнительной работы)…

Вы могли бы обернуть проигрыватель YouTube в свой собственный flash Player (используя API или просто контейнер) и определить нажатие клавиши во flash. Затем вы могли бы вызвать ту же функцию javascript непосредственно из своего flash-приложения, поэтому не имеет значения, на вашей странице или в приложении Flash есть фокус, скрипт, который вы хотите запустить, всегда будет выполняться.

Ответ №4:

Вы можете сделать это, определив состояние воспроизведения видео, а затем вернув фокус к окну.

API Flash Player для Youtube теперь устарел, поэтому вам следует использовать IFrame API.

Вы можете использовать onStateChange событие для определения состояния 1 (playing) , а затем просто вызвать:

 `$(window).focus()`    (jQuery syntax)
  

Затем это позволит вам использовать keyup событие. Обязательно используйте window а не document для focus() вызова.

Вот раздел документации о событиях.

https://developers.google.com/youtube/iframe_api_reference#Events