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

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

Ahora es posible traer cualquier elemento a pantalla completa usando la API Fullscreen, aunque sigue siendo un desastre porque no solo se puede llamar a div.requestFullScreen() en todos los navegadores, sino que debe usar métodos prefijados específicos del navegador.

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

El soporte actual del navegador es:

• Cromo 15+
• Firefox 10+
• Safari 5.1 +

Tenga en cuenta que muchos navegadores móviles no parecen soportar una opción de pantalla completa todavía.

Safari lo soporta a través de webkitEnterFullscreen.

Chrome debe ser compatible ya que es WebKit también, pero errores de salida.

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

Philip Jagenstedt de Opera dice que lo apoyarán en una versión posterior.

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

webkitEnterFullScreen();

Esto necesita ser llamado en el elemento de etiqueta de vídeo, por ejemplo, a pantalla completa la primera etiqueta de vídeo en el uso de la página:

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

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

Creo que si queremos tener una forma abierta de ver videos en nuestros navegadores sin ningún complemento de código cerrado (y todas las brechas de seguridad que viene con el historial del complemento flash...). La etiqueta tiene que encontrar una manera de activar la pantalla completa.. Podríamos manejarlo como lo hace flash: para hacer fullscreen, tiene que ser activado con un clic izquierdo con el ratón y nada más, quiero decir que no es posible con ActionScript lanzar fullscreen al cargar un flash por ejemplo.

Espero He sido lo suficientemente claro: Después de todo, solo soy un estudiante francés de TI, no un poeta inglés :)

Nos Vemos!

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 una especificación ha sido borrador aquí:

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

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

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

Muchos navegadores web modernos han implementado una API de pantalla completa que le permite dar un enfoque de 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 receptor de eventos que llamará a la función requestFullScreen() cuando se haga clic en el botón. Para asegurarse de que esto funcione en todos los navegadores compatibles, también necesitará verificar si el requestFullScreen() está disponible y se puede recurrir a las versiones con prefijo de proveedor (mozRequestFullScreen y 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

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

La decisión de diseño se debe a que HTML vive dentro de la ventana del navegador. Los complementos de Flash no están dentro de la ventana, por lo que pueden ir 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 video a pantalla completa en html 5. Si quieres saber las razones, tienes suerte porque la batalla de argumento para pantalla completa se libra en este momento. Vea WHATWG mailing list 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 Webkit nightlies también admiten video HTML5 de pantalla completa, pruebe el Sublime player con la última noche y mantenga presionado Cmd / Ctrl mientras selecciona la opción de pantalla completa.

Supongo que Chrome / Opera también soportará algo como esto. Esperemos que IE9 también será compatible con la pantalla completa de vídeo HTML5.

Esto es soportado en WebKit a través de webkitEnterFullscreen.

Desde 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 solución alternativa sería tener que browser simplemente proporcionar 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. Dale una oportunidad y luego simplemente ver si los resultados son aceptables para sus usuarios.

El video HTML 5 va a pantalla completa en la última compilación nocturna de Safari, aunque no estoy seguro de cómo se logra 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();
                    }
            }
    }

Sí. Bueno, lo que sucede con el video HTML5 es que solo pones la etiqueta <video> y el navegador le dará su propia interfaz de usuario, y por lo tanto la capacidad de visualización a pantalla completa. Realmente hace la vida mucho mejor en los usuarios de nosotros no tener que ver el "arte" que algún desarrollador jugando con Flash podría hacer :) También agrega consistencia a la plataforma, lo cual es bueno.

Es simple, todos los problemas se pueden resolver así,

1) haz que escape siempre te saque del modo de pantalla completa (esto no se aplica a la introducción manual de pantalla completa a través de f11)

2) mostrar temporalmente un pequeño banner que diga que se ingresa el modo de video a pantalla completa (por el navegador)

3) bloquear la acción de pantalla completa de forma predeterminada, al igual que 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 esto diseño. ¿alguien cree que me perdí algo?

A partir de Chrome 11.0.686.0 dev channel Chrome ahora tiene video a 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 desee cambiar a pantalla completa

1. Use javascript para establecer el atributo 'src' del video de pantalla completa al atributo 'src' de videos más pequeños
2. Establecer el vídeo.currentTime en el video de pantalla completa para ser 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.