¿Hay alguna manera de hacer video HTML5 en pantalla completa?

¿Hay alguna manera de reproducir un video a pantalla completa con la <video>etiqueta HTML5 ?

Y si esto no es posible, ¿alguien sabe si hay una razón para esta decisión?

HTML 5 no proporciona ninguna forma de hacer una pantalla completa de video, pero la especificación paralela de pantalla completa proporciona el requestFullScreenmétodo que permite que los elementos arbitrarios (incluidos los <video>elementos) se conviertan en pantalla completa.

Tiene soporte experimental en varios navegadores .

Respuesta original:

De la especificación HTML5 (al momento de escribir: junio '09):

Los agentes de usuario no deben proporcionar una API pública para que los videos se muestren en pantalla completa. Una secuencia de comandos, combinada con un archivo de video cuidadosamente diseñado, podría engañar al usuario para que piense que se ha mostrado un cuadro de diálogo modal del sistema y solicitarle al usuario una contraseña. También existe el peligro de "mera" molestia, con páginas que lanzan videos de pantalla completa cuando se hace clic en los enlaces o se navega por las páginas. En cambio, se pueden proporcionar funciones de interfaz específicas de agente de usuario para permitir fácilmente al usuario obtener un modo de reproducción a pantalla completa.

Los navegadores pueden proporcionar una interfaz de usuario, pero no deberían proporcionar una interfaz programable.

Tenga en cuenta que la advertencia anterior se ha eliminado de la especificación.

La mayoría de las respuestas aquí están desactualizadas.

Ahora es posible llevar cualquier elemento a pantalla completa usando la API de pantalla completa , aunque todavía es un desastre porque no puede llamar div.requestFullScreen()a todos los navegadores, sino que debe usar métodos prefijados específicos del navegador.

He creado un contenedor simple screenfull.js que facilita el uso de la API de pantalla completa.

El soporte actual del navegador es:

• Chrome 15+
• Firefox 10+
• Safari 5.1+

Tenga en cuenta que muchos navegadores móviles aún no parecen admitir una opción de pantalla completa .

Safari lo soporta a través webkitEnterFullscreen.

Chrome debería admitirlo ya que también es WebKit, pero hay errores.

Chris Blizzard de Firefox dijo que saldrán con su propia versión de pantalla completa que permitirá que cualquier elemento vaya a pantalla completa. por ejemplo, lienzo

Philip Jagenstedt de Opera dice que lo admitirán en un lanzamiento posterior.

Sí, la especificación de video HTML5 dice que no es compatible con la pantalla completa, pero dado que los usuarios lo desean, y cada navegador lo admitirá, la especificación cambiará.

webkitEnterFullScreen();

Es necesario invocarlo en el elemento de etiqueta de video, por ejemplo, para visualizar a pantalla completa la primera etiqueta de video en el uso de la página:

document.getElementsByTagName('video')[0].webkitEnterFullscreen();

Aviso: esta es una respuesta desactualizada y ya no es relevante.

Muchos navegadores web modernos han implementado una API de pantalla completa que le permite enfocar la pantalla completa a ciertos elementos HTML. Esto es realmente genial para mostrar medios interactivos como videos en un entorno totalmente inmersivo.

Para que el botón de pantalla completa funcione, debe configurar otro detector de eventos que llamará a la requestFullScreen()función cuando se haga clic en el botón. Para asegurarse de que esto funcione en todos los navegadores compatibles, también deberá verificar si requestFullScreen()está disponible y recurrir a las versiones prefijadas del proveedor ( mozRequestFullScreeny webkitRequestFullscreen) si no lo está.

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

Referencia: - https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode Referencia: - http://blog.teamtreehouse.com/building-custom-controls-for-html5 -videos

Creo que si queremos tener una forma abierta de ver videos en nuestros navegadores sin complementos de código cerrado (y todas las brechas de seguridad que vienen con la historia del complemento flash ...). La etiqueta tiene que encontrar una manera de activar la pantalla completa. Podríamos manejarla como lo hace el flash: para hacer la pantalla completa, debe activarse con un clic izquierdo con el mouse y nada más, quiero decir que ActionScript no puede iniciarla pantalla completa al cargar un flash por ejemplo.

Espero haber sido lo suficientemente claro: después de todo, solo soy un estudiante francés de informática, no un poeta inglés :)

¡Nos vemos!

De CSS

video {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}

Una forma programable de hacer pantalla completa está funcionando ahora tanto en Firefox como en Chrome (en sus últimas versiones). La buena noticia es que aquí se ha redactado una especificación:

http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

Todavía tendrá que lidiar con los prefijos de proveedores por ahora, pero todos los detalles de implementación se están rastreando en el sitio de MDN:

https://developer.mozilla.org/en/DOM/Using_full-screen_mode

Puede cambiar el ancho y la altura para que sean del 100%, pero no cubrirá el navegador Chrome ni el shell del sistema operativo.

La decisión de diseño es porque HTML vive dentro de la ventana del navegador. Los complementos de Flash no están dentro de la ventana, por lo que pueden pasar a pantalla completa.

Esto tiene sentido, de lo contrario, podría hacer etiquetas img que cubrieran el shell, o hacer etiquetas h1 para que toda la pantalla fuera una letra.

No, no es posible tener un video de pantalla completa en html 5. Si quieres saber las razones, tienes suerte porque la batalla de argumentos para la pantalla completa se libra en este momento. Vea la lista de correo WHATWG y busque la palabra "video". Personalmente espero que proporcionen API de pantalla completa en HTML 5.

Firefox 3.6 tiene una opción de pantalla completa para videos HTML5, haga clic derecho en el video y seleccione 'pantalla completa'.

Los últimos sitios nocturnos de Webkit también admiten video HTML5 a pantalla completa, pruebe el reproductor Sublime con el último nocturno y mantenga presionado Cmd / Ctrl mientras selecciona la opción de pantalla completa.

Supongo que Chrome / Opera también admitirá algo como esto. Esperemos que IE9 también sea compatible con video HTML5 a pantalla completa.

Esto es compatible con WebKit a través de webkitEnterFullscreen .

Una solución alternativa sería tener que navegar simplemente proporcionando esta opción en el menú contextual. No es necesario tener Javascript para hacer esto, aunque pude ver cuándo sería útil.

Mientras tanto, una solución alternativa sería simplemente maximizar la ventana (Javascript puede proporcionar dimensiones de pantalla) y luego maximizar el video dentro de ella. Pruébelo y luego simplemente vea si los resultados son aceptables para sus usuarios.

El video HTML 5 pasa a pantalla completa en la última versión nocturna de Safari, aunque no estoy seguro de cómo se realiza técnicamente.

La solución completa:

    function bindFullscreen(video) {
            $(video).unbind('click').click(toggleFullScreen);
    }

    function toggleFullScreen() {
            if (!document.fullscreenElement &&    // alternative standard method
                    !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
                    if (document.documentElement.requestFullscreen) {
                            document.documentElement.requestFullscreen();
                    } else if (document.documentElement.msRequestFullscreen) {
                            document.documentElement.msRequestFullscreen();
                    } else if (document.documentElement.mozRequestFullScreen) {
                            document.documentElement.mozRequestFullScreen();
                    } else if (document.documentElement.webkitRequestFullscreen) {
                            document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                    }
            } 
            else {
                    if (document.exitFullscreen) {
                            document.exitFullscreen();
                    } else if (document.msExitFullscreen) {
                            document.msExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                            document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) {
                            document.webkitExitFullscreen();
                    }
            }
    }

Si tiene la opción de definir su sitio como aplicación web progresiva (PWA), también hay una opción para usar display: "fullscreen"en manifest.json . Pero esto solo funcionará si el usuario agrega / instala su aplicación web a la pantalla de inicio y la abre desde allí.

Si. Bueno, lo que sucede con el video HTML5 es que simplemente coloca la <video>etiqueta y el navegador le dará su propia interfaz de usuario y, por lo tanto, la capacidad de visualización en pantalla completa. Realmente nos hace la vida mucho mejor a nosotros, los usuarios, no tener que ver el "arte" que algunos desarrolladores que juegan con Flash podrían hacer :) También agrega coherencia a la plataforma, lo cual es bueno.

es simple, todos los problemas pueden resolverse así,

1) tener escape siempre lo saca del modo de pantalla completa (esto no se aplica a ingresar manualmente a pantalla completa a través de f11)

2) muestra temporalmente un pequeño banner que dice que se ingresó al modo de video en pantalla completa (por el navegador)

3) bloquea la acción de pantalla completa de forma predeterminada, tal como se ha hecho para las ventanas emergentes y la base de datos local en html5 y la API de ubicación y etc., etc.

No veo ningún problema con este diseño. Alguien piensa que me perdí algo?

A partir del canal de desarrollo de Chrome 11.0.686.0 , Chrome ahora tiene video en pantalla completa.

Puede hacer esto si le dice al usuario que presione F11 (pantalla completa para muchos navegadores) y coloca el video en todo el cuerpo de la página.

Si ninguna de estas respuestas no funciona (como no lo hicieron para mí), puede configurar dos videos. Uno para el tamaño normal y otro para el tamaño de pantalla completa. Cuando quieras cambiar a pantalla completa

1. Use javascript para establecer el atributo 'src' del video a pantalla completa en el atributo 'src' del video más pequeño
2. Configure video.currentTime en el video de pantalla completa para que sea el mismo que el video pequeño.
3. Use css 'display: none' para ocultar el video pequeño y mostrar el grande con la vía 'position: absolute' y 'z-index: 1000' o algo realmente alto.