Главная > Образование и Изучение > Знакомство с HTML5-API Fullscreen

Знакомство с HTML5-API Fullscreen


8 июля 2013, 15:00. Разместил: Design FactoRy
В принципе, у нас всегда была возможность раскрывать веб-страницу на весь экран. Чтобы сделать это, можно просто нажать F11 в Windows, или Shift + Command + F в Mac. Тем не менее, бывают случаи, когда мы как веб-разработчики желаем добавить на страницу сайта триггер, который позволяет автоматически производить эту функцию, и не вынуждать пользователей пользоваться дополнительными клавишами.

Знакомство с HTML5-API Fullscreen

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

* Посмотреть демо

Что касается реализации, данный API будет очень удобен для демонстрации видео, изображений, онлайн-игр, а также презентаций, организованных на HTML/CSS.

Итак, давайте посмотрим, как это работает.

Браузерная поддержка

На момент написания данного материала, этот API работал только в Google Chrome, Safari и Firefox. Подобно CSS3, в синтаксисе используются префиксы, так как пока что API находится в экспериментальной стадии.

Метод для вывода веб-страницы или определенного элемента на весь экран:

Webkit : webkitRequestFullScreen
Firefox : mozRequestFullScreen

Метод для выхода из полноэкранного режима:

Webkit : webkitCancelFullscreen
Firefox : mozCancelFullscreen

Метод для проверки, выведен ли элемент на весь экран:

Webkit : mozFullScreenElement
Firefox : webkitFullScreenElement

Также стоит отметить, что Fullscreen API – это то, что со временем будет только совершенствоваться.

Примеры применения

Один из лучших способов чему-то научиться – это попробовать. Сегодня мы хотим поработать над простеньким проектом. Суть заключается в том, что у нас будет изображение и кнопка, которая будет выводить изображение на весь экран и возвращать вид обратно к обычному режиму.

HMTL-код

Давайте начнем с HTML-разметки. У нас есть div-элемент, который оборачивает изображение и span-элемент для кнопки.

<div id="fullscreen" class="html5-fullscreen-api">
<img src="img/arokanddedes.jpg">
<span class="fs-button"></span>
</div>

CSS-код

Затем мы помещаем изображение в центр окна, а также добавляем несколько декоративных стилей, чтобы сделать его более привлекательным.

.demo-wrapper {
width: 38%;
margin: 0 auto;
}
.html5-fullscreen-api {
position: relative;
}
.html5-fullscreen-api img {
max-width: 100%;
border: 10px solid #fff;
box-shadow: 0px 0px 50px #ccc;
}
.html5-fullscreen-api .fs-button {
z-index: 100;
display: inline-block;
width: 32px;
height: 32px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}

Знакомство с HTML5-API Fullscreen
источник изображения

Мы решили отобразить иконку в span-элементе при помощи псевдо-элемента :after, чтобы позже иметь возможность без усилий изменить иконки посредством CSS при помощи атрибута content.

.html5-fullscreen-api .fs-button:after {
display: inline-block;
width: 100%;
height: 100%;
font-size: 32px;
font-family: 'ModernPictogramsNormal';
color: rgba(255,255,255,.5);
cursor: pointer;
content: "v";
}
.html5-fullscreen-api .fs-button:hover:after {
color: rgb(255,255,255);
}

Знакомство с HTML5-API Fullscreen

javascript-код

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

Как уже было отмечено, мы выводим изображение на весь экран при помощи клика. Мы оборачиваем функцию в jQuery-функцию .on.

$('.fs-button').on('click', function(){ 

}

Сначала мы проверяем, не выведен ли элемент в полноэкранный режим, и если будет получено условие, мы выполняем webkitCancelFullScreen, чтобы вернуть его в обычный режим. В противном случае, мы выводим его в полноэкранный режим при помощи метода webkitRequestFullScreen следующим образом:

$('.fs-button').on('click', function(){
var elem = document.getElementById('fullscreen');
if(document.webkitFullscreenElement) {
document.webkitCancelFullScreen();
}
else {
elem.webkitRequestFullScreen();
};
});

Нажмите по иконке fullscreen, и наше изображение будет выведено на весь экран, как показано на скриншоте ниже:

Знакомство с HTML5-API Fullscreen

CSS Fullscreen

Webkit (а также Firefox) также предоставляет набор новых псевдо-классов, которые позволяют нам добавлять правила стилей, когда элемент находится в полноэкранном режиме. Предполжим, что нам нужно изменить фон. Тогда мы можем расписать правила стилизации следующим образом:

#fullscreen:-webkit-full-screen {
background-image: url('../img/ios-linen.jpg');
width: 100%;
}

Теперь вы можете видеть представленную текстуру в полноэкранном режиме.

Знакомство с HTML5-API Fullscreen

На этом все. Вы можете перейти на страницу демо, чтобы увидеть API в действии. Так как мы не определили функцию с синтаксисом для Firefox, данное демо будет работать только в семействе браузеров Webkit, а также в Google Chrome и Safari.

* Посмотреть демо

Ссылки

* Черновик Fullscreen API - W3C
* Применеие полноэкранного режима - MDN
* HTML5 Fullscreen API - Sitepoint
Вернуться назад