Api fullscreen con html5

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

Ya hace mas de 1 año youtube comenzo a usa su reproductor en html5 y algo que me dejaba con la duda era como hacia para hacer el fullscreen del video ya veo que era la API Fullscreen de javascript que nos permite colocar un elemento de nuestro documento html en toda la pantalla y esto funciona como nativo en los smartphone.

como es una tecnologia experimental pueda que tenga cambios en nuevas versiones de navegadores ahora funciona en motores Gecko  y WebKit

Standar -> requestFullScreen()

Gecko -> element.mozRequestFullScreen()

WebKit -> element.webkitRequestFullscreen().

 

con este script ya tenemos para hacer el fullscreen

function launchFullscreen(element) {
//comprobamos si el navegador detecta la api ya que si no lo detecta seguira con moz y webkit
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
//comprobamos si el navegador detecta la api ya que si no lo detecta seguira con moz y webkit
function cancelFullscreen() {
if(document.cancelFullScreen) {
document.cancelFullScreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}

en boton para llamar la accion seria por ejemplo asi

<button onclick="launchFullscreen(document.getElementById('noticias'));">Launch Fullscreen</button>

aqui estoy estoy colocando en fullscreen todo el contenido de elemento con la id noticias tambien agregue la funcion para cancelar el fullscreen con una funcion javascript que debe estar en algun boton dentro del elemento noticias.

El soporte de esta API a la fecha de hoy
Escritorio

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 15 -webkit 9.0 (9.0) -moz ? ? 5.0 -webkit
fullScreenEnabled 20 -webkit 10.0 (10.0) -moz ? ? 5.1 -webkit

Mobil

Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? 9.0 (9.0)-moz ? ? ?
fullScreenEnabled ? 10.0 (10.0) moz ? ? ?
Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

Related posts:


Luis Rodriguez

Desarrollador web / webdeveloper / programador web / Front end / Back End. Mi nombre es Luis Rodriguez con experiencia de 7 años en negocios por internet y un apasionante del mundo de las tecnologias web. Twitter Facebook Google +

Comentarios