Давайте познакомимся с еще одним, довольно молодым 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;
}

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

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

PDF и версия для печати