JMiur [E]

Voy a ver si puedo cumplir una de mis deudas, explicando un poco el método que estoy utilizando para mostrar ciertos videos de YouTube, tema sobre lo cual me han preguntado infinidad de veces y siempre he respondido: estoy trabajando en ello. En realidad, no lo hacía, había ciertas cosas que no terminaban de convencerme y he dedicado el fin de semana para poner un poco de orden y simplificarlo hasta donde he podido.

No se trata de algo novedoso sino de "mezclar" algunas de las cosas que ya he comentado para lograr que los videos no se carguen con la página pero puedan ser reproducidos con facilidad.

Todo se basa en un script que nos permite controlar los videos de YouTube, no sólo ocultarlos, algo que sería sencillo utilizando un código y la propiedad display, sino crearlos sólo cuando los reproducimos y eliminarlos cuando los cerramos de tal manera que el buffer (la memoria) se libere y nuestras páginas sean más livianas de cargar y de navegar.

A primera vista, lo más sencillo sería abrir los videos en una página nueva o un popup pero, eso no facilita la navegación ya que, por lo general, son lentas y consumen demasiados recursos. Sin embargo, el CSS nos permite crear un tipo de ventana especial llamada tooltip, que se abre en forma casi instantánea ya que, en realidad, está incluida en nuestra página pero, simplemente, permanece oculta hasta que hacemos click en algún lado.

La idea entonces es, combinar el script que crea el código necesario para reproducir un video específico y colocarlo dentro de un tooltip, con lo cual, podemos reproducirlo con cualquier enlace. Por ejemplo:

EJECUTAR VIDEO (hacer click en para cerrar)

Pero, ya que estamos, ¿por qué no utilizar este método para insertar también otro tipo de archivos de Flash como SWFs?

Bueno, empecemos.

Para esto, sólo necesitamos el script y agregar algunas clases CSS que son las que controlan la parte gráfica y a través de las cuales podemos personalizarla. Las colocamos en la plantilla, por ejemplo, justo antes de la etiqueta </head>:
<style type="text/css">
.ventanaYTB { /* la ventana donde se ejecutan los videos de YouTube */
height: 395px;
margin: 0;
text-align: center;
z-index: 1000;
/* propiedades personalizables */
padding: 10px 0 0;
background-color: #000000;
border: 1px solid #343F4A;
}

.cerrarYTB { /* área para el enlace que cierra la  ventana */
vertical-align: middle;
/* propiedades personalizables */
height: 18px;
margin: 5px;
padding: 4px 4px 0 0;
text-align: right;
color: #FF9933;
background-color: #101921;
border: 1px solid #343F4A;
}

.ventanaSWF { /* la ventana donde se ejecutan los archivos SWF */
width: 100%;
height: 100%;
margin: 0;
padding:0;
text-align: center;
z-index:1000;
}

.cerrarSWF { /* área para el enlace que cierra la  ventana */
margin: 0;
padding: 0;
text-align: center;
vertical-align: middle;
}
</style>

<script src="URL_vagaTooltipsFlash.js" type="text/javascript"></script>
Como siempre, el archivo vagaTooltipsFlash.js lo alojamos en un servidor externo y colocamos la dirección URL correspondiente.

Tal como está, el enlace para cerrar la ventana es una imagen alojada en ImageShack pero, podemos poner cualquier otra. Para esto, sólo debemos editarlo:
var elVinculo = "<img src=\"http://img230.imageshack.us/img230/7117/vboxcerrarzl9.gif\">";
Eventualmente, también podemos modificarlo cambiando la imagen por un texto:
var elVinculo = "CERRAR VENTANA";


¿Y cómo lo usamos? Es muy fácil, si queremos insertar un video de YouTube debemos crear dos DIVs, uno oculto y otro visible. El primero será el que use el script y el segundo, es el que nos servirá de enlace y abrirá el primero:
<div style="display: none;" id="xxxxxxxxxxx">&nbsp;</div>
<div id="v-xxxxxxxxxxx">
<a href="javascript:crearYouTube('xxxxxxxxxxx')">ENLACE</a>
</div>
donde xxxxxxxxxxx será el código identificador del video que nos provee YouTube, por ejemplo:

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

Ese conjunto de letras y/o números es el video_id y YouTube lo genera individualmente para cada uno de ellos lo que nos ayuda a identificar los DIVs con un nombre único e irrepetible. Lo utilizaremos en tres lugares: como ID del DIV oculto, dentro del script para que sepa qué video reproducir y como ID del enlace pero, en este caso, para diferenciarlo del primero, le agregaremos v- adelante.

El enlace, no tiene por que ser un texto, también puede ser una imagen cualquiera. Entonces, si quisiéramos insertar el video anterior, escribiríamos el siguiente código, todo en una sola línea:
<div style="display: none;" id="oWpY9CJBbFQ">&nbsp;</div>
<div id="v-oWpY9CJBbFQ">
<a href="javascript:crearYouTube('oWpY9CJBbFQ')">
<img src="URL_imagen"/>
</a>
</div>
Que dará el siguiente resultado:


Y si no queremos trabajar, también podemos utilizar las imágenes que provee YouTube como thumbnails. Hay disponibles tres para cada video:

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

Nuevamente, reemplazamos xxxxxxxxxxx por el ID del video. Si el video es este:

http://www.youtube.com/watch?v=9I9mQ5i6ZpY

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

http://img.youtube.com/vi/9I9mQ5i6ZpY/2.jpg

Y este será el resultado:


¿Y con los archivos SWF? Todo es parecido pero, necesitamos indicar una serie de parámetros más:
<div style="display:none;" id="nombreID">&nbsp;</div>
<div id="v-nombreID">
<a href="javascript:crearSWF('nombreID','URL_archivoSWF',ancho,alto,'color')">
ENLACE
</a>
</div>
donde:

nombreID es el identificador único que usaremos; como en el caso anterior, debe ir en tres lugares diferentes, uno de ellos, anteponiendo v- para diferenciarlo
ancho y alto son el ancho y el alto de la animación, expresados en pixeles
color es el color de fondo que puede ser transparent o un código de color en formato hexadecimal (000000 es negro y FFFFFF es blanco)

Este seria un ejemplo:


El script como las imágenes de ejemplo pueden descargarse en formato ZIP

124 comentarios:

Charly  

Muy muy bueno, de verdad.Y muy útil.

Buen trabajo.

Responder
ChT  

Como agradecer tu esfuerzo sin decir gracias.

Muy buen trabajo.

Responder
...Markos...  

buen título jajaj y muy buen truco , como de costumbre

Responder
Gem@  

La entrada es genial como todas, estoy de acuerdo con Markos en la genialidad del título. También me ha gustado eso de...
"me han preguntado infinidad de veces y siempre he respondido: estoy trabajando en ello. En realidad, no lo hacía"
Bien por ti que muestras tu lado de ingenio y humanamente sincero.

Responder
JMiur  

Pués, no he dicho más que la verdad, no estaba trabajando en absoluto, simplemente, tenía pereza :D

La verdad, creo que la idea es buena y me ha resultado muy útil, tanto, que creo que estoy abusando de ella.

Me parece que el script tiene muchas posibilidades y puede adaptarse a muchas situaciones, espero que alguien pueda modificarlo y agregarle otras cosas.

Responder
Key  

Simplemente excelente, muy bueno, aplausos ^_^
Besos Key

Responder
JMiur  

Gracias por el comentario Key, espero que sea útil.

Responder
Roberto Caamaño  

solo tengo una cosa que decir...

GRACIAS JMUR!

Responder
Lucía  

Esto parece super interesante, pero creo que lo voy a tener que releer unas cuantas veces antes de atreverme a usarlo en algún lado ...

Responder
JMiur  

Roberto: tarde, pero llegó :D

Lucia: es un placer tu visita.

Es muy sencillo de usar y de implementar: subir el script, copiar y pegar el código CSS y luego, usar cualquier video con el código que se ve en el post que es el único que luego se utilizará.

Responder
Fdo. R. Baños  

Hola: al principio me costó mucho trabajo entender tus instrucciones, pero cuando comentaste que se trataba de algo muy sencillo, pues, me motivé a poner más atención a cada una de las indicaciones que das y... ¡Fantástico! Muchas gracias por tu aportación y mis más sinceras felicitaciones por tu magnífico blog. Saludos.

Responder
JMiur  

Te agradezco mucho el comentario :)

Responder
ymmot  

:-) ... buenas.

Estupendo Articulo,... queda en mi lista de cosas a probar,... cuando disponga de tiempo.

... segun figura en el fichero "vagaTooltipsFlash.js"

// Crear bloque para cerrar la ventana tootltip
function eliminarObjetoT(cual) {
var objetoT = document.getElementById(cual);
if (objetoT) {
objetoT.innerHTML = " "; // eliminar objeto interno
}
contraerVentanaT(cual); // ocultar ventana tooltip
}

... entiendo que, asignando al objeto un "simple espacio",... con eso quedaria eliminado.

Gracias,... Muy Interesante ;-)

Responder
JMiur  

Exacto, para decirlo sencillamente, esa instrucción lo que hace es escribir código HTML en la página.

Un objeto tiene cierto código y lo reemplazamos con otro. En este caso, un espacio.

objetoT.innerHTML = " "; // eliminar objeto interno

Se elimina de la página y de la memoria porque no es parte de la página, lo habíamos creado antes.

Responder
Mr.Children  

Hola amigo, es la primera vez que posteo, pero no es la primera vez que busco ayuda y recurro a tus consejos inigualables (únicos por decirlos de otra manera, y he buscado en varios blogs similares al vuestro), por eso déjame felicitarte por tu arduo trabajo diario... ya que te das el tiempo, que en mi caso no tengo, para enseñar a la gente.

En fin, me gustaría que me ayudases con algo que no me quedo claro (y es el primer articulo que utilizo que queda un punto ciego), ¿donde puedo descargar/crear/hacer el TooltipsFlash.js?.

Muchas gracias de antemano por tu ayuda.

Saludos!.

Responder
JMiur  

El script está en un ZIP. La verdad, ahora que lo dices, puede ser que no esté muy claro :$

Aquí está el LINK (botón derecho, guardar como)

Ojalá te sea útil :)

Responder
Claudio - Poca Tinta  

Eres un genio, bacan como arnas y desarmas las plantillas

Intentare ponerlo en uso, me gustaria saber si se puede hacer con http://www.dailymotion.com/us, ya que mucha veces yoy tube esta bloqueado en algunas maquinas.

Un Abrazo!!!

Responder
JMiur  

Sí, sin duda puede hacerse para otro tipo de servicio, fíjate en el script y verás que lo que hace es escribir el código para insertar el video, bastaría cambiarlo o hacer una función similar para cada servicio.

Responder
Aviber  

Grande Maestro:
Explicás claro como agua de manantial,pero a los viejitos como yo les cuesta un perú llegar a las neuronas gastadas,a pesar de ello finalmente lo logré,te felicito por tus contribuciones,seguí sin desmayar,que tus discípulos seguiremos abrevando en tus fuentes

Responder
JMiur  

aviber:
Gracias por el comentario.

Las neuronas se gastan más cuando no se usan, cuando nos ponemos viejos, sólo se vuelven un poco más perezosas y no les gusta que las molestemos pero, son hijas del rigor :D

Responder
Aviber  

De nuevo Maestro,para comentarte que los videos funcionan 10 puntos en el blog,pero no entiendo aún como puedo cargar los swf,no sé de donde descargargarlos para obtener los códigos como el de mis calculation,que te diré que está buenísimo,si me puedes tirar
algunas directivas precisas,te lo agradeceré

Responder
JMiur  

Los SWF dependerán de cada caso en particular. Algunos, es posible descargarlos y usarlos, otros no, eso no es simple de resolver.

En todo caso, dime donde está el que quieres usar y te cuento si es posible usarlo o no.

Responder
Aviber  

Me gustaría incorporar en el blog el de mis calculation si se puede
gracias,desde ya

Responder
JMiur  

Insisto: no sé cuál es dime donde está, donde lo puedo ver :)

Responder
Aviber  

Es el que está en tu página como ejemplo.-
CLICK PARA VER ANIMACION SWF

Responder
JMiur  

Jajaja, ni me acordaba del nombre :D

Primero que nada, descarga el SWF y guádalo en algún sitio, Gogle Pages o ImageShack: DESCARGAR

Una vez hecho eso, puedes usar el modo descripto en este post o colocarlo como cualquier SWF:

&object width="400" height="250" id="movie"
type="application/x-shockwave-flash"
data="URLarchivo">
<param name="movie" value="URLarchivo" />
<param name="wmode" value="transparent" />
</object>

Todo en una sola línea.

Responder
JuanCarlos 3941  
Este comentario ha sido eliminado por el autor.
Responder
JMiur  

En la parte del CSS, todo lo que indica:
background-color es el color de fondo y todo lo que indica color es el color del texto.

La parte de abajo, donde se cierra la ventana se llama: cerrarYTB

Bastaría cambiar y/o agregar esas propiedades:

cerrarYTB {
background-color: #elColor
...............
}

Responder
JuanCarlos 3941  
Este comentario ha sido eliminado por el autor.
Responder
JuanCarlos 3941  
Este comentario ha sido eliminado por el autor.
Responder
JMiur  

Utiliza una librería llamada Mootools que no he logrado que funcione bien en Blogger. Por ejemplo, en Internet Explorer, cuelga el navegador o provoca un error grave haciendo que el blog sea inaccesible.

No hay muchas explicaciones al respecto y, al parecer es un bug del mismo navegador lo que la hace imprevisible. A veces funciona y a veces no.

Responder
mundo tuning  

Hola amigo me urge tu ayuda please, use tu codigo y todo de maravilla, solo que en explorer, a pesar que mi pelicula flash tiene preload no lo muestra, aparece la imagen en blanco de aplicacion y hasta que no se carga todo no lo reproduce, que hago, en firefox funciona al 100% tal como lo quiero, como modifico esto plase!!!!

Responder
JMiur  

Muéstrame un enlace donde eso ocurra para verlo online.

Responder
mundo tuning  

Hola Jmiur gracias por responder, mira el enlace es este:

http://shockmediax.blogspot.com/2008/05/por-el-momento-nicamente-aceptamos.html

en firefox se ve el preload y en explorer no, pense que era cosa del preloader del flash, pero ya corri individualmente la animacion:

http://img247.imageshack.us/my.php?image=340x300vq9.swf

y en explorer y firefox si se ve, me imagino es algo del codigo del .js pero no tengo ni idea que pueda ser

Te paso mi msn: mrbodk@hotmail.com por si puedes contactarme y lo platicamos sale? aca voy a estar conectado please!! muchas gracias =)

Responder
JMiur  

Alguna aclaración porque hay algo que no comprendo.

El código que veo, apunta a un SWF:
http://www.fileden.com/files/2008/6/6/1948077/340x300.swf

que, veo tanto en Firefox como en IE.

Hablas de un Preloader. ¿Cómo se ejecuta? ¿Lo hace el SWF? Si es así, no lo veo.

Me das esta dirección:
http://img247.imageshack.us/my.php?image=340x300vq9.swf

Ahí, no veo nada, no se carga la paelícula. De cualquier manera, esa no es la dirección directa sino una página web. La dirección directa es:
http://img247.imageshack.us/img247/3424/340x300vq9.swf
y allí sale un mensaje de Error 403.

¿Me puedes aclarar un poco?

Responder
mundo tuning  

Hola que tal, si disculpa, antes estaba el link de imageshack, pero como este proyecto me urge trate de encontrarle una solucion rapida, mi swf anterior pesaba 1.2 megas y tenia preload, en firefox lo mostraba bien como te decia, pero en explorer se comia el preload y hasta que no cargaba todo el swf no lo mostraba, mientras mostraba el cuadro de posicion de imagen (el que tiene un triangulito un cuadrado, etc). Por ello mejor hice el swf mas pequeño ahora pesa 20 kb y le quite el preload pues no lo necesita con ese tamaño. Lo subi a fileden porque es mas rapido que imageshack al mostrar swf's y pues el de imageshack ya lo borre pues no me servia ya y soy muy ordenado jeje. De todas formas podrias probar haciendo un post de prueba con tu codigo y metiendo un swf con preload como de un mega y veras que no te mentia respecto al explorer, en otros lados encontre que hay que meter un swf de un frame y que luego ese llame al grande, pero es mucho relajo jeje.

De todas formas gracias por tu ayuda Jmiur, tu codigo si me sirvio y mucho, solo que por las prisas he tenido que modifica a cada rato esa entrada del blog.

Cualquier cosa estoy en mi msn para servirte, saludos.

Responder
JMiur  

Claro, ahora comprendo :)

En realidad, allí el problema está en la forma en que maneja IE los SWFs sin importar cómo lo ejecutamos.

Responder
mundo tuning  

Jeje por cierto, yo de nuevo jeje sorry es que tu code esta muy bueno, en el caso de los videos, solo es util con youtube?, se podria usar con otro servicio como pornotube por ejemplo? es que ya lo intente y creo no se puede o no se hacerlo jeje

Responder
JMiur  

En realidad, tal como está no pero sería posible crear otra similar para otro tipo de servicio si se sabe cuál es el código usado por ese servicio y si siempre es similar.

En realidad, estos sripts lo único que hacen es escribir el código HTML en la página.

Responder
Kutar  

Hola muy buenas, pues este script creo qu es de los pocos que cargan un SWF dentro de mootools y que se vea en IE 6x,7x, Firefox 2.0.
Pero mi gozo en un pozo, no logro ni a patadas que me funcione, despues de 6 horas ya no se ni que pongo :P

yo tengo colocado esto como ID:
// id="D27CDB6E-AE6D-11cf-96B8-444553540000"
id="v-D27CDB6E-AE6D-11cf-96B8-444553540000"
('D27CDB6E-AE6D-11cf-96B8-444553540000','Balneario Solares.swf"',640,480,'000000')">
//

la ID que meto ; creo que es el fallo, pero es el numero que me da al insertar el SWF de manera normal en el DW.

Que es lo que pongo mal??. alquien me podria ayudar por favor??.
Gracias.

Responder
JMiur  

Kutar:

Por lo que veo, el error no es el ID sino que no está definida la dirección del SWF.

id="D27CDB6E-AE6D-11cf-96B8-444553540000"
id="v-D27CDB6E-AE6D-11cf-96B8-444553540000"
'D27CDB6E-AE6D-11cf-96B8-444553540000'

Esos datos, sólo indican los nombres de los elementos HTML, en realidad, podrían ser cualquier otro, por ejemplo:

id="balneario"
id="v-balneario"
'balneario'

El dato erróneo es la URL que dice:
'Balneario Solares.swf"
y debería ser de este tipo:
'http://......../Balneario Solares.swf'

Sería algo así:

('balneario','http://......../Balneario Solares.swf',640,480,'000000')

Responder
Kutar  

Diossss !!!
Por fin, efectivamente, el fallo estaba donde tu has indicado, incluso, he probado a ponerlo con una ruta relativa, sin especificar una URL concreta, sino en un directorio raiz simplemente, y asi si funciona a la perfeccion. Y se ve perfectamente en IE 6,7, en Firefox, 2x y el nuevo 3, en opera y en safari. Vamos un lujazo. Es una muy buena alternativa para colocar por ejemplo galerias en flash, sin ocupar mucho espacio cuando hay muchas. Ademas se acelera la carga si la llamada se hace a un XML, en lugar del SWF directo, asi es como lo he insertado yo en mis pruebas.
Ahora me falta crear un CSS para que cuando abra la ventana coloque todo mejor, ya que aparece un pelin "descolocado todo", podria servir, pero siempre quedara mejor, a mi humilde entender.
Muchisimas gracias por ayudar y por mostrar cosas asi, realmente este site es muy interesante. Lo conoci hace poco y ya lo tengo recomendado a bastante gente. ;)

Responder
JMiur  

Me alegro que todo se arreglara, Kutar :)

Responder
Haîmat  

Ey muy útil muchas gracias XD. Lo he dejado con los mismos colores y todo. A ver que tal lo acogen en mi blog.
Saludos

Responder
JMiur  

Me alegra que te fuera útil :)

Responder
Anónimo  

esta muy complicado el codigo

Responder
Aviber  

Lo hago con el viejo estilo porque el nuevo no furula.-
Hola J Miur: nuevamente visitándote,ya es la tercera vez que intento poner el comentario,aparte de no poder ver vista previa porque se borra.-
En Videoteca tengo el problema que los videos de YouTube se ven perfectamente en todos los navegadores,menos en IE,no sé si puse los garfios mal en algún lado,puedes tirarme una soga.
Gracias

