problema de formato de video

[uchi_pon]

Hola estoy haciendo un video que requiere un pòsible cliente, es para una pagina web, al cliente no le importa en que formato quede, pero quiere que este empieze a reproducirse al abrir la pagina, no debe ser pesado y creo que tambien quiere que se pueda abrir en cualquier ordenador aunque no tenga el flash player instalado en caso de ser un .swf, por ultimo quiere que sea un loop, es decir que se repita al terminar infinitamente, el unico formato que conozco que tiene casi todas esas ventajas es el .gif pero el video es un poco largo 15 seg aprox y grande de 454 335 px como para ser un gif., tambien quiere algo raro que no se si es posible, que sea redondo en vez de un rectangulo como todos los videos.
lo de que se abra en cualquier ordenador por lo que se no se va a poder pero bueno quiza pueda prescindir de ello, las demas cosas si son impresindibles.
¿podrian aconsejarme?

[Triby]

Sí se puede abrir en (casi) cualquier computadora si usas HTML 5 y con un poco de Javascript puedes controlar que sea un loop.

Para hacerlo circular usa un PNG transparente, que podría ser integrado directamente en el video o tal vez superpuesto con CSS.

[uchi_pon]

Genial Muchas gracias, si esa es la única manera entonces así lo haré liberare una secuencia de imágenes PNG y que el programador se encargue de transmitirlas.

[Triby]

Caramba, yo no he dicho eso!

Aunque también es posible así como lo entendiste, yo decía que en un editor de videos pongas una imagen PNG con un círculo transparente en la pista de superposición; o bien, en el HTML poner el video normal y, sobre este, el PNG transparente, aunque podría interferir con los controles de reproducción.

[uchi_pon]

Oh ok perdona no te había entendido bien, pero creo que no llevara controles aunque no se si te refieres al stop, play, pause etc etc. por que si no te refieres a eso entonces no se a cuales controles te refieras, no se mucho de programacion, de echo creo que ya no entiendo bien que debería de hacer, mi cliente quiere que el vídeo quede listo para que solo el programador lo suba, quizá si seria mejor la opción que dices solo que no la entiendo de el todo, yo uso Affter Efects.

[Rafael]

En este link http://www.forosdelweb.com/f3/conver...ratis-1052472/ pongo convertidores de video. El primero genera el código <video>html5 con un player para navegadores viejos.

El formato de salida déjalo como mp4.

Los bordes redondeados los das con Css normalito y simple.

Para maximizar la compatibilidad de esos bordes redondos podrías incluirlos en el mismo video, pero no me late echarlo a perder. Los controles los ocultas en la misma etiqueta video, lo mismo el loop.

Busca un par de tutoriales "video html5" para que entiendas la etiqueta más a fondo.

[uchi_pon]

Hola, suena bueno pero el problema es que no es un circulo perfecto, se redondear los bordes
con el css pero me quedaría un cuadrado con untas redondeadas o un circulo esto que quiero es mas bien un ovalo y aparte no esta derecho sino que esta ligeramente rotado, seguramente igual se ha de poder programandolo pero aparte de que no se como lo lograría me piden que el programador no tenga mas que subirlo y listo, sin embargo revisare este post e investigare sobre video html5, me parece muy útil saberlo,seguro que lo necesitare, gracias.
Aun no se bien como lo hare pero siento que lo mas conveniente sera que salga con el fondo transparente y este listo solo para que se suba era que si hago esto:
poner una imagen PNG con un círculo transparente en la pista de superposición ¿lo conseguiria?
aunque no se como hacerlo no se cual es la pista de superposicion, ¿es algo como una mascara?
saludos y gracias , disculpen espero no ser muy fastidioso con este tema.

[Rafael]

No puedes sacar un video con fondo transparente.

Sí puedes hacer un óvalo con css: http://css-tricks.com/the-shapes-of-css/

Si necesitas el video con esa cosa, para toooodos los navegadores, ponlo directamente DENTRO del video. Pon un layer y lo rendereas simulando estar recortado.

Para hacer lo de la pista adicional revisa la documentación del programa que uses. Pero repito, en ese png vas a poner simulando lo que quieras que parezca que va debajo.

[uchi_pon]

hola oye el ejemplo que ponente en ese link si efectivamente es un ovalo pero aun falta la rotación que lleva el encargo que tengo, perdón me falto escribir sobre este detalle el obalo lleva una ligera rotación como en la siguiente imagen:

¿como podría lograr esta posición rotada?
y también ¿podrían recomendarme en que formato puedo sacar el vídeo, debe ser ligero para que no alente la pagina demasiado al cargar pero sin que pierda resolución?
bueno imagino que lo ultimo es algo muy básico pero nunca eh hecho un vídeo para web así que ignoro los ajustes que deba poner al exportar el vídeo terminado.
gracias.

[Rafael]

Para cosas tan raras pon el óvalo directo en el video. Y usa el exportador tal cual.

[uchi_pon]

ya eh sacado el video sin mas esta en forma cuadrangular y ahora usare un code CSS para redondearlo y para rotarlo ligeramente y listo.
bueno tambien lo guarde en diferentes formatos para que si no se puede abrir en algun buscador entonces se abra otro video con otro formato y asi consiga abrir en todos los que tengo son H264, WebM y ogg teora.
imagino que con eso no abra problema por que son mmuy ligeros , lo unico que tengo duda es que no se si la pagina estara echa en html normal o HTML5 y en caso de ser el 5 no se bien como ponerle CSS, espero sea igual o muy parecido, en fin no creo que de problemas.

[Triby]

Tiene que ser con HTML 5, porque la etiqueta video no es soportada en versiones anteriores. Lo del redondeo se hace con CSS 3 y es independiente de la versión de HTML.

[uchi_pon]

perfecto, ahora entocnes lo uncio que me falta es saver como declarar el CSS en el HTML5 y saber con exactitud como hacer que aparte de el redondeado este rotado ligerametne.

[Rafael]

http://www.w3schools.com/css/css3_2dtransforms.asp

El óvalo se va a girar, pero con toodo y video.
Los fallbacks no se van a redondear. En muchos dispositivos móbiles no se va a redondear.

Insisto en mi recomendación. Si el fondo de la página donde va, no va a cambiar a cada rato, la máscara ponla en el video mismo.

[uchi_pon]

ya lo había pensado, que el ovalo se girara con todo y vídeo, por eso es que para que se vea aun centrado el contenido de el vídeo, haré que en el vídeo se gire al lado contrario al que se girara al mostrarse en la web y así se vera centrado, quisiera seguir tu consejo para que se viera redondeado en dispositivos móviles y mas aun por lo que dices de los flash back, pero no se como hacer eso de poner la mascara en el vídeo, no lo entiendo, en especial por que dijeron que no se puede sacar un vídeo con fondo transparente, entonces como podría lograr la mascara en el vídeo, o te refieres a que copie el color de fondo de la pagina y lo use de fondo en el vídeo para que aunque quedase cuadrangular el fondo de el vídeo fuera el mismo que el de la pagina y diera la apariencia de ser redondeado?. eso seria mejor para mi pero no se si el fondo sea de un solo color ni tampoco si planeen cambiarlo después o no.
Por cierto muchas gracias por el code, era lo que necesitaba y mas esta completísima esa info, incluso trae su muestra con todo y consola para programar esta increible ese site, incluso se me hizo mejor que el Dream Weaber en ese aspecto.

[Rafael]

o te refieres a que copie el color de fondo de la pagina y lo use de fondo en el vídeo para que aunque quedase cuadrangular el fondo de el vídeo fuera el mismo que el de la pagina y diera la apariencia de ser redondeado?.

Sí, era eso.

[uchi_pon]

jaja ok, sabes al final de cuentas no haré nada, parece que el cliente ha decidido dejarlo en manos de su programador, así que solo dejare el render normal y ya, pero ha sido muy bueno aprender como sacar este problema adelante, muchas gracias a todos.