video como fondo del sitio? HTML 5

Quiero utilizar un video como fondo en lugar de una imagen que se extiende automáticamente a toda la pantalla (fondo).video como fondo del sitio? HTML 5

También me gustaría rotar videos e imágenes ... para que se muestre un video/imagen aleatorio en cualquier orden.

También sería bueno saber cómo retrasar la reproducción de video, de modo que el video solo se reproduzca 30 segundos después de la carga del sitio.

thx!

Fuente

2010-09-27 Roland

Tenga en cuenta que muchos visitantes odiarán esta característica (bloqueo esto activamente con Adblock). Además, los videos pueden dañar al usuario en dos instancias: en las conexiones medidas y cuando se ve la página en una sesión de escritorio remoto que puede quedar inutilizable si el ancho de banda de carga es bajo. –

En primer lugar, el marcado HTML se parece a esto:

<video id="awesome_video" src="first_video.mp4" autoplay />

En segundo lugar, el código JavaScript se verá así:

<script type="text/javascript"> 
    var index = 1, 
     playlist = ['first_video.mp4', 'second_video.mp4', 'third_video.mp4'], 
     video = document.getElementById('awesome_video'); 

    video.addEventListener('ended', rotate_video, false); 

    function rotate_video() { 
    video.setAttribute('src', playlist[index]); 
    video.load(); 
    index++; 
    if (index >= playlist.length) { index = 0; } 
    } 
</script>

Y por último pero no menos importante, el CSS:

#awesome_video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Esto creará un elemento de video en su página que comienza a reproducir el primer video de inmediato, luego iterar s a través de la lista de reproducción definida por la variable de JavaScript. Su kilometraje con el CSS puede variar dependiendo del CSS para el resto del sitio, pero el 100% de ancho/alto debe hacerlo en una página básica.

Fuente

2010-09-27 03:09:52

thx, pero el código de pantalla completa no funciona realmente. simplemente muestra el video en su tamaño original en la esquina superior izquierda superior y también hace que desaparezca el resto del texto en el sitio. – Roland

Bueno, si quieres pantalla completa, el resto del texto del sitio obviamente desaparecerá.En cuanto a que la pantalla completa no funciona, intente configurar el alto y el ancho del elemento de video en el tamaño de la ventana gráfica. Por ejemplo, 'video.width = 1024; video.height = 768; ' –

Eche un vistazo a mi respuesta a continuación. Tiene en cuenta todas las capturas de pantalla :) – sydlawrence

que podría tener una solución para el video como fondo, se extendía al navegador de anchura o altura, (pero el video todavía habrá preservar la relación de aspecto, no podía encontrar una solución para eso.):

Put el video justo después de la etiqueta corporal con style="width:100%;". epílogos derecha, poner un "bodydummy" -tag:

<body> 
<video id="bgVideo" autoplay poster="videos/poster.png"> 
    <source src="videos/test-h264-640x368-highqual-winff.mp4" type="video/mp4"/> 
    <source src="videos/test-640x368-webmvp8-miro.webm" type="video/webm"/> 
    <source src="videos/test-640x368-theora-miro.ogv" type="video/ogg"/>  
</video> 

<img id="bgImg" src="videos/poster.png" /> 

<!-- This image stretches exactly to the browser width/height and lies behind the video--> 

<div id="bodyDummy">

poner todo su contenido en el interior del bodydummy -div y poner los índices de z correctamente en CSS como esto:

#bgImg{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    border: 0; 
    z-index: 1; 
    width: 100%; 
    height: 100%; 
} 

#bgVideo{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    border: 0; 
    z-index: 2; 
    width: 100%; 
    height: 100%; 
} 

#bodyDummy{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 3; 
    overflow: auto; 
    width: 100%; 
    height: 100%; 
}

esperanza que pude ayuda. Avíseme cuando pueda encontrar una solución que el video no mantenga la relación de aspecto, por lo que podría llenar toda la ventana del navegador para que no tengamos que poner un bgimage.

Fuente

2011-03-01 13:24:05 moritz

Tome un vistazo a mi jQuery plugin de videoBG

http://syddev.com/jquery.videoBG/

Hacer cualquier vídeo HTML5 sitio de un fondo de reserva ... tiene una imagen para los navegadores que no soportan HTML5

Muy fácil use

Avíseme si necesita ayuda.

Fuente

2011-03-15 04:06:41 sydlawrence

Gracias Sydlawrence! Comencé en un libro de HTML5 (Lawson y Sharp), luego fui a la web ... busqué en todas partes "video html5 de fondo" y leí un montón de información no del todo correcta. Tu solución funcionó a las mil maravillas. –

@sydlawrence ¡eso es excelente! He implementado tu solución. Sin embargo, tengo un problema con la integración y es que el póster parpadea por un segundo antes de que se cargue el video. ¿Cómo se puede hacer para que el póster solo se cargue si no hay compatibilidad con el video html5? – willdanceforfun

hola syd, tu plugin funciona muy bien, pero parece que no funciona en Firefox? ¿Cómo es esto posible? En todos lados, funciona – woony

Respuesta

Cuestiones relacionadas