JMiur [E]

VideoBox es un script que permite mostrar videos de una manera muy interesante y muy sencilla. Tan fácilmente como escribir cualquier enlace.

Para utilizarla necesitamos varios archivos:

videobox.js y videobox.css son el script y la hoja de estilo
closelabel.gif, loading.gif, nextlabel.gif y prevlabel.gif son las imágenes utilizadas
swfobject.js es un pequeño script que se utiliza para incrustar archivos de Flash
mootools.js es una librería muy potente sobre la cual deberé extenderme alguna vez

Todo ello puede ser descargado en formato ZIP

Para disponer de esta funcionalidad, debemos subir los archivos a un servidor y luego, incluirlos en nuestra plantilla, agregando lo siguiente, justo antes de </head>:
<script type="text/javascript" src="URL_mootools.js"></script>
<script type="text/javascript" src="URL_swfobject.js"></script>
<script type="text/javascript" src="URL_videobox.js"></script>
<link rel="stylesheet" href="URL_videobox.css" type="text/css" media="screen" />
Usarlo es muy simple, basta agregar el atributo rel="vidbox" al enlace:
<a rel="vidbox" href="URL_archivo" title="un_texto">
EL ENLACE
</a>
donde:

URL_archivo es la dirección del archivo a mostrar; por ejemplo:

http://www.youtube.com/watch?v=VhtIydTmOVU
http://www.metacafe.com/watch/386357/teach_magic_be_magician_money_magic/
http://video.google.com/videoplay?docid=1811233136844420765
http://www.ifilm.com/video/2783985
http://70.85.109.171/albino_flash010/Batman(www.albinoblacksheep.com).swf

y un_texto es el texto optativo que se mostrará en la ventana del video.

El enlace puede ser tanto un texto como una imagen.

El script nos permite personalizar algunas cosas, por ejemplo, el tamaño:
<a rel="vidbox 800 600" href="URL_archivo" title="un_texto">
   EL ENLACE
</a>
Eventualmente, también podemos abrir los videos utilizando JavaScript de la siguiente manera:
Videobox.open("URL_archivo","un_texto","vidbox ancho alto");
En el caso de YouTube, el enlace que podemos utilizar es la imagen de previsualización del propio video que es una imagen de 130x97 a la que accedemos:

http://img.youtube.com/vi/ID_Video/1.jpg
http://img.youtube.com/vi/ID_Video/2.jpg
http://img.youtube.com/vi/ID_Video/3.jpg

Por ejemplo, en este video:

http://www.youtube.com/watch?v=uhi5x7V3WXE

ID_Video es uhi5x7V3WXE

y la imagen por defecto que usa YouTube es la número dos:

http://img.youtube.com/vi/uhi5x7V3WXE/2.jpg

Estas son las tres imágenes que podemos usar para enlazar el video:


El ZIP incluye las imágenes necesarias por si quieren ser modificadas, ya están incluidas en el archivo CSS y se encuentran alojadas en ImageShack

http://img85.imageshack.us/img85/7678/closelabelyf4.gif
http://img85.imageshack.us/img85/5465/loadingou2.gif
http://img85.imageshack.us/img85/1526/nextlabelhj2.gif
http://img81.imageshack.us/img81/2932/prevlabelih5.gif

Para modificar la hoja de estilo, deben buscarse las siguientes propiedades:
.lbLoading {background: #fff url(loading.gif) no-repeat center;}
#lbPrevLink:hover {background: transparent url(prevlabel.gif) no-repeat 0% 15%;}
#lbNextLink:hover {background: transparent url(nextlabel.gif) no-repeat 100% 15%;}
#lbCloseLink {background: transparent url(closelabel.gif) no-repeat center;}
ALGUNAS ACLARACIONES Y ADVERTENCIAS:

Este librería, llamada Mootols es lo que se llama un framework, es decir, un conjunto de rutinas que permiten crear otros scripts (efectos, por ejemplo). No es la única que existe, otra muy utilizada es Prototype (Scriptaculous). Podemos usar una u otra pero no ambas, de tal forma, es necesario elegir entre Prototype/Scriptaculous o MooTools. En principio, NO pueden usarse juntas.

Existe un problema que puede afectar a Internet Explorer. No es general pero parece ser un problema relativamente común y es producido por un bug reconocido por Microsoft. El mensaje de error es "Operación abortada" y la página directamente no se carga. Hay muchas discusiones al respecto pero ninguna respuesta.

Personalmente, este problema surgía cuando intentaba abrir el post individual pero no en la página principal del blog. La solución fue "mover" los scripts y el CSS desde donde estaban (justo antes de </head>) al final de la plantilla, justo antes de </body> pero, no quiere decir que sea una solución universal.

Cualquier respuesta práctica, será agradecida.

57 comentarios:

CaTa  

Y yo puedo instalar este código, teniendo ya el anterior que nos enseñaste? o debo eliminar el otro?o cumplen funciones diferentes? (parece que me perdí)

Responder
JMiur  

Es otro modelo, como ves, en este caso, tengo funcionando ambos sin problemas. Lo lógico, una vez que pruebas que todo funciona, es sólo dejar uno, el que más te guste.

PD: este es el mismo que viste en WordPress y sobre el que comentaste.

Responder
...::T o M M y R e Y::...  

este esta mejor que el otro, me gusta mucho, te pasaste...

de donde sacas tan buenos trucos

Saludos

Responder
Renton  

Qué recuerdos!

Ya echaba de menos tus:

[script type="text/javascript" src="URL_MeVasaVolverLocojs"][/script]

:]

No, en serio, una vez más una entrada completísima.
Bravo!

Responder
Mr Prado  

Maravilloso truco.

¡Gracias JMiur!

Responder
Econotuya  

Me he alegrado de que publicarás este truco (sobre el que ya te había escrito, pero que a pesar de tu respuesta, me ha resultado imposible implementarlo sólo)
Ahora, he seguido tus pasos y en uno de mis blogs de prueba me resulta, pero, sin embargo, en el que te enlazo me dice que el navegador no lo puede abrir. Supongo que habrá alguna incompatiblidad con otro script, ¿me podrías orientar?
Excelente blog.
Un saludo y gracias.

Responder
pescaboy  

Muchas gracias JMiur! creo que le voy a sacar mucho partido a este Script...

excelente trabajo, como siempre!

Responder
JMiur  

Renton:
<script type="text/javascript" src="URL_NoEs ParaTanto"></script> :D


Econotuya: como ves, no me rendí :)

Sin embargo, sigue habiendo algunos problemas y he agregado algunas aclaraciones al post. Tal vez, la respuesta esté allí, sino, envíame un mail.

Responder
Darwin  

Es excelente!!, Yo lo había visto en el blog de Bolsa negra. Aunque es una pena que no funcione en Internet Explorer, no es que yo utilice IE per o sí la mayoría de gente que lee el blog que escribo ;(.

Saludos Jmiur!!, y felicitaciones(aunque un poco atrasadas) por la entrevista en Spam Loco ;)

Responder
JMiur  

En Blogger, en IE funciona ... generalmente :D

En la bolsa, tuve que sacarlo porque no logro que funcione bien de ninguna manera :$

Misterios de la Internet ;)

Responder
Kurodesu  

Bueno, Mootools es un Framework muy bueno, aunque como dice JMiur no funciona con ningún otro Framework debido a que usan variables muy similares, ahora algo más que deben tener en cuenta además ( para los webmasters avanzados ), es que este script agrega 6 kbs + ( Mootools 40+ kbs ) a la carga del sitio.

No es recomendable que usen Mootools solo para eso y tampoco que carguen mas alementos de los debidos ya que hacen que la carga de la página sea lenta.

Por cierto, la página oficial del script no esta en tu post JMius, así que la dejo aquí:

VideoBox Official

Responder
JMiur  

Todo lo que dices es cierto así que no hay mucho que agregar. En realidad, todas estas librerías son demasiado "voluminosas" :)

PD: el link a la página estaba, es la primera palabra del post :D

Responder
...Markos...  

Tiene muy buena pinta , pero yo no suelo usar vídeos en mi blog.

Saludos,

Markos

Responder
Gem@  

Es genial justo lo que andaba buscando :)

Responder
JMiur  

Es muy buena, lástima que tenga tantos problemas, prueba con cuidado.

Responder
francis  

Llevo días intentando instalar este script y no lo consigo. Nocesito que me ayudes, por favor. No se como subir el archivo zip. ¿Me puedes dar tú los códigos tal y como debo instalarlo en mi plantilla?. Te estaré eternamente agradecido.

Responder
JMiur  

Envíame un mail y trataremos de resolverlo.

Responder
Mr Prado  

Hello again JMIur:

Sobre este truco preguntar dos cosas:

1. - Si hay algún modo de hacer que al oscurecerse toda la pantalla (exepto la imagen aumentada) no se haga sólo el trozo que se ve. Me explico: al mostrar la caja ampliada se oscurece el fondo, pero si hacemos "scroll" observamos que el resto del blog no se ha oscurecido. Sí, yo también me pregunto qué para que puñetas hay que hacer scroll pero bueno...

2. - La posiblidad de usar este script también para imágenes. Igualmente, la forma de agregar una ventana "siguiente" (o next o como sea) a las imágenes ya ampliadas para ver las siguientes, si es que hay más, claro.

Y es que me parece que el script usado aquí (http://www.eldesmarque.es/content/view/9940/27/) se parece mucho (obviamente es el mismo), y tiene todas estas opciones por las que pregunto.

Gracias, oh gran sabio de Blogger.

Responder
JMiur  

Para la primera pregunta no tengo respuesta, esa es una rutina interna del script.

Para la segunda puedes ver en este post donde se explica Slimbox que es, justamente el mismo script que usan en esa página.

Para imágenes hay muchas más posibilidades con diferentes librerías. Hoy voy a publicar una lista con algunas de esas variaciones.

Responder
F3DORVL4  

Hola Jmiur, he implementado videobox y lightbox y tengo un problema, sólo ejecuta la aplicaión cuando abro el título de la entrada, no cuando reviso las entradas, ahí lo que me aparece, en el caso de lightbox es la imagen sin el efecto en una ventana nueva, y en el caso de videobox la opción de abrirlo o descargarlo a mi pc, esto me pasa en mozilla e IE.
Otra cosa la extensión del archivo de video es .flv y lo tengo alojado en imageshack y cuando abro la entrada con el video que tiene el efecto videobox tarda mucho, hasta ahora jamás lo he podido ver, se deberá a sus 60MB?, al menos debería mostrar la primera captura de pantalla, pero ni eso!.
Bueno Gracias por tu respuesta.
Salu2

Responder
JMiur  

Debería verlo online pero, en principio, VideoBox y el resto de este tipo de scripts sólo funcionan cuando se termina de cargar la página entera.

También es cierto que no he logrado una explicación que haga que funcione en todos los blogs, a veces lo hace bien, a veces no.

Respecto del FLV, verfica si realmente existe, o sea si ImageShack lo alojó porque 60 megas me parece un volumen demasiado grande ya que, aparentemente, sólo admite hasta 1.5 megabytes.

Responder
F3DORVL4  

Hola Jmiur, acertaste en la respuesta!!, me había dado cuenta de ello después de haberte escrito el comentario.
Pero entonces, ¿cómo les puedo indicar que mi blog, no ha terminado de cargar completamente?, lo que tengo actualmente es un gif que muestra el efecto de carga y cuyo código es:
script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga() {
document.getElementById("imgLOAD").style.display="none";
}

ubicado antes del tag de cierre head y referenciado con un elemento HTML/javascript (div id="imgLOAD" ...), que cumple su función para ciertos elementos, pero para lo de light y videobox no.
¿Que hago, para indicar la carga completa del blog?.
Lo olvidaba, pero si están los 60MB o al menos eso creo porque el video dura 7minutos en mi pc y en imageshack igual.
Gracias jmiur

Responder
JMiur  

Dos posibilidades que se me ocurren:

1. Quitar todo del head y colocarlo justo antes de la etiqueta </body>, es decir,los tres scripts (mootools.js, swfobject.js, videobox.js) y la hoja de estilo (videobox.css)

2. Desactivar provisoriamente el script que muestra la imagen de carga y ver qué ocurre, puede haber alguna incompatibilidad entre ellos.

Responder
F3DORVL4  

Ahora entiendo el comentario de Kurodesu, hecha la modificación aún así no logra verse el efecto hasta después de cargada la página. Vuelvo a insistir si existe un modo de indicarles, como lo has hecho tú , que el blog está cargando, porque me da mucha pena quitar el gif.
Salu2

Responder
JMiur  

En mi caso, lo que hice fue colocarla al final de la plantilla pero recuerda que no uso el script de carga, es probable que eso interfiera y mucho.

Justamente por esas interferencias es que he colocado los ejemplos fuera de este blog, para evitar problemas ya que siempre estoy probando cosas.

Saber cuál es el conflicto es casi imposible, son scripts muy complejos y no los mismos desarrolladores han resuelto las incompatibilidades.

Durante la semana que viene mostraré otro modelo de este tipo pero que me parece bastante menos conflictivo y permite hacer lo mismo con videos, imágenes y páginas webs externas. Me ha gustado tanto que casi estoy decidido a incorporarlo definitivamente al blog lo que será una prueba de fuego.

Responder
F3DORVL4  

Hola Jmiur, gracias por el anticipo estaré esperándolo y no tendré otro remedio que quitar el script de carga, porque entre éste y el otro efecto, prefiero el de videobox!.
Gracias por los consejos!.

Responder
JMiur  

No te garantizo que esto de que hablo sea compatible pero, es una posibilidad y podría probarse ya que el resultado es similar pero usa otro framework y no mootools que parece bastante confictivo en Blogger.

Responder
turista-accidental  

buenos días, estoy creando una página con el script y, por ahora me está funcionando bien, sólo que no me encuentra las imagenes de todos los vídeos y alguna la tengo que poner directamente.

www.jaimearanguren.com/prueba

Responder
Gem@  

Olvidé esta entrada :( y yo rompiéndome la cabeza y haciéndote perder el tiempo sorry...

Responder
JMiur  

¿Has visto? Es una librería complicada, por lo menos en Blogger tiene resultados bastante aleatorios y no siempre funciona bien.

Responder
Team Royal Racing  

una consulta… y si deseo mostrar videos desde streetfire.net, que linea de codigo debo aumentar en el videobox.js, se puede?¿

Responder
JMiur  

No sé si es posible ya que no todos los servicios externos están previstos. Habría que poner la URL de una archivo y ver que pasa. Por ejemplo:

http://videos.streetfire.net/vidiac.swf?video=554c9321-3817-49cf-a15f-9b510122b40c

Responder
Solidaridad  

Hola GMIUR, ensayando esta maravillosa herramienta en mi blog de prueba, solo funciona el enlace hacia [en este caso] you tube, no hay efecto ni nada. observa mi blog de prueba y dime donde esta el error. gracias GMIUR

Responder
JMiur  

VideoBox requiere que también se instale mootools.js y es eso lo que falta en el blog.

Responder
huhachaveznoseva@gmail.com  

Hola amigo tu blog me encanta, tengo un problema con el efecto de mototols, la cabecera en flash se come una parte, te agradecería si me puedes ayudar... dime que tengo que hacer

http://uhhachaveznoseva-videos.blogspot.com/

Responder
los sin techos  

Hola Sr. he seguido su blog por un buen tiempo...hoy se me presenta un problema y es como hacer cuando la imagen de youtube se amplie , la cabecera no aparesca sobre ella, quisiera que el video apareciera un poco mas abajo

Responder
JMiur  

En este caso particular, parecería que eso no puede solucionarse porque el header tambien es un SWF y no se me ocurre nada para controlar eso. Debería moficarse el script para que previera esas situaciones.

Responder
deibys  

amigo tu blogspot me gusta me puedes desir como tener una plantilla como la tuya me gusta como es este es mi blogspot http://animedxclarestar.com dime si tu me puedes dar una plantiya como la tuya

Responder
JMiur  

La plantilla original la puedes descargar desde acá. el resto, son tres años de trabajo, errores y mucha paciencia :D

Responder
deibys  

gracias por decirme mira mi blogspot http:animedxclarestar.blogspot.com deja un comentario en el chat no se como hacer que las personas entren en mi blo todo el tiempo me ayudas déjame un comentario en el chat de mi blogspot

Responder
JMiur  

No entiendo la pregunta.

Responder
Andy  

Hola a todos, por favor necesito me ayuden, como puedo enlazar videos de VIMEO...

con los de youtube me funciona perfecto, pero VIMEO nada.

Muchas gracias de antemano

Responder
JMiur  

Tendrías que consultar el las páginas del autor para ver si es posible hacerlo o cómo hacerlo.

Responder
Gem@  

Con tu permiso J.Miur le contesto a Andy, porque alguna vez he añadido vídeos de Vimeo.
Cuando se pulsa en PLAY aparece en el lateral derecho las opciones, hay una de esta forma </> que al marcarla nos ofrece el código para copiar y pegar el vídeo.

Responder
JMiur  

Perfecto, Gem@ :D

Responder
Andy  

Hola a todos, mi consulta es... dar el enlace de un video a una tela de cebolla hecha en dreamweaver (conocida tecnicamente como zona interactiva)

de antemano muchas gracias

Responder
gachon  

Hola amigos, me gustaria saber si existe alguna manera que iniciar la pagina web salte un popup estilo lightwindow o thickbox, para que salga la intro de la web en medio de la pagina en forma de popup y quien quiera verla que la que vea y quien no que la cierre, la intro seria Swf,,,
¿Entonces hay alguna manera de hacerlo, ya sea con eso o con otra cosa?
y que no sea bloqueado por los navegadores
muchas gracias y saludos

Responder
JMiur  

Si puedes ejecutar la ventana modal con alguna clase de script, eso es posible. Dependerá de cuál uses.

Responder
gissella  

:D estuve tres dias tratando de buscar un codigo ke me ayudara con un video... y el tuyo me ayudo N , es el primero ke uso y funciona!!!!!!!

de verdad me orientaste demasiado gracias!!! ^^

Responder
JMiur  

Me alegra que sirviera, Gisella.

Responder
Louitz King, Colombia  

Jmiur, gracias por el post, ya había probado antes el videobox, pero lo implementé en una página web (no blog) en el que también tengo otro script que es el lightbox y genera un conflicto entre los dos, deja de funcionar, tienes alguna idea sobre esto? gracias

Responder
JMiur  

Es l oque dice el post. Nootools y Prototype son incompatibles.

Responder
Carlo Mario  

Hola JMiur, cual es el comando que me permite cargar el video luego q termina de cargar mi web, como un popup de js. Pero en videobox, sin utilizar enlace.
Muchas gracias

JMiur  

Lo desconozco, Carlo.

Responder
www.pescablackbass.es  

Hola a todos, ando algo desesperado.
Estoy encantado con el efecto de este script, pero solo me funciona en Mozilla.
Tanto en Chrome como en IE me abre correctamente el "popup", pero luego no me deja pulsar ningún botón, entre ellos el PLAY que aparece encima del video, aunque sí que me lo detecta, ya que me cambia de color.
Podéis ver a lo que me refiero aquí:
http://www.pescablackbass.es/2012/03/galeria-de-capturas-videos-de-test.html

Mil gracias de antemano

JMiur  

Desconozco el motivo de tal cosa. Como dice la entrada, vi muchas dificultades para implementar este script y la librería Mootools en Blogger.

Responder
www.pescablackbass.es  

Hola de nuevo,
Gracias por tu rápida respuesta.
Al final lo he solucionado gracias al otro script que colgaste, el
LightWindow, que realmente es casi perfecto jajaja
MIL GRACIAS!!!

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