Как выяснить, когда видеоплеер HTML5 входит в полноэкранный режим на iOS / iPad? - PullRequest
15 голосов
/ 01 февраля 2012

Тег HTML5 <video> предлагает пользователю кнопку для включения и выключения полноэкранного режима в Safari для мобильных устройств (iOS).

Я хотел бы захватить и обработать это действие пользователя, но, похоже, оно не вызывает событие, когда кнопка нажата, и игрок переходит в полноэкранный режим.

Вот ссылка на Safari API для класса HTMLVideoElement:

https://developer.apple.com/documentation/webkitjs/htmlvideoelement

Мы можем легко узнать, когда видео приостанавливается или воспроизводится в Javascript, например:

function onload()
{
  var player = document.getElementsByTagName("video")[0];
  player.addEventListener('play',videoPlayHandler,false);
  player.addEventListener('pause',videoPauseHandler,false);
}

Однако у них, похоже, нет событий для перехода видео в полноэкранный режим.

Мы можем перевести видео в полноэкранный режим в ответ на действия пользователя, вызвав webkitEnterFullscreen () , но это мне не поможет. Мне нужно знать, когда пользователь нажимает на полноэкранную кнопку.

Сокрытие элементов управления и замена их собственными пользовательскими элементами управления звучит как очень длинное решение.

Другой вариант, о котором я могу подумать, - установить событие синхронизации, постоянно проверяя свойство webkitDisplayingFullscreen , но это нехорошо с точки зрения управления памятью.

Кто-нибудь может предложить лучшее решение?

1 Ответ

37 голосов
/ 07 февраля 2012

После долгих разговоров с другом, наконец, указал мне правильное направление.

События, которые я искал: webkitbeginfullscreen и webkitendfullscreen

var player = document.getElementsByTagName("video")[0];
player.addEventListener('webkitbeginfullscreen', onVideoBeginsFullScreen, false);
player.addEventListener('webkitendfullscreen', onVideoEndsFullScreen, false);

С этим я могу безопасно захватывать, когда пользователь нажимает на полноэкранную кнопку в Safari для iPad.Интересно, что те же самые события, похоже, не работают для Safari на iMac (протестировано на версии 5.1.2).

Спасибо Apple за их непоследовательность и часы потерянного времени.

...