Es allí una manera de reproducir un vídeo a pantalla completa usando HTML5 <video> etiqueta?

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

InformationsquelleAutor nicudotro | 2009-06-28

20 Comentarios

  1. 89

    HTML 5 no proporciona ninguna forma de hacer un vídeo a pantalla completa, pero el paralelo Pantalla completa de la especificación suministros de la requestFullScreen método que permite arbitraria de elementos (incluyendo <video> elementos) para verse a pantalla completa.

    Ha soporte experimental en un número de navegadores.


    Original respuesta:

    De la Especificación HTML5 (en el momento de la escritura: junio ’09):

    Los agentes de usuario no deberá proporcionar una
    API pública para causar videos se mostrarán
    pantalla completa. Una secuencia de comandos, combinado con un
    cuidadosamente diseñado archivo de vídeo, podría
    engañar al usuario en el pensamiento de un
    el sistema de diálogo modal que se había demostrado que,
    y que solicite al usuario una contraseña.
    También existe el peligro de «meras»
    molestia, con el lanzamiento de las páginas
    videos en pantalla completa cuando los enlaces son
    de clic o páginas de navegación. En su lugar,
    agente de usuario específicas características de la interfaz
    puede ser proporcionado para permitir fácilmente que la
    usuario para obtener una reproducción a pantalla completa
    modo.

    Navegadores pueden proporcionar una interfaz de usuario, pero no debería ser un programables uno.


    Tenga en cuenta que la advertencia ha sido eliminado en la especificación.

  2. 72

    La mayoría de las respuestas aquí son obsoletas.

    Ahora es posible llevar cualquier elemento en pantalla completa utilizando el La API de pantalla completa, aunque es todavía un buen lío porque no puedes llamar div.requestFullScreen() en todos los navegadores, pero tiene que usar el explorador prefijo métodos.

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

    Actual soporte de navegador es:

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

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

    • No su trabajo. Iframe1 tiene hijo iframe2 de iframe2 de pantalla completa se aplica no hace nada.
    • desde readme: «Si tu página dentro de un <iframe> usted tendrá que añadir un allowfullscreen atributo (+ webkitallowfullscreen y mozallowfullscreen).»
    • La demo parece que no funciona con Android 4.3 por defecto del navegador.
    • es este soporte móvil se desplaza ahora???
  3. 31

    Safari apoya a través de webkitEnterFullscreen.

    Chrome debe apoyar desde el WebKit también, pero los errores a cabo.

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

    Felipe Jagenstedt de Ópera dice que va a apoyar en una versión posterior.

    Sí, el vídeo HTML5 especificación dice no apoyar a pantalla completa, pero ya que los usuarios quieren, y cada navegador se va a apoyar, la especificación que se va a cambiar.

    • Esta respuesta está obsoleta, véase la respuesta por Sindre Sorhus (y luego votar, de modo que se apodera de estos fuera de la fecha de respuestas)
  4. 14
    webkitEnterFullScreen();

    Esto debe ser llamado en la etiqueta de vídeo elemento, por ejemplo, a pantalla completa el primer video de la etiqueta en la utilización de la página:

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

    Aviso: este es obsoleta respuesta y ya no son pertinentes.

    • Esta respuesta está obsoleta, véase la respuesta por Sindre Sorhus (y luego votar, de modo que se apodera de estos fuera de la fecha de respuestas)
    • +1 se trabajó, al instante
    • Trabajo en Cromo o de Cromo y en Node-Webkit!
  5. 6

    Creo que si queremos tener un camino abierto para ver videos en nuestros navegadores sin ningún tipo cerrado fuente de plugins (y todos los fallos de seguridad que viene con la historia de el plugin de flash…). La etiqueta tiene que encontrar una manera de activar la pantalla completa.. Se podría manejar como flash no: para hacer pantalla completa, tiene que ser activado mediante un clic izquierdo con el mouse y nada más, quiero decir que no sea posible por ActionScript para el lanzamiento de pantalla completa en la carga de un flash por ejemplo.

    Espero haber sido lo suficientemente claro: Después de todo, sólo soy un francés de estudiante, no un poeta inglés 🙂

    Ver Ya!

  6. 6

    Muchos de los navegadores web modernos han implementado una Completa API que permite dar a pantalla completa enfoque a ciertos elementos de HTML. Esto es realmente bueno para la visualización de los medios interactivos como vídeos en un entorno inmersivo.

    Para obtener el botón de pantalla completa de trabajo que usted necesita para establecer otro tipo de detector de eventos que se llame a la requestFullScreen() función cuando se pulsa el botón. Para asegurar que esto va a funcionar en todos los navegadores compatibles ustedes también van a tener que comprobar para ver si el requestFullScreen() está disponible y la reserva para el vendedor como prefijo versiones (mozRequestFullScreen y webkitRequestFullscreen) si no lo es.

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

    De 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

  7. 5

    Programable manera de hacer pantalla completa está trabajando ahora en tanto Firefox y Chrome (en sus últimas versiones). La buena noticia es que una especificación ha sido el proyecto aquí:

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

    Usted todavía tiene que lidiar con el proveedor de prefijos para ahora, pero todos los detalles de implementación están siendo rastreados en el MDN sitio:

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

  8. 5

    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;
    }
    • Esto no es realmente completa.
  9. 3

    Usted puede cambiar el ancho y la altura del 100%, pero no cubre el navegador chrome o el shell del sistema operativo.

    Decisión de diseño es porque HTML vive en el interior de la ventana del navegador. Los plugins de Flash no están dentro de la ventana, para que puedan ir a la pantalla completa.

    Este sentido, de lo contrario usted podría hacer que las etiquetas img que cubría la shell, o hacer que las etiquetas h1 por lo que la totalidad de la pantalla era una carta.

    • +1 para el conjunto de la pantalla de una carta
  10. 3

    No, no es posible tener pantalla completa de vídeo en html 5. Si desea conocer las razones, estás de suerte, porque el argumento de batalla para pantalla completa se combate ahora mismo. Ver WHATWG lista de correo y busque la palabra «video». Yo personalmente espero que proporcionan a pantalla completa de la API en HTML 5.

    • Big +1 para el enlace a la lista de correo.
  11. 3

    Firefox 3.6 tiene una opción de pantalla completa para HTML5 de vídeo, haga clic derecho en el video y selecciona «pantalla completa».

    La última Webkit nightlies también soporte de pantalla completa de vídeo HTML5, pruebe el Sublime jugador con la última nightly y mantenga pulsado Cmd /Ctrl mientras selecciona la opción de pantalla completa.

    Supongo Chrome /Opera también en apoyo de algo como esto. Esperemos que IE9 también soporte de pantalla completa de vídeo HTML5.

  12. 2

    Una solución alternativa sería tener el navegador simplemente ofrecer esta opción en el menú contextual. No necesita tener Javascript para hacer esto, aunque pude ver cuando sería útil.

    En el tiempo promedio de una solución alternativa sería simplemente para maximizar la ventana (Javascript puede proporcionar las dimensiones de la pantalla) y, a continuación, maximizar el vídeo dentro de ella. Darle un ir y, a continuación, simplemente ver si los resultados son aceptables para los usuarios.

  13. 1

    HTML 5 video no ir a pantalla completa en la última nightly build de Safari, aunque no estoy seguro de cómo es técnicamente perfecto.

    • ¿Por qué el voto negativo? Safari 5 ha de pantalla completa en su nativa en los controles. (No hay API, aunque! grrrr)
  14. 1

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

    Sí. Bien lo que pasa con el video de HTML5 es que usted acaba de poner el <video> etiqueta y el navegador le dará su propia interfaz de usuario, y por lo tanto la capacidad de visualización en pantalla completa. Lo que realmente hace que la vida sea mucho mejor en nosotros, los usuarios no tienen que ver el «arte» algún desarrollador jugando con Flash podría hacer 🙂 también añade consistencia a la plataforma, lo cual es bueno.

  16. -1

    es simple, todos los problemas pueden ser resueltos como este,

    1) escapar siempre se llevará a cabo del modo de pantalla completa
    (esto no se aplica a introducir manualmente a pantalla completa a través de f11)

    2) mostrar temporalmente una pequeña pancarta que dice pantalla completa el modo de vídeo se introduce (en el navegador)

    3) bloque de pantalla completa, la acción por defecto, al igual que se ha hecho de pop-ups y de la base de datos local en html5 y la ubicación de la api y etc, etc.

    no veo ningún problema con este diseño. que nadie piense que me perdí de algo?

    • Esto no contesta la pregunta.
  17. -1

    Usted puede hacer esto si usted le dice al usuario que presione F11(pantalla completa para la mayoría de los navegadores), y colocar el video en todo el cuerpo de la página.

  18. -1

    Si ninguna de estas respuestas no funcionan (como ellos no para mí) usted puede configurar dos videos. Uno de tamaño normal y otro para el tamaño de pantalla completa. Cuando se quiere cambiar a pantalla completa

    1. Utilizar javascript para poner la pantalla completa de vídeo del atributo » src «para los más pequeños videos atributo «src»
    2. Configurar el video.currentTime en la pantalla completa de vídeo a ser el mismo que el pequeño vídeo.
    3. Uso de css display:none’ para ocultar el pequeño vídeo y la pantalla la grande con el a través de «position:absolute» y «z-index:1000′, o algo realmente alta.

Dejar respuesta

Please enter your comment!
Please enter your name here