Responder
JMiur  

Aviber:
El botoncito de Vista Previa de los comentarios parece que está de adorno :D

Miro tu blog y noto algún error en los códigos.
En este post:
http://cineavir.blogspot.com/2008/10/el-mejor-tango-bailado.html
el enlace debería ser la imagen pero, parece que lo debes haber cerrado mal; eso en ambos navegadores.

En cuanto a IE miro el siguiente como referencia:
http://cineavir.blogspot.com/2008/10/camino.html

En ese y en otros, la imagen que sirve de enlace tine ealgo así:
<img width="" height="" src="URL" />

Como width y height no tienen valor, no se muestran y por lo tanto nada funcionará. Puedes hacer dos cosas, o le colocas un valor o eliminas esos atributos, en ese caso, el navegador leerá el tamaño.

<img src="URL" />

Cambaido eso, no he visto problemas para reproducir el video en IE7.

Responder
Aviber  

Hola JMiur:nuevamente,tenías razón sacando height y with,se ven las imagenes en IE,pero los videos abren la ventana negra,pero se quedan ahí sin reproducir nada

Responder
JMiur  

Dime exactamente uno que no puedas resproducir porque los que he abierto parecen funcionar normalmente.

Responder
Aviber  

Los últimos El mejor tango,Camino,La flauta mágica,los veo con todos los navegadores excepto IE,abre la ventana negra del script y no aparece el video de youtube;también noté que agregar a favoritos sale de cuadro y no aparece el reloj.-No ´se si tendrá algo que ver o es un problema mío

Responder
JMiur  

Pués no he tenido problemas para ver ninguno de ellos; aquí te dejo una CAPTURA

Da la impresión entonces, de ser un problema en la configuración del mismo navegador. Primero, verifica si Flash está bien instalado, si, por ejemplo, se ven videos de YouTube directamente desde otro sitio. Segundo, verifica si hay algún tipo de bloqueo, temporalmente, puedes deshabilitar el bloqueo de popups para ver tu blog.

¿Alguien más tiene ese problema? Dejo la pregunta abierta a ver si alguien puede chequear tu blog y dar alguna idea.

Responder
Winjaime  

bueno gracias por el truco y me ha funcionado, aunque le hice modificaciones al script para que la relación de aspecto fuera diferente y se pudiera ejecutar a pantalla completa.

En relación al video del tango, yo también lo puedo ver incluso con Internet Explorer

Responder
Jorgelio  

Hey perdon por molestar. Si quiero esta animacion:
http://img9.xooimage.com/files/e/b/2/boxhead2play-e36ca7.swf
como debo poner el codigo?. Necesito algo mas?
Y muchas gracias por tomarte el tiempo de responder.

Responder
JMiur  

No necesitas nada más, sería algo así;

<object width="500" height="450" id="movie" type="application/x-shockwave-flash" data="http://img9.xooimage.com/files/e/b/2/boxhead2play-e36ca7.swf"<>
<param name="movie" value="http://img9.xooimage.com/files/e/b/2/boxhead2play-e36ca7.swf" />
<param name="allowScriptAccess" value="always" />
</object>

Todo escrito en una sola línea. Lo que no sé, es el tamaño que requiere.

Responder
Jorgelio  

Ok. El tamaño creo que es el mismo. Gracias

Responder
HaCk CrAcK  

Hola Jmiur, como hago para que si tengo por ejemplo 5 videos, al hacer clic en 1 enlace se ejecute el video , pero que cuando haga clic en otro enlace se ejecute el otro video, pero que cierre el anterior?
Porque lo que quiero hacer es tener una fila horizontal con las imagenes de los distintos videos y al ir haciendo clic en ellos se vallan ejecutando abajo, pero que cuando haga clic en otra imagen se cierre el anterior video y aparesca en su lugar el nuevo video.
Espero que me hayas entendido

Responder
JMiur  

Debería crearse otro script que se convine con algo similar al descripto en esta entrada. No sería una tarea sencilla.

Responder
Clifftallica ®  

excelente me sirvio bastante :P

http://server4hc.blogspot.com

Responder
Leno_el_racsO  

Hola, me ha gustado, pero no se mucho de computadoras, todo me queda claro, pero no se a que te refieres en esta oracion:

"Como siempre, el archivo vagaTooltipsFlash.js lo alojamos en un servidor externo y colocamos la dirección URL correspondiente."

Una vez que tenga el archivo vagatooltipsflash.js, donde debo alojarlo, no se lo que es un servidor externo, podrias esplicarme como se hace eso?

De antemano gracias.

Responder
JMiur  

Leno_el_racsO: Necesitas un sitio para subir ese archivo del mismo modo que lo haces con una imagen. Como eso se ha vuelto complicado, fíjate en las explicaciones de esta entrada. Te aconsejaría seguirlas y copiar y pegar el codigo directamente en la plantilla que es el método más sencillo y el más seguro. Es el que uso yo porque este modelo de script lo utilizo habitualmente.

Responder
Leno_el_racsO  

Muchas gracias JMiur, te agradesco la ayuda, voy a intentarlo espero me funcione.

Que tengas un buen dia

Responder
ALvaRiTo  

