¿Cómo se puede visualizar HTML5 <video> como fondo de pantalla completa en su sitio web? Al igual que en esta demo sitio Flash ...¿Puede visualizar HTML5 <video> como fondo de pantalla completa?
http://activeden.net/item/full-screen-video-background-template-v2/full_screen_preview/29617
Uso position:fixed en el vídeo, la pusieron al 100% anchura/altura, y puso un negativo z-index en él para que aparezca detrás de todo.
Si mira VideoJS, los controles son solo elementos html que se encuentran en la parte superior del video, usando z-index para asegurarse de que están arriba.
HTML
<video id="video_background" src="video.mp4" autoplay>
(Añadir fuentes WebM y Ogg para apoyar a más navegadores)
CSS
#video_background {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1000;
}
Se va a trabajar en la mayoría de los navegadores HTML5, pero probablemente no iPhone/iPad , donde el video necesita ser activado, y no le gustan los elementos sobre él.
Solo un comentario sobre esto - He usado video HTML5 para un fondo de pantalla completa y funciona de maravilla - pero asegúrese de usar Altura: 100% y ancho: automático o al revés - para asegurar mantienes la relación de aspecto.
En cuanto a Ipads, puede (aparentemente) hacer esto, ocultando y luego forzando el evento de clic para disparar, y haciendo que la función del evento de clic inicie Load/Play().
P.s .: esto no debería requerir ningún complemento y se puede hacer con un JS mínimo. Si se dirige a cualquier dispositivo móvil (supongo que podría estarlo), mantenerse alejado de dicho marco es el camino a seguir.
Consulte http://www.sklinar.co.uk/toe/ en Chrome para obtener un ejemplo de trabajo. –
Podría ser un poco tarde para responder esto, pero esto será útil para las personas que busquen esta respuesta.
Las respuestas anteriores son buenas, pero para tener un fondo de video perfecto, debe verificar la relación de aspecto ya que el video podría cortarse o el lienzo alrededor deformarse al cambiar el tamaño de la pantalla o usarla en diferentes tamaños de pantalla.
Me metí en este tema no hace mucho tiempo y encontré la solución usando consultas de medios.
Aquí hay un tutorial que escribí sobre cómo crear un Fullscreen Video Background with only CSS
voy a añadir el código aquí también:
HTML:
<div class="videoBgWrapper">
<video loop muted autoplay poster="img/videoframe.jpg" class="videoBg">
<source src="videosfolder/video.webm" type="video/webm">
<source src="videosfolder/video.mp4" type="video/mp4">
<source src="videosfolder/video.ogv" type="video/ogg">
</video>
</div>
CSS:
.videoBgWrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.videoBg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (min-aspect-ratio: 16/9) {
.videoBg{
width: 100%;
height: auto;
}
}
@media (max-aspect-ratio: 16/9) {
.videoBg {
width: auto;
height: 100%;
}
}
Espero que lo encuentres útil.
Esta es una gran respuesta para mí, no conozco gente que vote esta respuesta. Las personas que lo votan pueden dar alguna explicación de por qué? – zt1983811
http://stackoverflow.com/questions/1055214/is-there-a-way-to-make-html5-video-fullscreen Puedes verificar allí – saturngod
Ya vi esa publicación, que parece estar más preocupada con la reproducción de video fuera de la ventana del navegador en pantalla completa, estoy buscando un video dentro del navegador de gran tamaño.Pensé que podría haber más por ahí a pesar de que este enlace parece un poco más prometedor – Yammi
No estoy publicando esto como una respuesta, porque solo tengo evidencia empírica, pero las pruebas en Chrome y Firefox (Ubuntu 10.04) sugieren que esto no es posible Sin embargo, estoy fascinado de que se demuestre que estoy equivocado. +1 y destacado, por las dudas. –