Vídeo de fondo sin Flash

whitefeathers · #1 (**permalink**) 14/12/2010, 06:48

Muy buenas. Quiero hacer una web similar a ésta: http://www.hellosuperheroes.nl/
La idea es que haya un vídeo de fondo, pero como quiero que se adapte también al iPad/iPhone etc, me gustaría que no fuera en Flash. ¿Alguna idea de cómo podría hacerlo? Muchas gracias y saludos.

emprear · #2 (**permalink**) 14/12/2010, 09:24

Este artículo está en inglés, pro es de lo mejor que vas a poder encontrar

http://diveintohtml5.org/video.html

Saludos

whitefeathers · #3 (**permalink**) 16/12/2010, 13:54

Gracias emprear, ese libro es estupendo, pero me temo que para lo que quiero tendré que hacer uso de Javascript. El html5 no me preocupa. La verdad es que no sé por dónde enfocarlo...

whitefeathers · #4 (**permalink**) 19/12/2010, 09:02

Intuyo que lo mejor es usar html5 y javascript para poder dimensionar el vídeo en fullscreen. Los botones de pausar y play tampoco sé si puede hacerse con html5 o necesitaría javascript.

Vi una web que trata de eso: http://www.html5-fullscreen-video.com/html_5_fullscreen/movie/1 Pero no lo entiendo bien... Me parece muy complejo de entender. Bueno, espero que podáis ayudarme. Como digo, lo principal de este asunto es ir aprendiendo.

Gracias y saludos.

emprear · #5 (**permalink**) 19/12/2010, 10:51

whitefeathers:

hay cosas e tu objetivo que no entiendo bien, poner un video a fullscreen es una cosa, ponerlo como fondo a fullscreen es otra.

Yo tenia hechas algunas pruebas con video en html5, y estuve experimentando un poco con lo de full screen.

Me parece que hasta que las cosas se decanten Flash sigue siendo lejos, la mejor opción para PC.
curiosamente en la página que pasaste la etiqueta <video> no aparece, el Doctype es
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Y usan JavaScript a lo loco... si eso es el famoso HTML5 que va a simplificar nuestra vida, mejor volver a los gifs animados.

Vi unas cuantas páginas más referidas al tema, pero no te las paso porque como decia un viejo programa de televisión, sería un "aporte más a la confusión general"

Tener que usar varios formatos, diferentes codecs, etc....

te dejo una prueba de lo que hice en

http://foros.emprear.com/html5/test-video.html
(se ve bien en Safari, asi que supongo que se podria ver bien en Ipod/Iphone

y lo que no me convence es que aunque defina el height al 100% no hay forma de evitar que haga el scroll. ( a propósito, la etiqueta video solo soporta widt y height en Pixeles.
Te aclaro que si usas IE va a usar como fuente el flash

Y en Crhome... se cuelga, al menos en el mio

Te dejo tambien un ejemplo de Flash a full screen, que no se cuelga y se ve en todos lod navegadores.

http://foros.emprear.com/flash/tac.html

Ojo que los videos son de poca calidad

Saludos

whitefeathers · #6 (**permalink**) 19/12/2010, 11:48

Bueno, con un vídeo fullscreen de fondo me refiero a la web que puse de prueba www.hellosuperheroes.nl. Lo que quiero conseguir es precisamente eso pero sin el uso de flash. Se adapta completamente al tamaño de la ventana del navegador, como puedes comprobar, y está siempre a pantalla completa, totalmente adaptada al tamaño mismo de la ventana. En el vídeo que me has mandado se ve como una barra abajo del reproductor. Lo del scroll se puede evitar con CSS, pero aún así el vídeo no se adaptaría a la ventana del navegador. Me temo que para esto... Javascript, ¿no? Pero yo no tengo ni idea de si sería programar mucho código o no, no conozco Javascript.

emprear · #7 (**permalink**) 19/12/2010, 12:13

whitefeathers

http://www.hellosuperheroes.nl/ usa Flash, y no solo es el video, es una aplicación que incluye el menu y demas, hecho con actionScript seguramente.
Y de tan solo 450kb. imaginate algo asi con video

Con el overflow:hidden; le arreglas lo del scroll pero tambien te corta el video y los controles, si los pones visibles.

Hace una versión para PC con Flash y otra con HTML5 para móviles

whitefeathers · #8 (**permalink**) 19/12/2010, 12:31

Pues nada... A morir en el intento. Gracias.