hola. me salio a la primera y quedo bonito. con youtube y tu.tv. pero cuando lo hago con megavideo sale toda la pagina,, hay forma de solucionar eso?

Responder
ALvaRiTo  

actualizo! acabo de solucionar eso. una preguntita. como se hace pa ver el video mas grande. que abarque "casi" toda la ventana que se habre.

Responder
JMiur  

Para eso, debes modificar el script y allí, buscar la referencia a la etiqueta OBJECT que tiene los parámetros width y height que son los que establecen el tamaño del video.

Responder
Graciela  

hola Jmiur :)

En el comentario 16 dejas un link, pero me dice:
'Bloqueado por Trend Micro página peligrosa'

se puede hacer algo al respecto...buen día para hoy...también mañana!!!

Responder
JMiur  

Graciela:
Es que yo soy así: UN VIRUS :D
Esas cosas suelen pasar con algunos antivirus. De todos modos, ese enlace ya no existe, usa este otro; en ambos casos, es el ZIP que subí yo :)

Responder
Graciela  

jijiji ya no sé si es real lo del antivirus o no...es más hace un tiempo me marcaba a Blogger como peligroso :O
Todavía recuerdo el día que chocaron Panda y el actual, los puertos y tantas cosas que no entiendo...tampoco el técnico jajaja

no sé si escuchaste...porque eres un pequeñuelo aún

Luna de Miel

Dejándole musicalizado el blog me retiro, sin antes probar lo que me indica...adioshhhhhhhh

Responder
JMiur  

Gracias por la musicalicación :)

Responder
Graciela  

otra pregunta que no será la última

soy muy pesada Jmiur :(( tienes que soportarme sin chistar :)

Ahora todo es código debo subirlo ¿¿¿a dónde??? o no lo subo nada jajaja...mi Dios ésto no es para señoras mayores :$

Responder
JMiur  

No hace falta alojarlo en ninguna aprte, puede ponerse en la plantilla (yo lo tengo ahí). basta pegar el contenido del scriot entre etiquetas así:

<script type='text/javascript'>
//<![CDATA[
...........
//]]>
</script>

y el CSS lo mismo, entre etiquetas <style> .......... </style>

Responder
Graciela  

chas gracias amigo :P

Responder
Graciela  

hola JM ya hice creo que bien lo que me dijiste en
http://cachorra2208.blogspot.com/

luego de lo realizado si estuviera bien, sigo con lo que indicas aquí???

Buenas tardes :D

Responder
JMiur  

Un solo error. Veo que hay un script que no está cerrado y eso, hará que no funcionen varios. Es el de las fechas: // LAS FECHAS DE LOS POSTS

termina así:

document.write(fday+fmonth+fyear);
}

<script type='text/javascript'>
............ y aquí comienza el otro

pero, debería terminar así:

document.write(fday+fmonth+fyear);
}
//]]>
</script>

<script type='text/javascript'>
............ y aquí comienza el otro

No sé si se comprende :)

Responder
Graciela  

ohhh yes, en palomas estaba bien...solo que la 'ca chorra' andaba despistada...volviendo a las preguntas...'papá ahora que hago???' en lugar de 'cuando nos vamos' ;) :P

Responder
JMiur  

Le devuelvo la pregunta: Y ahora ¿que quiere hacer, madame? ¿Has probado colocar algún post?

Responder
Graciela  

okey babie por la tarde o noche intento y pienso...pensar esa es la cuestión...chauu uuu uuu

Responder
Graciela  

vuelve el perro arrepentido con sus orejas muy bajas...probé en una entrada, luego de colocar todo el código que me donaste :) me pregunto: tiene que haber una imagen fija y algo que diga abrir o parecido...está incluido en la donación???
traté con lo de la segunda imagen que Youtube no provee como dices pero nada :(

Responder
Graciela  

en caso de tener que crear una imagen sería de 425 por 350 pixeles??? perdón me olvidé

Responder
JMiur  

Debe usarse un texto o una imagen pero, esa imagen pude ser cualquiera, no importa el tamaño. Por ejemplo, si es un video de YpuTube, podrían usarse cualquiera de las miniaturas que tiene el video.

Responder
Graciela  

leo Jmiur y practico. muchas gracias

Responder
Graciela  

Jmiur de nuevo molestando, desde que me dijiste qué falta bien creo que corregí ahora: no se muestran las fechas y lo del video ni hablar :)

Puedes hacerme el favor de mirar nuevamente en cachorra, solo si tienes el tiempo y deseas, no hay problems :)

Responder
JMiur  

Graciela:
En un script hay una llave de cierre mal.

function ocultarVentanaT(name) {
var objetoT = document.getElementById(name);
if (objetoT) {
objetoT.style.display = "none";
}
}
}

Esa última } sobra y debe eliminarse.

Para las fechas, lo que pocurre es que hay que cambiar el formato en la configuracion. Ahora está así:
miércoles, noviembre 18, 2009
y deberías tener marcado este tipo e formato:
11/18/2009

Responder
Graciela  

"Mas rapido que una tortuga, Mas fuerte que un Ratón, Mas Noble que una lechuga" su cerebro y visión no necesitan verificación!!!

Muchas gracias!!! a mi lo corchetes me van a terminar matando :)

Responder
JMiur  

Jajajajaja ojo, no es un cochete ] sino una llave } :D

