Fullscreen API в JavaScript — повноекранний режим

Введення до об'єкта Fullscreen у JavaScript

Об'єкт Fullscreen у JavaScript – це інструмент, який дозволяє вам програмно керувати режимом повноекранного відображення на веб-сторінці. Цей режим є корисним, коли потрібно надати користувачу можливість максимізувати відображення контенту, зокрема для відео, презентацій, ігор та інших ресурсів.

Використання Fullscreen API

Перевірка підтримки Fullscreen API: Перш ніж взаємодіяти з режимом повноекранного відображення, корисно з'ясувати, чи підтримує поточний браузер Fullscreen API.

if (document.fullscreenEnabled) {
   // Браузер підтримує Fullscreen API
}

Тут ми використовуємо властивість document.fullscreenEnabled$ для перевірки підтримки Fullscreen API`.

Вхід в режим повноекранного відображення: Щоб ввімкнути режим повноекранного відображення для конкретного елемента, використовуйте метод requestFullscreen:

const element = document.getElementById("myVideo");
element.requestFullscreen();

У цьому прикладі ми вибираємо елемент з ідентифікатором "myVideo" і переводимо його в режим повноекранного відображення.

Вихід з режиму повноекранного відображення: Щоб вийти з режиму повноекранного відображення, використовуйте метод document.exitFullscreen:

if (document.fullscreenElement) {
   document.exitFullscreen();
}

Тут ми спершу перевіряємо, чи є в нас активний елемент у режимі повноекранного відображення за допомогою властивості document.fullscreenElement, і якщо так, виходимо з режиму.

правити

Загальний опис

правити

Порада

З міркувань безпеки, браузери зазвичай дозволяють активацію повноекранного режиму лише як відгук на дії користувача, такі як натискання кнопки або клік мишею.

автор: Bond правити

Порада

Різні браузери можуть мати префіксні версії методів та властивостей для Fullscreen API, такі як webkitRequestFullscreen для WebKit-браузерів. Щоб забезпечити сумісність, рекомендується використовувати поліфіли або перевіряти наявність різних методів.

автор: Bond правити

Нотатка

Щоб відстежувати зміни стану повноекранного режиму, можна використовувати події, такі як fullscreenchange та fullscreenerror:

document.addEventListener("fullscreenchange", function() {
   if (document.fullscreenElement) {
       console.log("Режим повноекранного відображення ввімкнено");
   } else {
       console.log("Режим повноекранного відображення вимкнено");
   }
});

У цьому прикладі ми відслідковуємо, коли користувач входить або виходить з режиму повноекранного відображення, і виводимо відповідне повідомлення.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.requestFullscreen([options]);
document.exitFullscreen();

методи

властивості

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	71	64	16.4	58	79

Підтримка: мобільні переглядачі

Переглядач
	71	71	64	12

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<div id="slideContainer">Демонстраційний елемент</div>
<div id="enterFullscreen">Демонстраційний елемент</div>

const slideContainer = document.getElementById("slideContainer");
const enterFullscreenButton = document.getElementById("enterFullscreen");

enterFullscreenButton.addEventListener("click", function() {
    slideContainer.requestFullscreen();
});

<canvas id="gameCanvas" width="300" height="150"></canvas>
<div id="toggleFullscreen">Демонстраційний елемент</div>

const gameCanvas = document.getElementById("gameCanvas");
const fullscreenToggle = document.getElementById("toggleFullscreen");

fullscreenToggle.addEventListener("click", function() {
    if (document.fullscreenElement) {
        document.exitFullscreen();
    } else {
        gameCanvas.requestFullscreen();
    }
});

const btn = document.createElement('button');
btn.textContent = 'На весь екран';
const info = document.createElement('p');
document.body.append(btn, info);

// чи дозволено повний екран узагалі: у рамці без allow="fullscreen" — ні
info.textContent = 'document.fullscreenEnabled: ' + document.fullscreenEnabled;
console.log('fullscreenEnabled:', document.fullscreenEnabled);

btn.addEventListener('click', () => {
    // виклик мусить іти з обробника дії користувача, інакше проміс відхиляється
    document.documentElement.requestFullscreen()
        .then(() => {
            info.textContent = 'зайшли: ' + document.fullscreenElement.tagName;
            console.log('fullscreenElement:', document.fullscreenElement.tagName);
        })
        .catch((e) => {
            // без цього catch була б лише невиразна помилка в консолі
            info.textContent = 'відмова: ' + e.name;
            console.log('відмова:', e.name, '—', e.message);
        });
});

// вихід через Esc не дає ні події клавіші, ні промісу — лише fullscreenchange
document.addEventListener('fullscreenchange', () => {
    console.log('змінився стан, зараз у повному екрані:', document.fullscreenElement !== null);
});

<video id="videoPlayer" width="320" height="180" controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 64 36' preserveAspectRatio='none'%3E%3Crect width='64' height='36' fill='%23264653'/%3E%3Ccircle cx='32' cy='18' r='10' fill='%23e9c46a'/%3E%3Cpath d='M29 12 38 18 29 24Z' fill='%23264653'/%3E%3C/svg%3E">
    Ваш браузер не відтворює відео.
</video>
<button id="fullscreenButton">На весь екран</button>

const videoElement = document.getElementById("videoPlayer");
const fullscreenButton = document.getElementById("fullscreenButton");

fullscreenButton.addEventListener("click", function() {
    if (document.fullscreenElement) {
        document.exitFullscreen();
    } else {
        videoElement.requestFullscreen();
    }
});