reproducir - video de fondo html5 responsive

¿Hay alguna manera de hacer que el video HTML5 sea de pantalla completa?

Question

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

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

Answer 1

A partir de Chrome 11.0.686.0, el canal dev Chrome ahora tiene video a pantalla completa.

Answer 2

Creo que si queremos tener una forma abierta de ver videos en nuestros navegadores sin ningún plugin de fuente cerrada (y todas las violaciones de seguridad que vienen con el historial del plugin flash ...). La etiqueta tiene que encontrar la manera de activar la pantalla completa ... Podríamos manejarlo como lo hace el flash: para hacer pantalla completa, tiene que activarse haciendo clic izquierdo con el mouse y nada más, quiero decir que no es posible que ActionScript lance pantalla completa en la carga de un flash por ejemplo.

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

¡Nos vemos!

Answer 3

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;
}

Answer 4

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

Answer 5

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

Answer 6

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

Las últimas versiones nocturnas de Webkit también admiten video HTML5 en pantalla completa, prueba el reproductor Sublime con la última función nocturna y mantén presionada Cmd / Ctrl mientras seleccionas la opción de pantalla completa.

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

Answer 7

HTML 5 no proporciona ninguna forma de hacer un video de pantalla completa, pero la especificación de pantalla completa paralela proporciona el método requestFullScreen que permite que los elementos arbitrarios (incluidos los elementos de <video> ) se hagan a pantalla completa.

Tiene soporte experimental en varios navegadores .

Respuesta original:

De la especificación de HTML5 (en el momento de la redacción: junio de 2009):

Los agentes de usuario no deberían proporcionar una API pública para hacer que los videos se muestren a 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 una "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 su lugar, se pueden proporcionar funciones de interfaz específicas de usuario-agente para permitir fácilmente al usuario obtener un modo de reproducción de pantalla completa.

Los navegadores pueden proporcionar una interfaz de usuario, pero no deben proporcionar una interfaz programable.

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

Answer 8

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 sigue siendo un desastre porque no puedes simplemente llamar a div.requestFullScreen() en todos los navegadores, pero div.requestFullScreen() usar los métodos prefijados específicos del navegador.

screenfull.js 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 ser compatibles con una opción de pantalla completa .

Answer 9

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();
                    }
            }
    }

Answer 10

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

Para que funcione el botón de pantalla completa, debe configurar otro oyente de eventos que llame a la función requestFullScreen() cuando se requestFullScreen() clic en el botón. Para asegurarse de que esto funcione en todos los navegadores admitidos, también necesitará verificar si requestFullScreen() está disponible y si requestFullScreen() está disponible para las versiones con prefijo del proveedor ( mozRequestFullScreen y webkitRequestFullscreen ), de lo contrario.

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

Answer 11

No, no es posible tener video a pantalla completa en html 5. Si quieres saber los motivos, tienes suerte porque ahora se libra el argumento batalla por pantalla completa. Consulte la lista de correo de WHATWG y busque la palabra "video". Personalmente espero que proporcionen API de pantalla completa en HTML 5.

Answer 12

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 se debe a que el 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 crear etiquetas img que cubrieran el shell, o crear etiquetas h1 para que toda la pantalla sea una letra.

Answer 13

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.

Answer 14

Sí. Bueno, lo que sucede con el video HTML5 es que acaba de colocar la etiqueta <video> y el navegador le dará su propia interfaz de usuario, y por lo tanto la posibilidad de verla en pantalla completa. Realmente hace la vida mucho mejor a los usuarios de nosotros para no tener que ver el "arte" que puede hacer un desarrollador que juega con Flash :) También agrega consistencia a la plataforma, lo cual es agradable.

Answer 15

Si ninguna de estas respuestas no funciona (como tampoco lo hicieron para mí), puede configurar dos videos. Uno para el tamaño regular 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'' de videos más pequeños.
2. Establezca video.currentTime en el video a pantalla completa para que coincida con el video pequeño.
3. Use css ''display: none'' para ocultar el video pequeño y muestre el más grande con la posición ''via'': absoluta ''y'' z-index: 1000 ''o algo realmente alto.

Answer 16

Una forma programable de hacer pantalla completa funciona 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

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

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

Answer 17

Una solución alternativa sería tener que navegar simplemente proporcione 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ébalo y luego simplemente mira si los resultados son aceptables para tus usuarios.

Answer 18

es simple, todos los problemas se pueden resolver 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) mostrar temporalmente una pequeña pancarta diciendo que el modo de video de pantalla completa es ingresado (por el navegador)

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

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

Answer 19

Safari lo admite a través de webkitEnterFullscreen .

Chrome debería ser compatible ya que también es WebKit, pero tiene errores.

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 un lanzamiento posterior.

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

Answer 20

webkitEnterFullScreen();

Esto debe invocarse en el elemento de etiqueta de video, por ejemplo, en la pantalla completa, use la primera etiqueta de video en la página:

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

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