HTML5 fullscreen

Новая технология HTML5 fullscreen API (полно-экранный режим) — это простой способ отобразить содержимое веб-страницы в полно-экранном режиме. В этой статье подробная информация о новой технологии HTML5 fullscreen. Основное преимущество и возможности технологии HTML5 fullscreen это смотреть фотоальбомы, видео, и даже игры в полно-экранном режиме.

HTML5 fullscreen (полно-экранный режим)

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

Поддержка браузерами: HTML5 fullscreen
Internet Explorer Chrome Opera Safari Firefox Android
11+ 15+ 12.10+ 5+ 9+ 4.0

Демо

Применить HTML5 fullscreen

Из-за того, что этот режим поддерживается на разных браузерах по-разному, мы должны предусмотреть все случаи:



var elem = document.getElementById("myObject");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}


Мы запросили полно-экранный режиме для любого элемента DOM (или мы можем применять для всей страницы — document.documentElement). Код направляет запрос пользователю о наличии разрешения на включение полно-экранного режима, если этот запрос будет принят, все панели инструментов и другие панели браузера исчезнут, и на экране появится элемент или вся веб-страница нужная для просмотра в полно-экранном режиме.

CSS псевдокласс

В CSS был добавлен псевдокласс — :full-screen . Он используется для того что бы применить стиль к элементам, которые находятся в полно-экранном режиме.



:-webkit-full-screen #myObject {
  font-size: 20px;
  width: 100%;
}
:-moz-full-screen #myObject {
  font-size: 20px;
  width: 100%;
}


Дополнительные события

Существует несколько оповещений: при успешном активизировании полно-экранного режима, документ получает событие mozfullscreenchange . Когда полно-экранный режим отменён, документ получает снова событие mozfullscreenchange . Обратите внимание, что это событие не показывает, документ в полно-экранный режиме, или нет. Подсказка: если документ имеет значение, отличное от null mozFullScreenElement, мы в полно-экранном режиме.

Что, если запрос fullscreen не выполняется? Если это не удается, значит элемент, который вызвал fullscreen получит событие fullscreenerror . Плюс, ваш браузер будет сообщать ошибку в Веб-Консоли.

Что бы выйти из полно-экранного режима, вызываем метод cancelFullScreen .

Включить/выключить полно-экранный режим

Вот пример, который можно использовать для перехода к другой странице документа в полно-экранном режиме. Существуют два обработчика событий (для работы с mozfullscreenerror и события keydown ). Используйте F или Enter , чтобы включить полно-экранный режим.



// mozfullscreenerror event handler
function errorHandler() {
 alert('mozfullscreenerror');
}
document.documentElement.addEventListener('mozfullscreenerror', errorHandler, false);

// toggle full screen
function toggleFullScreen() {
  if (!document.fullscreenElement &&  // alternative standard method
  !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
  if (document.documentElement.requestFullscreen) {
  document.documentElement.requestFullscreen();
  } else if (document.documentElement.mozRequestFullScreen) {
  document.documentElement.mozRequestFullScreen();
  } else if (document.documentElement.webkitRequestFullscreen) {
  document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
  }
  } else {
  if (document.cancelFullScreen) {
  document.cancelFullScreen();
  } else if (document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
  } else if (document.webkitCancelFullScreen) {
  document.webkitCancelFullScreen();
  }
  }
}

// keydown event handler
document.addEventListener('keydown', function(e) {
  if (e.keyCode == 13 || e.keyCode == 70) { // F or Enter key
  toggleFullScreen();
  }
}, false);


Методы и События API



partial interface Element {
  void requestFullscreen();
};

partial interface Document {
  readonly attribute boolean fullscreenEnabled;
  readonly attribute Element? fullscreenElement;

  void exitFullscreen();
};


Пояснение

  • element.requestFullscreen() — отображает элемент в полно-экранном режиме.
  • document.fullscreenEnabled — возвращает true , если документ имеет возможность отображения элементов fullscreen , если нет false .
  • document.fullscreenElement — возвращает элемент, который отображается в полно-экранном режиме, или null если такого элемента нет.
  • document.exitFullscreen() — останавливает все элементы в документе и не отображать полный экран.

Заключение

Новая технология HTML5 полно-экранный режим даёт нам прекрасную возможность получить максимальную выгоду от экрана. Это реальный способ улучшить пользовательский интерфейс.

Статья подготовлена для вас коллективом сайта www.pixelcom.crimea.ua
Оригинал статьи: www.script-tutorials.com/new-technology-fullscreen-mode
Перевел: Виктор Клим
Правила использования материалов сайта!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>