KREGI Jun 28 2013 at 12:12

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

3 min

87K

JavaScript*HTML*API*

Tutorial

+40

Comments 34

oENDark Jun 28 2013 at 12:23

Не все браузеры, префиксы… можно будеть использовать через несколько лет в лучшем случае

kazmiruk Jun 28 2013 at 12:33

Можете уже использовать прямо сейчас. Только не во всех браузерах и с префиксами.

nerevar1n Jun 28 2013 at 16:28

Рано её использовать.
На нашем проекте пока отказались из-за критикал вещей:
— баг в chromium из-за которого происходит выход из полноэкранного режима при использовании HistoryAPI
— Отсутствует возможность скроллить страницу средствами js

kazmiruk Jun 28 2013 at 19:28

А есть какие-то альтернативы для проектов html5? Тут два варианта: не использовать вообще, или использовать хотя бы там, где это работает, а остальные браузеры подтягивать по ходу улучшения ситуации.

kolegich Jun 28 2013 at 12:45

Помнится, для изменения прозрачности, до jQuery, надо было коду побольше написать, строк 15. И ничего, пользовались.

dizer Jun 28 2013 at 13:15

самое очевидное применение — в терминалах в режиме киоска и на всяких системных мониторах. И там и там полный контроль над софтом. Так что кому-то точно пригодится уже сегодня.

aleks_raiden Jun 28 2013 at 16:44

Проблема, насколько я помню, когда пробовал — в поддержке клавиатурного ввода в таком режиме :(

furyk Jun 28 2013 at 13:56

На фейсбуке уже полгода можно фотки в фуллскрине смотреть.

Serzhenko Jun 29 2013 at 10:37

И ВКонтакте примерно с сентября 2012 можно.

metalim Feb 6 2015 at 01:18

Охренеть!
Два года прошло, а API всё ещё с префиксами. 8-(

oe24 Jun 28 2013 at 13:35

Хотелось бы увидеть какой-нибудь живой примерчик.

lacki Jun 28 2013 at 13:43

lab.hakim.se/reveal-js/#/ и нажмите F

kolegich Jun 28 2013 at 14:25

Презентации на гуглодоке

KREGI Jun 28 2013 at 19:25

Добавил в пост.
Пример:
examples.it-kregi.ru/fullscreen-api/
Исходники:
examples.it-kregi.ru/fullscreen-api/example_Fullscreen_API.rar

XaocCPS Jun 28 2013 at 20:09

ie.microsoft.com/testdrive/HTML5/Fullscreen/Default.html

BR0kEN Jun 28 2013 at 15:12

Одним из лучших стало Fullscreen API

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

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

P.S. Я, ни в коем случае, не сравниваю ни одно из выше указанных нововведений с другим, а просто объективно оцениваю теоретическую пользу каждого по отдельности.

KREGI Jun 28 2013 at 15:34

Перегнул чуток, но штука полезная, как и все что принес нам HTML5.
P.s. Поправлю текстовку =)

disinvis Jun 28 2013 at 15:52

>В настоящее время Internet Explorer и Opera не поддерживают это API.
Классическая Опера на Presto развиваться больше не будет, а Opera 15 Next, судя по всему, уже поддерживает Fullscreen API. Кстати, в отличии от Notification API.

KREGI Jun 28 2013 at 17:27

Проверил в Opera Next, поддержка есть, но фон она цветом мне поменяла…

termi Jun 28 2013 at 17:14

>В настоящее время Internet Explorer и Opera не поддерживают это API.
В Opera поддерживает с версии 12.10. При этом, поддерживается по стандарту, в разработке которого участвовала и в который вы наверное даже не заглядывали, иначе бы знали, что функция cancelFullScreen сейчас называется exitFullscreen, а свойство fullScreen — fullscreenEnabled.
И могли бы дать ссылку на полифил, который действительно позволит использовать это API уже сейчас

prudis Jun 28 2013 at 17:29

Блин, 2013 год на дворе, придумали новую фичу, и все равно суют свои префиксы. Это вообще как-то можно объяснить? Зачем префиксы?

-1

bolk Jun 29 2013 at 10:21

Конечно можно, вы что, раньше думали, что префиксы нужны только потому что на дворе был не 2013-й? Они нужны из-за того, что спецификация меняется и свойства могут в будущем работать по-другому, а в свойстве с префиксом можно оставить старое поведение.

XaocCPS Jun 28 2013 at 17:41

>>В настоящее время Internet Explorer не поддерживает это API.

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

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

KREGI Jun 28 2013 at 17:44

Исправил, спасибо

ssneg Jun 28 2013 at 21:48

Простите, а чем это отличается от нажатия F11, с т.з. пользователя?

KREGI Jun 28 2013 at 21:54

можно назначить не только на нажатие кнопки полноэкранный режим. Например при нажатии на воспроизведение видео, можно включить браузер в полноэкранный режим, без участия пользователя. Так же, например, автоматическое включение полноэкранного режима в какой нибудь игре… в общем на что фантазии хватит. Главное что можно включать полноэкранный режим без участия пользователя (без F11), т.е. программными средствами и без флеша (как было раньше)…

bolk Jun 29 2013 at 10:30

Зачем так писать? Страшненький код какой-то.

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) {}
}

KREGI Jun 29 2013 at 11:34

для наглядности.

alex_blank Feb 19 2014 at 16:08

можно и без try/catch

(o.requestFullscreen ||… || function () {}) ()

rekzi Jul 6 2013 at 00:25

Библиотечка — screenfull.js

webMarshal Oct 2 2015 at 17:11

function fullScreenCancel() {
  if(document.requestFullscreen) {
    document.requestFullscreen();
  } else if(document.webkitRequestFullscreen ) {
    document.webkitRequestFullscreen();
  } else if(document.mozRequestFullscreen) {
    document.mozRequestFullScreen();
  }
}

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

KREGI Oct 3 2015 at 22:40

Да, с реализацией для разных браузеров.

webMarshal Oct 3 2015 at 22:52

Вы не заметили что реализация метода перехода в fullscreen а не ухода с него?

KREGI Oct 3 2015 at 23:12

Да, ошибочка получается, надо cancelFullScreen()

Show the best of all time