JMiur [E]

Una limitación de los reproductores de video que nos proveen los diferentes servicios (DailyMotion, Metacafe, Google Videos, etc) es que no pueden personalizarse o las posibilidades que nos ofrecen para hacerlo son limitadas. En el caso de YouTube, la reciente actualización de las API que las controlan, pude hacer que en un futuro las cosas cambien pero, mientras tanto, poco puede hacerse.

Hace unos días, Ricardo González me sugirió que me diera una vuelta por RedCowboy, un sitio que ofrece marcos para insertar videos de YouTube.

Una vez que nos registramos, podemos usar el buscador interno o ingresar la dirección URL del video. Luego, seleccionamos el modelo que puede ser fijo o animado y listo, ellos nos proveen con el código para insertarlo en cualquier sitio.


OTRO EJEMPLO Ver/Ocultar [+]


Ahora bien, crear un marco para reproducir un video tiene un problema grave. Los controles deben estar a la vista así que, no hay demasiadas alternativas. Pero, si lo que usamos es algún script como LightWindow para reproducirlos en una ventana modal, las cosas cambian ya que lo que necesitamos es sólo un enlace que incluso, podemos crear como clase CSS para evitarnos tener que escribir el código una y otra vez.

¿Qué hace falta? Una imagen que sirva como fondo y otra que sea el contenido (por ejemplo, la captura del mismo video). A ver un ejemplo:


Las clases CSS deberían ponerse antes de <HEAD> y serían estas:
<style type="text/css">
.skinVideo {
background: transparent url(http://img529.imageshack.us/img529/6783/skindemo1mj1.png)
no-repeat scroll left top;
height: 337px; /* alto de la imagen */
position: relative;
width: 378px; /* ancho de la imagen */
}

.skinVideo a img { /* la posición de la imagen interna */
left:14px;
position:relative;
top:38px;
}
</style>
Y el código HTML sería este:
<div class="skinVideo">
<a rel="" title=""
params="lightwindow_width=425,lightwindow_height=350,
lightwindow_loading_animation=true"
href="http://www.youtube.com/v/XXXXXXXXXXX" class="lightwindow">
<img src="URL_imagenVideo" />
</a>
</div>
Otro ejemplo donde lo único que se modifica es la imagen de fondo y sus dimensiones:


Y si no se queremos crear esas imágenes internas, podemos usar las provistas por el mismo YouTube que se encuentran asociadas a cada ID de video.

Por ejemplo, si el video es:
http://www.youtube.com/watch?v=6Y5Ad3Mg068
o:
http://www.youtube.com/v/6Y5Ad3Mg068

el ID es 6Y5Ad3Mg068 así que hay tres imágenes asociadas:

http://img.youtube.com/vi/6Y5Ad3Mg068/1.jpg
http://img.youtube.com/vi/6Y5Ad3Mg068/2.jpg (es la imagen por defecto)
http://img.youtube.com/vi/6Y5Ad3Mg068/3.jpg

Todas esas imágenes son pequeñas (125x100) pero, podemos crear un skin tipo miniatura:


Con el mismo criterio que los ejemplos anteriores:
<style type="text/css">
.miniSkinVideo {
background:transparent url(http://img217.imageshack.us/img217/955/skindemo3vl6.png)
no-repeat scroll left top;
height:110px; /* alto de la imagen */
position:relative;
width:135px; /* ancho de la imagen */
}

.miniSkinVideo a img { /* la posición de la imagen interna */
left:5px;
position:relative;
top:5px;
}
</style>

.......

<div class="miniSkinVideo">
<a rel="" title=""
params="lightwindow_width=425,lightwindow_height=350,lightwindow_loading_animation=true"
href="http://www.youtube.com/v/XXXXXXXXXXX" class="lightwindow">
<img src="http://img.youtube.com/vi/XXXXXXXXXXX/2.jpg" />
</a>
</div>
O bien, si ni siquiera queremos crear esa imagen, podemos usar clases CSS con propiedades diversas:


En todos estos casos, los tamaños son los mismos:

height:110px;
width:135px

y solo variamos el fondo y los bordes. De izquierda a derecha::
background-color: #8897A5;
border: 3px outset #A8B7C5;

background-color: #000000;
border: 3px ridge YellowGreen;

background-color: #000050;
border-style: double ridge;
border-color: SteelBlue;
border-width: 3px;

9 comentarios:

ls  

Hola, JMiur. Permitime una consulta onda "soy taraaaada?" (sí). Quiero incluir LightWindow pero no comprendo cómo hacer para que, una vez añadido el script, no se ejecute la ventana modal siempre. Por ejemplo, poner una imagen JPG pero que el script no ejecute, en tal post, la ventana modal (como en tu artículo de hoy, "Peor..."). ¿Basta con subirla desde la computadora a Picasa, sin agregarle la clase lighthwindow o los parámetros usados? Si fuese así, habilito cachetazos.
Saludos cordiales y gracias por tu atención.

Responder
Gem@  

Una aplicación muy original que seguro tendrá mucha aceptación.

Responder
JMiur  

ls:
Lightwindow no se adosa de manera automática así que, no tendrás problemas. Para aplicarla en una imagen o un video hay que indicarlo con class y, eventualmente ponerle más parámetros.

Gem@:
Es interesante si usamos muchos videos, nos podemos evitar mucho trabajo.

Responder
Richard G.  

Hola Jmiur, como bien te comenté en el email,al copiar el codigo del video con sus skin,el tamaño que nos dan en Redcowboy es de 500 de ancho.

Yo traté de reducirlo a 450 y me pasaba algo muy estraño y esque la parte de recha, se reducia y quedaba el video poco estitico.

Ahora veo que tu lo has puesto a 450 de ancho y sin embargo, consigues que se vea entero.Probaré de nuevo en mi blog aver si consigo reducir la anchura y que se vea como bien pusistes tu en el ejemplo.

Un saludo.

Responder
JMiur  

Richard:

Yo no cambié los valores, puede ser que cada modelo sea diferente. En los ejemplos que puse hay uno 450 y otro de 500.

En principio, el ancho de un objeto de Flash es flexible y debería poder ser redimensionado pero, eso depende de cómo haya sido hecho. Puede ser que en este caso, la imagen que sirva como fondo sea fija y entonces, no pueda achicarse proporcionalmente y se corte.

No tiene otro secreto, basta cambiar width así que si haciéndolo no funciona, no hay alternativas.

Responder
Richard G.  

Gracias.

Es cierto, el que tu elegistes es de 450 y el que yo queria poner es de 500.
Ahora ya me queda claro.
De todas formas, para los que tengan unas columnas mas anchas, podran beneficiarse de esta aplicación tan divertida.

Responder
Carlos Romero  

Hola JMiur

Felicidades por tu blog al que sigo desde hace varios meses, pero hoy tengo una grand duda a ver si puedes resolverla.

Necesito un script para blogger para comentarios al estilo Worpress en el que se pida a los usuarios que muestren su email para evitar trolls y cosas por el estilo, o al menos saber algún dato de quien anónimamente escribe.

¿Existe algo para saber la ip de quien hace los comments?

Gracias de antemano.
Un saludo.

Responder
paola monti  

JMiur:
estoy intentando poner una imagen animada en el perfil, pero no me resulta ayyyyy!!!, seguramente algo estoy haciendo mal...
¿Se puede o no?

saludos.

Responder
JMiur  

Carlos:
No , no existe algo si en Blogger. Deberías recurrir a un servicio de manejo de comentarios como Disqus, Haloscan o Intense Debate-

Paola:
Si es un gif animado y se lo aloja en Blogger, es difícil que funcione; deberías subirlo a otro servidor, como por ejemplo a ImageShack.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR