Desde que llego la etiqueta video o la posibilidad de incrustar video en la Web sin necesidad de utilizar plugins fue sin duda una excelente noticia pero lo que no llego a convencer a todos es la falta de poder ver el video a Pantalla Completa, lo mas cercano a esto era la posibilidad de ver el video en tamaño 100% de la ventana o navegador.
Nuevas actualizaciones de los navegadores ha podido agregar esta funcionalidad tan demandada por los desarrolladores para ofrecer mejores aplicaciones tales como Safari 5 y Google Chrome 15 o versiones beta como Firefox 8.
Si ya deseas implementarlo por lo menos en Google Chrome y Safari entonces puedes aplicar lo siguiente:
Nuevas funciones de JavaScript
Esta función aplica al motor WebKit (Chrome y Safari)
webkitEnterFullScreen()
Esta función aplica al motor de Gecko (Firefox)
mozRequestFullScreen()
Aplicando las funciones a un video
Es tan sencillo realizar un botón para video en Pantalla Completa como hacer un botón que envíe un Alert con un mensaje, hay muchas maneras de hacerlo pero solo vamos a darles la idea de cómo se puede hacer.
Ya teniendo listo el código HTML con el video incrustado
<video id="video" width="320" height="240" controls>
<source src="http://html5facil.com/demos/videos/big_buck_bunny.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="http://html5facil.com/demos/videos/big_buck_bunny.mp4" type='video/mp4; codecs="avc1,mp4a"'>
</video><br />
<button id="completa" class="button">Video a pantalla completa</button>
Creamos el código JavaScript utilizando JQuery obteniendo el evento Click de una etiqueta Button, quiere decir que cuando el usuario de Click en el botón, el evento se ejecutara, en este caso la función de Pantalla Completa.
$(document).ready(function(){
//Funcion que se activa al evento click del button o boton
$('#completa').click(function(){
// Codigo para activar pantalla completa en Chrome o Safari 5
//Seleccionamos el elemnento video del ID video, en este caso la misma etiqueta video
$('#video')[0].webkitEnterFullScreen();
/* Codigo para activar pantalla completa en Firefox 8 o proximas actualizaciones
$('#video')[0].mozRequestFullScreen();
*/
});
});
Nota: Para que sea utilizado en los 2 navegadores necesitas comparar la compatibilidad de las funciones ya que las 2 al mismo tiempo crean un error.
Con este tutorial puedes empezar a experimentar o aplicarlo a pequeños proyectos que no exijan ser utilizados en todos los navegadores ya que no todos lo soportan a un pero en un futuro podría aplicarse igual.
Puedes ver el demo funcionando en Safari o Chrome aqui mismo
heyy muy buen tutorial, excelente, recién le entro a html5 me quedé muy atrasado, es hora de actualizar 😛
Gracias, que bueno que te sirva.
hola estaba probando este codigo pero no se como se hace si pongo un vodeo desde una carpeta en mi escritorio el video tiene el nombre de bd.mp4 pero no se en que parte lo ubico! si me ayudaras te agradecería mucho!
Saludos, Como hacer para que el video se reproduzca automáticamente y en pantalla completa al introducir la dirección web, lo requiero para un sub domino de clientes donde solo verán un video demostrativo.
Si te das cuenta, esta opción se ejecuta al dar click en el boton "completa", entonces puedes intentar poner esta función en el evento "document ready" para que funcione al momento de estar listo el sitio web.
Existe algo para Full screen de un documento html5 normal?
Se puede, pero solo si el usuario así lo desea.
<code>fullscreen = function(e){
if (e.webkitRequestFullScreen) {
e.webkitRequestFullScreen();
} else if(e.mozRequestFullScreen) {
e.mozRequestFullScreen();
}
}
document.getElementById('ejemplo-fullscreen').onclick = function(){
fullscreen(document.getElementById('content'));
}</code>