HTML5, браузер на весь экран

6 Июл
2012

HTML5 Fullscreen API



Вступление


Всем доброго времени суток. Недавно в моей практике проскочила идея сделать веб-приложение по настоящему приложением, то есть чтобы можно было работать с ним на весь экран. Конечно для этого существуют горячие клавиши в браузере, к примеру F11 в chrome, но лично мне не хотелось оповещать пользователей с помощью подсказок, и в HTML5 нашелся ответ.

Методы


А теперь разберем как же нам открыть нашу веб-страничку на весь экран.

element.requestFullScreen()
Открывает конкретный элемент на весь экран, к примеру,
document.getElementById(“myvideo”).requestFullScreen()
откроет элемент с id=«myvideo» на весь экран.

document.cancelFullScreen()
Выводит браузер из полноэкранного режима в стандартный.

document.fullScreen
Возвращает true если браузер в полноэкранном режиме

:full-screen
CSS псевдокласс, применяемый к элементу, когда браузер в полноэкранном режиме.

Пример


А теперь немножко кода

var prfx = ["webkit", "moz", "ms", "o", ""];  
function RunPrefixMethod(obj, method) {  
    var p = 0, m, t;  
    while (p < prfx.length && !obj[m]) {  
        m = method;  
        if (prfx[p] == "") {  
            m = m.substr(0,1).toLowerCase() + m.substr(1);  
        }  
        m = prfx[p] + m;  
        t = typeof obj[m];  
        if (t != "undefined") {  
            prfx = [prfx[p]];  
            return (t == "function" ? obj[m]() : obj[m]);  
        }  
        p++;  
    }  
}  


Эта функция будет выводить браузер в полноэкранный режим и обратно, поскольку официально данная функция, как мне известно, не включена в HTML5 работает она с префиксами, для chrome и safari — .webkit, для firefox — .moz, для ie — ms и для оперы — .o

а теперь пример обращения

var elm = document.getElementById("yourelementid");  
elm.onclick = function() {  
    if (RunPrefixMethod(document, "FullScreen") || RunPrefixMethod(document, "IsFullScreen")) {  
        RunPrefixMethod(document, "CancelFullScreen");  
    }  
    else {  
        RunPrefixMethod(elm, "RequestFullScreen");  
    }  
}  


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

Это все, что я хотел написать на эту тему. До новых встреч.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх