Как использовать Fullscreen API

  • Tutorial

В комплекте с HTML5 появилось большое количество нового API. Одним из них является Fullscreen API, которое предоставляет нативный способ для браузера, позволяющий отобразить веб-страницу в полноэкранном режиме для пользователя.
А еще хорошо то, что Fullscreen API является очень простым в использовании.

Методы


Методы, входящие в состав Fullscreen API

Согласно стандарту W3C название некоторых методов было изменено, но старые названия продолжают работать.
Element.requestFullscreen()

Этот метод позволяет одному элементу перейти в полноэкранный режим.
Document.getElementById("myCanvas").requestFullscreen()

Выполнение этого кода приведет к тому, что canvas с ID «myCanvas» перейдет в полноэкранный режим.
Document.cancelFullScreen()

новое название атрибута:
Document.exitFullscreen

Отменяет полноэкранный режим.
Document.fullScreen

новое название атрибута:
Document.fullscreenEnabled

Возвращает значение «истина», если пользователь находится в полноэкранном режиме.
Document.fullScreenElement

Возвращает элемент, который в настоящее время находится в полноэкранном режиме.
Обратите внимание, что это стандартные методы. Для того, что бы они работали во всех браузерах, нам необходимо использовать префиксы.

Поддерживаемые браузеры

  • Chrome
  • Firefox
  • Safari
  • Opera Next
  • Opera (начиная с версии 12.10)
  • Internet Explorer (начиная с версии 11)


Более подробная информация по поддержке Fullscreen API современными браузерами доступна по ссылке.

Будет полезным скрипт, позволяющий автоматически определять поддержку браузером Fullscreen API и в случае необходимости добавляет необходимый префикс к методам Fullscreen API.

Запуск полноэкранного режима

Сначала мы должны выяснить, какой метод распознает наш браузер. Для этого мы создадим функцию, которая будет проверять поддержку метода и вызовет рабочий метод:
function fullScreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.webkitrequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.mozRequestFullscreen) {
    element.mozRequestFullScreen();
  }
}


Если любой из requestFullscreen методов возвращают истинное значении, то вызывается тот метод, который поддерживается конкретным браузером и использует псевдокласс с его префикском.

После этого нужно вызвать функцию для полноэкранного режима:
//для всей страницы
var html = document.documentElement;
fullScreen(html);

// Для конкретного элемента на странице
var canvas = document.getElementById('mycanvas');
fullScreen(canvas);


Результатом будет запрос пользователю с просьбой разрешить переход в полноэкранный режим, если пользователь разрешит переход, то все панели инструментов в браузере исчезнут, и на всем экране будет веб-страница или один элемент.

Отмена полноэкранного режима

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

Этот метод не требует никаких параметров, поскольку в отличие от метода requestFullscreen он всегда относится ко всему документу.
function fullScreenCancel() {
  if(document.requestFullscreen) {
    document.requestFullscreen();
  } else if(document.webkitRequestFullscreen ) {
    document.webkitRequestFullscreen();
  } else if(document.mozRequestFullscreen) {
    document.mozRequestFullScreen();
  }
}

//отменяет полноэкранный режим
fullScreenCancel();

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


В комплекте с этим JavaScript API пришли и CSS псевдоклассы
:full-screen

Он может быть использован для задания стиля любых элементов на веб-странице, когда страница или элемент находится в полноэкранном режиме. Данный псевдокласс может пригодиться для задания размера элементов страницы, потому что в полноэкранном режиме происходит увеличение и самого рабочего пространства браузера.
:-webkit-full-screen {/*WebKit, Opera 15+*/
  font-size: 16px;
}
:-moz-full-screen {/*FireFox*/
  font-size: 16px;
}
:full-screen {/*Opera 12.15-, Blink, w3c standard*/
  font-size: 16px;
}
/*изменения одного элемента img*/
:-webkit-full-screen img {
  width: 100%;
  height: 100%;
}
:-moz-full-screen img {
  width: 100%;
  height: 100%;
}


Учтите, что нельзя отделять префиксы запятыми, потому что браузер не сможет распознать их:
/* Это не будет работать */
:-webkit-full-screen img,:-moz-full-screen img {
  width: 100%;
  height: 100%;
}


Для того, чтобы стили применялись правильно, вы должны поместить каждый псевдокласс с префиксом браузера в своем собственном блоке.

Заключение


Этот JavaScript API является одним из наименее известных из поставляемых с HTML5, но это эффективный и простой в реализации метод, позволяющий сфокусировать внимание пользователя на одном элементе, что особенно полезно для видео, изображений и игр.
Поделиться публикацией
Комментарии 35
    0
    Не все браузеры, префиксы… можно будеть использовать через несколько лет в лучшем случае
      +2
      Можете уже использовать прямо сейчас. Только не во всех браузерах и с префиксами.
        +1
        Рано её использовать.
        На нашем проекте пока отказались из-за критикал вещей:
        баг в chromium из-за которого происходит выход из полноэкранного режима при использовании HistoryAPI
        — Отсутствует возможность скроллить страницу средствами js
          0
          А есть какие-то альтернативы для проектов html5? Тут два варианта: не использовать вообще, или использовать хотя бы там, где это работает, а остальные браузеры подтягивать по ходу улучшения ситуации.
        +2
        Помнится, для изменения прозрачности, до jQuery, надо было коду побольше написать, строк 15. И ничего, пользовались.
          +1
          самое очевидное применение — в терминалах в режиме киоска и на всяких системных мониторах. И там и там полный контроль над софтом. Так что кому-то точно пригодится уже сегодня.
            0
            Проблема, насколько я помню, когда пробовал — в поддержке клавиатурного ввода в таком режиме :(
            0
            На фейсбуке уже полгода можно фотки в фуллскрине смотреть.
            0
            Охренеть!
            Два года прошло, а API всё ещё с префиксами. 8-(
            0
            Хотелось бы увидеть какой-нибудь живой примерчик.
            0
            Одним из лучших стало Fullscreen API

            Да ну? И чем же оно лучше той же indexed db, web sql, notifications api, session- или localstorage или, хотя-бы, тех же data-* атрибутов?

            Так что, по-моему, данное API претендует на статус самого незначительного.

            P.S. Я, ни в коем случае, не сравниваю ни одно из выше указанных нововведений с другим, а просто объективно оцениваю теоретическую пользу каждого по отдельности.
              0
              Перегнул чуток, но штука полезная, как и все что принес нам HTML5.
              P.s. Поправлю текстовку =)
              0
              >В настоящее время Internet Explorer и Opera не поддерживают это API.
              Классическая Опера на Presto развиваться больше не будет, а Opera 15 Next, судя по всему, уже поддерживает Fullscreen API. Кстати, в отличии от Notification API.
                0
                Проверил в Opera Next, поддержка есть, но фон она цветом мне поменяла…
                0
                >В настоящее время Internet Explorer и Opera не поддерживают это API.
                В Opera поддерживает с версии 12.10. При этом, поддерживается по стандарту, в разработке которого участвовала и в который вы наверное даже не заглядывали, иначе бы знали, что функция cancelFullScreen сейчас называется exitFullscreen, а свойство fullScreen — fullscreenEnabled.
                И могли бы дать ссылку на полифил, который действительно позволит использовать это API уже сейчас
                  –1
                  Блин, 2013 год на дворе, придумали новую фичу, и все равно суют свои префиксы. Это вообще как-то можно объяснить? Зачем префиксы?
                    0
                    Конечно можно, вы что, раньше думали, что префиксы нужны только потому что на дворе был не 2013-й? Они нужны из-за того, что спецификация меняется и свойства могут в будущем работать по-другому, а в свойстве с префиксом можно оставить старое поведение.
                    +2
                    >>В настоящее время Internet Explorer не поддерживает это API.

                    Internet Explorer 11 поддерживает Fullscreen API

                    Протестировать этот API можно на специальной страничке с тестом от разработчиков IE
                    ie.microsoft.com/testdrive/HTML5/Fullscreen/Default.html

                      0
                      Исправил, спасибо
                      0
                      Простите, а чем это отличается от нажатия F11, с т.з. пользователя?
                        0
                        можно назначить не только на нажатие кнопки полноэкранный режим. Например при нажатии на воспроизведение видео, можно включить браузер в полноэкранный режим, без участия пользователя. Так же, например, автоматическое включение полноэкранного режима в какой нибудь игре… в общем на что фантазии хватит. Главное что можно включать полноэкранный режим без участия пользователя (без F11), т.е. программными средствами и без флеша (как было раньше)…
                        0
                        Зачем так писать? Страшненький код какой-то.
                        function fullScreen(element) {
                          if(element.requestFullscreen) {
                            element.requestFullscreen();
                          } else if(element.webkitrequestFullscreen) {
                            element.webkitRequestFullscreen();
                          } else if(element.mozRequestFullscreen) {
                            element.mozRequestFullScreen();
                          }
                        }
                        

                        Можно же так:
                        function (o) {
                            try {
                                (o.requestFullscreen || o.webkitrequestFullscreen || mozRequestFullscreen)();
                            } catch(e) {}
                        }
                        
                          0
                          для наглядности.
                            0
                            можно и без try/catch

                            (o.requestFullscreen ||… || function () {}) ()
                            0
                            Библиотечка — screenfull.js
                              0
                              function fullScreenCancel() {
                                if(document.requestFullscreen) {
                                  document.requestFullscreen();
                                } else if(document.webkitRequestFullscreen ) {
                                  document.webkitRequestFullscreen();
                                } else if(document.mozRequestFullscreen) {
                                  document.mozRequestFullScreen();
                                }
                              }
                              


                              Метод fullScreenCancel делает requestFullscreen?

                                0
                                Да, с реализацией для разных браузеров.
                                  0
                                  Вы не заметили что реализация метода перехода в fullscreen а не ухода с него?
                                    0
                                    Да, ошибочка получается, надо cancelFullScreen()

                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                              Самое читаемое