JS об'єкт Fullscreen

Введення до об'єкта 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

Приклади

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

<video id="videoPlayer" width="320" height="180" controls>
    <source src="film.mp4" type="video/mp4">
</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();
    }
});

<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();
    }
});