- Запустити відображення в повноекранному режимі
- Вийти з повноекранного режиму
- 2 властивості об'єкта document
- Подія про зміну режиму
- Ну а поки API досить нове, все властивості, події і методи можна використовувати тільки з префіксами (03.2013)
- JavaScript
- CSS
- html
- HTML
- JavaScript
- CSS
Давайте познайомимося з ще одним, досить молодим API, необхідність якого вже давно мучить уми розробників ігор, відеосайтів і інших повноекранних сервісів. Fullscreen javascript API поки є чернеткою , Але вже підтримується в chrome, safari, ff і опері.
Internet-explorer (включаючи Ie10) як завжди уповільнює прогрес, ну і нехай собі вмирає.
Без зайвих слів перейдемо до прикладу:
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);
Псевдоклас: 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%; }
Часто буває, що контент, який ви хочете відобразити в повноекранному режимі, знаходиться у фреймі.
Це типовий випадок вбудовування відео з різних місць для розміщення відеофайлів до себе на сайт. Для того, щоб все працювало як треба, необхідно додати атрибут 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; }
Частина коду не приведена, що-б не засмічувати статтю. Ви завжди можете все подивитися, проінпектіровав приклад в вашому улюбленому браузері.
Чекаю питань і відгуків в коментарях;)