Es allí una manera de hacer HTML5 de vídeo de pantalla completa?

https://stackoverflow.com/questions/1055214

20-08-2019
|

Pregunta

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?

Solución

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

Tiene soporte experimental en varios navegadores .

Respuesta original:

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

Los agentes de usuario no deben proporcionar un API pública para que se muestren videos pantalla completa. Un guión, combinado con un archivo de video cuidadosamente elaborado, podría engañar al usuario para que piense se ha mostrado el diálogo modal del sistema, y solicite al usuario una contraseña. También existe el peligro de & Quot; simple & Quot; molestia, con el lanzamiento de páginas videos de pantalla completa cuando los enlaces son clic o páginas navegadas. En lugar, características de interfaz específicas de agente de usuario puede proporcionarse para permitir fácilmente usuario para obtener una reproducción a pantalla completa modo.

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

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

Otros consejos

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

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

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

El soporte actual del navegador es:

Chrome 15+
Firefox 10+
Safari 5.1+

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

Safari lo admite a través de webkitEnterFullscreen.

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

Chris Blizzard de Firefox dijo que saldrán con su propia versión de pantalla completa que permitirá que cualquier elemento pase a pantalla completa. p.ej. Lienzo

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

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

webkitEnterFullScreen();

Esto debe llamarse en el elemento de etiqueta de video & # 173; por ejemplo, para completar & # 173; pantalla 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.

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 vienen con la historia del complemento flash ...). La etiqueta tiene que encontrar una forma 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!

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() la 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 de reserva y 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();
}

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

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

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

Todavía tendrá que lidiar con los prefijos de proveedor 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

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

Puede cambiar el ancho y la altura para que sean del 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 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 a 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. Consulte lista de correo WHATWG y busque el 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 Sublime player con el último video nocturno y mantenga presionado Cmd / Ctrl mientras selecciona la opción de pantalla completa.

Supongo que Chrome / Opera también admitirá algo como esto. Con suerte, IE9 también admitirá video HTML5 en 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. Inténtelo 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();
                    }
            }
    }

Sí.Bien lo que pasa con el video de HTML5 es que usted acaba de poner el <video> la 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.

es simple, todos los problemas pueden resolverse así,

1) tener escape siempre te 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 el modo de video en pantalla completa se ingresa (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 de Chrome 11.0.686.0 canal de desarrollo 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

Use javascript para establecer el atributo 'src' del video a pantalla completa en el atributo 'src' de videos más pequeños
Configure video.currentTime en el video de pantalla completa para que sea el mismo que el video pequeño.
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.

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow