Fullscreen javascript API или как развернуть страницу на весь экран c html5.

Давайте познакомимся с еще одним, довольно молодым API, необходимость которого уже давно терзает умы разработчиков игр, видеосайтов и прочих полноэкранных сервисов. Fullscreen javascript API пока является черновиком, но уже поддерживается в chrome, safari, ff и опере.

Internet-explorer (включая Ie10) как всегда замедляет прогресс, ну и пусть себе умирает.

Без лишних слов перейдем к примеру:

Демо

fullscreen API

Как устроен fullscreen API?

Спецификация представляет из себя:

  • 2 метода: requestFullScreen и cancelFullScreen
  • 2 свойства обекта document: fullscreenElement и fullscreenEnabled
  • 1 событие fullscreenchange

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

Запустить отображение в полноэкранном режиме

Javascript

document.documentElement.requestFullScreen(); // отобразить страницу в полноэкранном режиме
document.getElementById("video1").requestFullScreen(); // отобразить элемент в полноэкранном режиме

Выйти из полноэкранного режима

JavaScript

document.cancelFullScreen();

2 свойства объекта document

JavaScript

fullscreenElement = document.fullscreenElement; // элемент который в данный момент находится в полноэкранним режиме
fullscreenEnabled = document.fullscreenEnabled; // статус (true или false)

Событие об изменениии режима

JavaScript

element.addEventListener("fullscreenchange", function(e){
  console.log('статус fullscreen = ', document.fullscreenEnabled);
});

Ну а пока API довольно новое, все свойства, события и методы можно использовать только с префиксами (03.2013)

Вот несколько функций, которые могут помочь.

JavaScript

//Запустить отображение в полноэкранном режиме
function launchFullScreen(element) {
  if(element.requestFullScreen) {
    element.requestFullScreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  }
}

// Выход из полноэкранного режима
function cancelFullscreen() {
  if(document.cancelFullScreen) {
    document.cancelFullScreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  }
}

var onfullscreenchange =  function(e){
  var fullscreenElement = 
    document.fullscreenElement || 
    document.mozFullscreenElement || 
    document.webkitFullscreenElement;
  var fullscreenEnabled = 
    document.fullscreenEnabled || 
    document.mozFullscreenEnabled || 
    document.webkitFullscreenEnabled;
  console.log( 'fullscreenEnabled = ' + fullscreenEnabled, ',  fullscreenElement = ', fullscreenElement, ',  e = ', e);
}

// Событие об изменениии режима
el.addEventListener("webkitfullscreenchange", onfullscreenchange);
el.addEventListener("mozfullscreenchange",    onfullscreenchange);
el.addEventListener("fullscreenchange",       onfullscreenchange);

CSS для fullscreen API

Псевдокласс :full-screen предназначен для стилизации элементов в полноэкранном режиме.

Ниже приведен пример с префиксами -webkit- и -moz- , которые через некоторое время можно будет опустить и использовать просто :full-screen

CSS

/* красный фон для полноэкранного режима */

:-webkit-full-screen {
  background: red;
}
:-moz-full-screen {
  background: red;
}

/* полноэкранное отображение <video> */

:-webkit-full-screen video {
  width: 100%;
  height: 100%;
}

:-moz-full-screen video {
  width: 100%;
  height: 100%;
}

Как открыть IFRAME в fullscreen?

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

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

html

<iframe webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" src="http://google.com" />

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

Код примера в начале статьи

HTML

<div id="fs-container">
  <div class="fs_section" id="fs_section_img">
    <div id="i1"></div><div id="i2"></div><div id="i3"></div>
    <button onclick="enterFullscreen('fs_section_img')">Toggle iframe content fullscreen</button>
  </div>
  <div class="fs_section" id="fs_section_video"> 
    <video controls>
      <source src="/blogdemo/video/chrome.webm" type="video/webm" />
      <source src="/blogdemo/video/chrome.ogv" type="video/ogg" />
      <source src="/blogdemo/video/chrome.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'" />
    </video>
    <button onclick="enterFullscreen('fs_section_video')">Toggle iframe content fullscreen</button>
  </div>
</div>

JavaScript

document.cancelFullScreen = document.cancelFullScreen || document.webkitCancelFullScreen ||      document.mozCancelFullScreen;

function onFullScreenEnter() {
  console.log("Enter fullscreen initiated from iframe");
};

function onFullScreenExit() {
  console.log("Exit fullscreen initiated from iframe");
};

// Note: FF nightly needs about:config full-screen-api.enabled set to true.
function enterFullscreen(id) {
  onFullScreenEnter(id);
  var el =  document.getElementById(id);
  var onfullscreenchange =  function(e){
    var fullscreenElement = document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement;
    var fullscreenEnabled = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled;
    console.log( 'fullscreenEnabled = ' + fullscreenEnabled, ',  fullscreenElement = ', fullscreenElement, ',  e = ', e);
  }

  el.addEventListener("webkitfullscreenchange", onfullscreenchange);
  el.addEventListener("mozfullscreenchange",     onfullscreenchange);
  el.addEventListener("fullscreenchange",             onfullscreenchange);

  if (el.webkitRequestFullScreen) {
    el.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
  } else {
    el.mozRequestFullScreen();
  }
  document.querySelector('#'+id + ' button').onclick = function(){
    exitFullscreen(id);
  }
}

