Что такое Fullscreen API

Fullscreen API — это интерфейс для работы с полноэкранным режимом в веб-браузерах, который позволяет элементам HTML-страницы разворачиваться на весь экран.

Яркий пример использования Fullscreen API — это видеоплееры. Когда вы нажимаете кнопку для просмотра видео на весь экран, используется именно этот API.

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

Пример использования следующий:

typescript
1// получаем элемент, который хотим открыть на весь экран
2const element = document.getElementById('target');
3
4// открыть элемент на весь экран
5element.requestFullscreen()
6
7// получить элемент, который открыть в полноэкранном режиме
8document.fullscreenElement
9
10// выйти из полноэкранного режима
11document.exitFullsreen()
12

Также методы requestFullscreen и exitFullscreen являются промисами, что позволяет проще работать с ними и обрабатывать ошибки их вызова.

И ещё важно знать, что из полноэкранного режима можно выйти по нажатию клавиши ESC по умолчанию, а также некоторые браузеры дают собственные сочетания клавиш.

Чтобы обработать и такой случай, можно отслеживать отдельное событие:

typescript
1document.addEventListener('fullscreenchange', () => {
2 // как-то обрабатываем изменение состояния
3 
4 // можно завязаться на
5 // document.fullscreenElement
6})
7