Статьи

Как использовать полноэкранный API HTML5 (снова)

Сентябрь 29, 2018

Если вам не нравятся изменения, возможно, веб-разработка не для вас. Ранее я описал полноэкранный API в конце 2012 года, и, хотя я утверждал, что детали реализации подлежат пересмотру, я не думал, что мне потребуется переписать год спустя! Возможно, это не последнее, но большое спасибо Дэвиду Стори за то, что он подчеркнул последние технические изменения…

Что такое полноэкранный API?

API позволяет просматривать один элемент в полноэкранном режиме. В отличие от нажатия клавиши F11, чтобы вывести браузер в полноэкранный режим, API предназначен для изображений, видео и игр, запущенных внутри контейнера. Когда вы входите в полноэкранный режим, сообщение информирует пользователя, что он может нажать ESC в любое время, чтобы вернуться на страницу.

Полноэкранный API теперь поддерживается всеми последними браузерами для настольных компьютеров, включая IE11. Поддержка мобильных устройств практически отсутствует, но эти браузеры обычно работают в полноэкранном режиме. К сожалению, у нас есть тонкие различия, требования к префиксам и несоответствия между браузерами для решения …

API JavaScript

Предположим, у нас есть изображение с идентификатором myimage Основными методами и свойствами являются:

document.fullscreenEnabled (изменено)
Это свойство возвращает true Он также может быть использован для определения поддержки браузера: 

 if (document.fullscreenEnabled) { ... }

Более ранние реализации имели заглавную букву ‘S’ в ‘Screen’, и это все еще требуется для Firefox. Добавление префиксов приводит к значительно более длинному кросс-браузерному коду: 

 // full-screen available?
if (
	document.fullscreenEnabled || 
	document.webkitFullscreenEnabled || 
	document.mozFullScreenEnabled ||
	document.msFullscreenEnabled
) {
...
}

Opera 12 — единственный браузер, не требующий префиксов, но Opera 15+ использует webkit

element.requestFullscreen () (изменено)
Этот метод делает отдельный элемент полноэкранным, например, 

 document.getElementById("myimage").requestFullscreen();

Опять же, «экран» переключился в нижний регистр. Кросс-браузерный код: 

 var i = document.getElementById("myimage");

// go full-screen
if (i.requestFullscreen) {
	i.requestFullscreen();
} else if (i.webkitRequestFullscreen) {
	i.webkitRequestFullscreen();
} else if (i.mozRequestFullScreen) {
	i.mozRequestFullScreen();
} else if (i.msRequestFullscreen) {
	i.msRequestFullscreen();
}

document.fullscreenElement (изменено)
Это свойство возвращает текущий элемент, который отображается в полноэкранном режиме или равен null 

 if (document.fullscreenElement) { ... }

«экран» теперь строчные. Кросс-браузерный код: 

 // are we full-screen?
if (
	document.fullscreenElement ||
	document.webkitFullscreenElement ||
	document.mozFullScreenElement ||
	document.msFullscreenElement
) {
...
}

document.exitFullscreen (изменено)
Этот метод отменяет полноэкранный режим: 

 document.exitFullscreen;

Опять же, у нас есть строчный «экран». Ранее он назывался cancelFullScreen Кросс-браузерный код: 

 // exit full-screen
if (document.exitFullscreen) {
	document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
	document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
	document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
	document.msExitFullscreen();
}

событие document.fullscreenchange
Это событие вызывается при переходе в полноэкранный режим и из него. Событие не предоставляет никакой информации, но вы можете определить, включен ли полноэкранный режим, проверив, является ли document.fullscreenElementnull 

 document.addEventListener("fullscreenchange", function() { ... });

Имя не изменилось, но для IE нам нужны кросс-браузерные префиксы и верблюжий корпус: 

 document.addEventListener("fullscreenchange", FShandler);
document.addEventListener("webkitfullscreenchange", FShandler);
document.addEventListener("mozfullscreenchange", FShandler);
document.addEventListener("MSFullscreenChange", FShandler);

событие document.fullscreenerror
На весь экран может произойти сбой. Например, iframes без атрибута allowfullscreen Событие fullscreenerror 

 document.addEventListener("fullscreenerror", function() { ... });

Имя не изменилось, но для IE нам нужны кросс-браузерные префиксы и верблюжий корпус: 

 document.addEventListener("fullscreenerror", FSerrorhandler);
document.addEventListener("webkitfullscreenerror", FSerrorhandler);
document.addEventListener("mozfullscreenerror", FSerrorhandler);
document.addEventListener("MSFullscreenError", FSerrorhandler);

Полноэкранный CSS

Мы также можем влиять на полноэкранные стили в CSS …

: полноэкранный псевдокласс (изменен)
Вы можете применять стили к элементу или его дочерним элементам при просмотре в полноэкранном режиме: 

 :fullscreen {
	...
}

Ранее он назывался :full-screen Для кросс-браузерного кода: 

 :-webkit-full-screen {
}

:-moz-full-screen {
}

:-ms-fullscreen {
}

:fullscreen {
}

:: задний план (новый)
Вы можете применить цвет или фон изображения, когда элемент с другим соотношением сторон просматривается в полноэкранном режиме: 

 :fullscreen::backdrop {
	background-color: #006; /* dark blue */
}

Фон является псевдоэлементом за полноэкранным элементом, но выше всего остального содержимого страницы. Он поддерживается в IE11, но не в Firefox и Opera 12. Chrome, Safari и Opera 15+ включают элемент background, но не позволяют его стилизовать. На данный момент вы можете использовать только IE11, например 

 :-ms-fullscreen::-ms-backdrop {
	background-color: #006; /* dark blue */
}

Различия в стилях

В IE11, Firefox и Opera 12 полноэкранный элемент установлен на 100% ширины и высоты. Поэтому изображения растягиваются, а соотношение сторон игнорируется. Установка ширины и высоты в IE11 помещает полноэкранный элемент в верхний левый угол с темным фоном (настраивается с помощью :: фон). Opera 12 похожа на IE11, но показывает прозрачный фон. Firefox игнорирует размеры. В Chrome, Safari и Opera 15+ элемент центрируется на черном фоне.

Если вам нужна согласованность, легко заставить браузеры Webkit / Blink растягиваться, как Firefox / IE11: 

 :-webkit-full-screen {
	position: fixed;
	width: 100%;
	top: 0;
	background: none;
}

Кроме того, вы можете заставить IE11 следовать центрированию Webkit / Blink: 

 :-ms-fullscreen {
  width: auto;
  height: auto;
  margin: auto;
}

Этот метод не будет работать в Firefox, который игнорирует ширину и высоту, как указано выше. Чтобы исправить это, вам нужно сделать родительский элемент полноэкранным и применить соответствующий размер, как показано в этой демонстрации .

Готовы к развертыванию?

Полноэкранный API-интерфейс HTML5 относительно прост, но различия в браузерах приводят к уродливому коду, и нет никакой гарантии, что он больше не изменится. Ситуация улучшится, поэтому может быть предпочтительнее вкладывать время и усилия в другие функции, пока API не станет более стабильным.

Тем не менее, полноэкранный режим может быть необходим для игр HTML5 и веб-сайтов с большим количеством видео. Если вы не хотите поддерживать код самостоятельно, подумайте об использовании библиотеки, такой как screenfull.js, которая сглаживает трещины. Удачи!

38
Share: