Знакомство с HTML5-API Fullscreen
8 июля 2013, 15:00. Разместил: Design FactoRy
Вдобавок ко множеству полезных новых элементов, 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;
}
Мы решили отобразить иконку в 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);
}
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, и наше изображение будет выведено на весь экран, как показано на скриншоте ниже:
CSS Fullscreen
Webkit (а также Firefox) также предоставляет набор новых псевдо-классов, которые позволяют нам добавлять правила стилей, когда элемент находится в полноэкранном режиме. Предполжим, что нам нужно изменить фон. Тогда мы можем расписать правила стилизации следующим образом:
#fullscreen:-webkit-full-screen {
background-image: url('../img/ios-linen.jpg');
width: 100%;
}Теперь вы можете видеть представленную текстуру в полноэкранном режиме.
На этом все. Вы можете перейти на страницу демо, чтобы увидеть API в действии. Так как мы не определили функцию с синтаксисом для Firefox, данное демо будет работать только в семействе браузеров Webkit, а также в Google Chrome и Safari.
* Посмотреть демо
Ссылки
* Черновик Fullscreen API - W3C
* Применеие полноэкранного режима - MDN
* HTML5 Fullscreen API - Sitepoint
Вернуться назад