Responder
Graciela  

las llaves, los corchetes, me olvido de cambiar la configuración -mas fácil que la tabla del 1- qué hacer mi madre con esta cabecita loca??? ;)

Responder
Graciela  

si te fijas en el blog al que hice mención ;) es spam spam del bueno, puse la palabra abrir...no entiendo nada de las miniaturas ¿donde se esconden esas maulas?

la cajita se vería una vez instalada la miniatura? o debo cambiar el color del ejemplo?

Responder
JMiur  

Me perdí, no veo dónde está el ejemplo, Graciela.

Responder
Graciela  

VIDEO QUE MIRA JMIUR gracias

Responder
JMiur  

OK. Voy a escribir acá el código para ese video del ejemplo, el que está es erróneo:

<center>
<div id="o_7D5sPpZi0" style="display: none;"> </div>
<div id="v-7D5sPpZi0">
<a href="javascript:crearYouTube('o_7D5sPpZi0')"><img src="http://img.youtube.com/vi/o_7D5sPpZi0/0.jpg"/></a>
</div>
</center>

Todos, serán iguales, cualquiera que coloques, sólo cambia el ID que ene este caso es
o_7D5sPpZi0

Espero que se entienda, sino, me mandas un mail y lo paso por correo; con eso sólo, funcionará, el script está bien colocado. Luego, vendrán detalles de CSS pero eso es lo de menos.

Responder
Graciela  

perfecto tesoro :D como una chica con juguete nuevo!!!
Lo de el css me las ingenio...cómo avisar que tienen que pinchar ahí para abrir el video :O ya veo qué le has puesto y si no vuelvo a preguntar.

Gracias Aladin!!! :P

Responder
JMiur  

Para "avisar", simplemente, coloca un texto debajo y eso será suficiente.

Responder
Graciela  

okey, viste que debajo de los coments tengo 'si deseas puedes comentar al viejo estilo' no lo hacen, y quedan no te puedo comentar jajaja.
Hay que ser previsor/a en todos los sentidos mi Deus!!!

Gracias nuevamente por tu tiempo, ahora voy a poner mi propio estilo a la caja -se agrandó Chacarita- :)

Responder
Graciela  

pshhh pshhh cuando se abre el video queda la imagen debajo, es normal doctor Jmiur?...qué hincha P que soy, así no voy a encontar novio ;)

Responder
JMiur  

Es normal cualdo uno se equivoca :D En este caso, me euqivoqué yo. Dice;

<div id="v-7D5sPpZi0">

debería decir:

<div id="v-o_7D5sPpZi0">

porque el ID del video ese es o_7D5sPpZi0, el guión confunde un poco. Siempre es:
v-
más el ID del video

Responder
Graciela  

es normal equivocarse todos los días...menos mal que tienes esas neuronas y vista para mirar, decía que llevaba la v delante, solo que no me fijé...adeusssss

Responder
El Chueco  

Saludos desde México
Muy bueno funciona muy bien. solo una pregunta.
¿como le puedo quitar el borde blanco a la cruz de cierre del video.?
Pag: http://goo.gl/cbmr.qr
Gracias:D

Responder
JMiur  

Según tu plantilla, todas as imágenes de las entradas tienen definido un borde blanco; agrega unapropiedad para evitar eso; algo así:

.cerrarMGV a img {border:none;}

o bien:

.cerrarMGV a img {border:none !important;}

Responder
El Chueco  

hola
Muchas gracias si funciono.:o
Y otra cosa como le puedo mejor quitar ese definido blanco en la plantilla.
Muchas gracias.:D

Responder
JMiur  

¿A cuál blanco te refieres exactamente?

Responder
El Chueco  

Perdón me refiero al definido blanco que le da mi plantilla a las imágenes.:)

Responder
JMiur  

Veo varias definiciones donde hay fondos de color blanco: #comments-block {} #footer-wrapper {}

Simplemente, busca edefiniciones de este tipo:
background:#FFFFFF;
que son las que provocan eso y las eliminas o ventualmente, colocas otro color o:
background:transparent;

Responder
FUEGO  

Hola, funciona de maravillas, pero queria preguntarte si existiria la posibilidad de usar nuestro propio reproductor para ejecutar los videos de youtube utilizando este metodo.

Responder
JMiur  

Si, no debería haber problemas en eso, deberías buscar en el script el código del reproductor y cambiarlo por el que uses; el problema es que no hay muchos reproductores que hagan eso. El único que recuerdo haber probado es tubePlayer.

Responder
FUEGO  

Sacame de una duda, he notado que youtube esta utilizando más reproductores, inclusive e visto que en uno de esos reproductores no tiene la marca de agua en los videos, asi mismo he visto que esa marca ha sido remplazada por otra ejem: http://www.youtube.com/watch?v=ddC6GEHAlkg y aqui puedes ver el reproductor http://s.ytimg.com/yt/swf/watch_v8-vfl174813.swf y aqui la marca de agua http://s.ytimg.com/yt/swf/vevo_watermark-vfl128861.swf me preguntaba si se podria utilizar uno de estos reproductores y agregarles nuestra propia marca para luego utilizarlo como indicas en este post, por cierto donde deberia de colocar el swf en el codigo del script, gracias por tu ayuda.

Responder
JMiur  

La marca que ves es porque seguramente, ese canal es de alguna empresa que ha pagado por ese privilegio. Los otros reproductores son eso, archivos SWF pero dudo mucho que puedan ser usados de manera independiente.

No se trata de colcoar el código en alguna aprte, si se quiere usar un reproductor distinto, debería modificarse el script y verificar que los datos que se envian son aceptables.

No, no creo que tenga ningún sentido hacerlo ya que siempre que se usa YouTube, el reproductor, aunque sea independiente, debe utilizar el API de ellos y ese mismo API agrega la marca.

Responder
FUEGO  

Gracias por sacarme de la duda, me has evitado trabajo innecesario :) y si deseo utilizar el reproductor de tubeplayer, como tendria que agregarlo para que funcione con el script de este post, no logro cambiar el codigo del reproductor, gracias de antemano, sin duda la información que tienes en tu blog esta como para ponerla en un museo, tu blog es uno de los mejores que he visto.

Responder
JMiur  

En teoría, primero deberías subir el reproductor SWF a algún servidor y luego cambiar las referencias:

http://www.youtube.com/v/

por algo así:

URL_tubeplayer.swf?videoId=

Responder
Manfenix  

Método funcionando:
Presentación
Gracias JMiur, :)

Responder
Kike  

:)
Muy bien, ya lo implementé y quedó chido el SWF.
Gracias.

Responder
Manfenix  

Una consulta JMiur. Intento tener la opción de "full screen" en el video.
En el script agregué "&fs=1" al data:

data=\"http://www.youtube.com/v/" + cual + "&fs=1&autoplay=1\" />" +

y al value:

value=\"http://www.youtube.com/v/" + cual + "&fs=1&autoplay=1\" />" +

Aparece en la barra del video la opción de pantalla completa, pero no se ejecuta.

Qué me está faltando?.

El ejemplo online es: Project.

Gracias por cuaquier ayuda. :)

Responder
JMiur  

Un par de detalles que veo como error:

No es: http://www.youtube.com/v/UdO6T1TIDzQ&fs=1&autoplay=1
sino: http://www.youtube.com/v/UdO6T1TIDzQ?fs=1&autoplay=1
el primer parámetro se adiciona con el caracter ? y el resto con el caracter &

Agrega también esta etiqueta al objeto:
<param name="allowFullScreen" value="true" />

Responder
Manfenix  

El parámetro de AllowFullScreen lo he añadido en el object en dos partes así:

Script

Pero están mal ubicados y/o no debe repetirse el parámetro, porque el script no se ejecuta.

Dónde y cómo se lo/s ubica en el object?

Responder
JMiur  

Por ejemplo, en la función crearYouTube(cual) dice:

"</object>" +

y puedes agregar el parámetro así:

"<param name=\"allowFullScreen\" value=\"true\" /></object>" +

Responder
Manfenix  

Ha quedado perfecto. :P
Gracias por la ayuda.
Saludos. :)

Responder
Manfenix  

Hola JMiur. Es posible agregar en el script algún parámetro para que la función «Transcribir audio» sea habilitada en el video que se inserta en el blog?.
En el reproductor se puede ver el botón de CC correspondiente a tal función, pero no funciona, valga la redundancia.
El ejemplo para ver es: AMS-02
Saludos y gracias por cualquier ayuda que me oriente al respecto, :)

Responder
Manfenix  

Problema solucionado JMiur.
Aparentemente fue un problema temporal de Youtube. Ahora se encuentra funcionando la transcripción de audio.
Saludos.

Responder
Fherguzon Fletcher  

Hola, muchas gracias por el post, esta excelente, lo aplique a mi blog de pruebas en el cual hize una entrada con dos videos con imagen, el problema es que cuando doi click al segundo, este desaparece es decir, la imagen y no aparece mas, luego cuando doi click al primero este en vez de desaparecer la imagen mientras se reproduce el video, la imagen mejor se va hacia abajo del reproductor del video. Que es lo que causara este problema?. Gracias nuevamente.

Responder
JMiur  

Tendría que ver tu ejemplo para responderte. Revisa si los IDs son correctos.

Responder
Fherguzon Fletcher  

Ya se arreglo el problema, volvi a instalar el codigo antes de head y con eso se resolvio. Muchas gracias por tu atencion y por el truquito tan bueno.

Responder
javier hernandez  

pero esto es para los que van a usar youtube para compartir videos. verdad?.. y si en ves de videos son entradas y que se muestre la imagen de la entrada . y la descripcion que aparece en la entrada.. ?? se podria hacer?

JMiur  

No sé a qué te refieres o qué quieres hacer. Mientras tengas los datos del contenido, puede hacerse cualqueir cosa.

Responder
Christian Buera  

Hola Jmiur, esto es excelente y lo voy a utlizar pero me preguntaba si existe al así para los videos de Vimeo ya que tengo un canal y la idea es ir subiendo algunos al blog y de esta forma no estaria recargando tanto el blog, no?

Una de tus entradas se llama así: "Crear plugins para las entradas: insertar videos" eso que explicás ahí es algo parecido a esta entrada?

Gracias.



JMiur  

Sí, son cosas similares. Puede hacerse con cualquier tipo de código repetitivo pero, los detalles dependerán de cada caso en particular.

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