function exitFullscreen(id) {
  onFullScreenExit(id);
  document.cancelFullScreen();
  document.querySelector('#'+id + ' button').onclick = function(){
    enterFullscreen(id);
  }
}

CSS

:-webkit-full-screen{
  background: black;
}

:-moz-full-screen {
  background: black;
}

:-webkit-full-screen#fs_section_video.fs_section,
:-webkit-full-screen#fs_section_img.fs_section{
  width:100%;
  left:0;
  top:0;
}

:-moz-full-screen#fs_section_video.fs_section,
:-moz-full-screen#fs_section_img.fs_section{
  width:100%;
  left:0;
}

:-webkit-full-screen#fs_section_img.fs_section #i1{
  display:none;
}

:-moz-full-screen#fs_section_img.fs_section #i1{
  display:none;
}

:-webkit-full-screen#fs_section_img.fs_section #i2{
  display:block;
  z-index:1;
}

:-moz-full-screen#fs_section_img.fs_section #i2{
  display:block;
  z-index:1;
}

:-webkit-full-screen#fs_section_img.fs_section #i3{
  opacity:1;
   display:block;
   z-index:2;
  -webkit-transition: all 2s 2s ease-in-out;
}

:-moz-full-screen#fs_section_img.fs_section #i3{
  opacity:1;
   display:block;
   z-index:2;
  -moz-transition:    all 2s 2s ease-in-out;
}

Часть кода не приведена, что-бы не засорять статью. Вы всегда можете все посмотреть, проинпектировав пример в вашем любимом браузере.

Жду вопросов и отзывов в комментариях ;)

Метки: , , ,
22 комментария на “Fullscreen javascript API или как развернуть страницу на весь экран c html5.
  1. ram117 пишет:

    Спасибо за статью.. Как по мне то это уже давно востребованная функция,
    Жаль пока я так понял нет поддержки в Опере…
    А также хотелось-бы узнать по-поводу вашего примера для Mozzila , нехочет нормально отображать :( В Хроме всё отлично!
    В коде указана вроде проверка для Mozzila ,но пока не получаецо :)

  2. Ростислав пишет:

    Здравствуйте! А как сделать такое с флеш игрой swf? Просто когда пишу фиксированную ширину для сайта то потом когда сделаю на весь экран его размер такой же просто появится фон. А если поставлю процентами то все ок.

    <param name="game" value="”>
    <embed src="/games/” width=”800px” height=”650px”>

    <button onclick="enterFullscreen('fs_section_video')">Toggle iframe content fullscreen</button>

  3. Ростислав пишет:

    Все сделал, работает, спасибо за скрипт!

  4. Вадим пишет:

    Удивительно, но срабатывает только при переходе с обычного режима в FullScreen, а открыть браузер по-умолчанию в режиме fullscreen не хочет.
    Например так:
    $(function(){
    document.documentElement.requestFullScreen();
    }

    • admin пишет:

      requestFullscreen() не может быть вызван без действий пользователя (в хроме так точно). Поэтому он может быть запущен по:

      • click (кнопка или ссылка…)
      • нажатию клавиш (keydown, keypress…)
      • allowfullscreen аттрибут у iframe

      в спеке от W3:

      “…To prevent embedded content from going fullscreen only embedded content specifically allowed via the allowfullscreen attribute of the HTML iframe element will be able to go fullscreen. This prevents untrusted content from going fullscreen…”

  5. Alex пишет:

    Привет! Всё работает если только JS внутри HTML, когда пробую вынести код в подключённый JS- не работает. Как решить эту проблему?

  6. Станиалв пишет:

    Все работает замечательно, но после перехода по ссылке на другую страницу сайта fullscreen выходит в обычный режим. Тогда как при запуске fullscreen на f11 такого нет. Как добиться такого результата?

    • Думаю, что это логично для браузера.
      Fullscreen режим попросила только Ваша страница.
      При переходе на другой таб он отключает fullscreen.

      В случае же f11 – вы включаете fullscreen для всех табов

  7. Sergio пишет:

    Про IE11 забыли:
    http://msdn.microsoft.com/ru-ru/library/ie/dn265028(v=vs.85).aspx

    Но у меня почему-то криво работает: отсутствуют полосы прокрутки, если размер открытой страницы превышает разрешение экрана (такое ощущение, будто “overflow: hidden;” по умолчанию и фиг его изменишь) :-(

  8. zzz пишет:

    а готовый пример открытия фрейма архивом загрузить? как пример

  9. zzz пишет:

    проверил на Android 4.1 браузер 4.48 не открывается : / и на Safari + Windows
    Как то можете поправить код? или подсказать работающие аналоги? Спасибо!!!!! очень нужно

  10. zzz пишет:

    автор ответишь или игнорить будешь? : /

  11. Рустам пишет:

    Добрый день! Меня интересует можно ли сделать так чтобы при нажатие кнопки плей allowfullscreen сработивал автоматом видео в
    iframe

  12. Нет пишет:

    А как быть с swf? Размер не меняется при переходе в fullscreen

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

* Copy This Password *

* Type Or Paste Password Here *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Узнавай о новых статьях первым!

Спасибо за лайк в FACEBOOK
Подписывайтесь на новости вконтакте
Последние статьи от html5.by