JMiur [E]

Y ahora le toca el turno al reproductor que originó toda esta serie. Apareció en google.dirson hace ya más de un mes y es otra alternativa independiente de YouTube. Se trata de un reproductor que puede encontrarse en jeroenwijering.com.

Pero lo interesante del sitio es que dispone de varios reproductores y todos se insertan del mismo modo. JW FLV Player está desarrollado para reproducir videos en formato FLV; JW MP3 Player es un reproductor de audio, JW Image Rotator permite mostrar secuencias de imágenes con transiciones.

El que más me interesó fue JW Media Player, un reproductor que soporta la reproducción de múltiples formatos, MP3, FLV, SWF, JPG, PNG y GIF. Además, permite la reproducción de listas RSS, XSPF y ATOM donde pueden mezclarse diferentes tipos de archivos.

Una vez que bajamos el ZIP, para incluirlo en Blogger sólo necesitamos dos, swfobject.js y mediaplayer.swf que deben ser alojados en cualquier servidor.

El script debe ser insertado en el HEAD de la plantilla:
<script type="text/javascript" src="URL_swfobject.js"></script>
El reproductor se inserta con el mismo tipo de código que cualquier otro objeto al cual le podemos agregar parámetros para personalizarlo:
<object width="ancho" height="alto" id="movie"
type="application/x-shockwave-flash"
data="URL_mediaplayer.swf">
<param name="movie" value="URL_mediaplayer.swf" />
<param name="flashvars" value="file=URL_archivo¶metros" />
</object>
Como siempre, todo el código debe estar escrito sin saltos de línea.

Los parámetros aceptados son los siguientes:

displaywidth=valor establece el ancho donde se va a mostrar el video. Puede ponerse un valor menor al del SWF y la lista de items aparecerá a la derecha y no abajo.
displayheight=valor establece la altura donde se va a mostrar el video (mínimo=20px).
backcolor=0x000000 color de fondo (por defecto es negro).
frontcolor=0x000000 color de los textos y botones (por defecto es blanco).
lightcolor=0x000000 color de los efectos rollover (por defecto, rojo)
autoscroll=true|false permite habilitar la ejecución de scroll automático en una lista de items.
thumbsinplaylist=true|false si usa una lista con imágenes, debe ponerse en true.
autostart=true|false|muted poner en true para que comience a ejecutarse al cargar la página.
repeat=true|false|list poner en true para repetir continuamente.
shuffle=true|false poner en trutrue para ejecutar la lista de manera aleatoria.
volume=valor indica el volumen inicial.
showdigits=true|false muestra u oculta el tiempo.
showeq=true|false muestra u oculta un falso equalizador.
showvolume=true|false muestra u oculta el control de volumen.
showdownload=true|false muestra u oculta un botón que permite descargar el archivo.
showicons=true|false muestra u oculta el ícono de actividad en el centro de la pantalla del reproductor.
logo=url coloca una imagen personal en la esquina superior derecha (se aceptan todos los formatos pero los PNG transparentes son los que mejor se aprecian).

Hay más parámetros disponibles, ver la lista completa en:
http://www.jeroenwijering.com/extras/readme.html.

Este es el ejemplo más simple, cargando un archivo FLV de blip.tv:


&logo=URL_imagen.png &overstretch=fit &showdownload=true &showicons=false &backcolor=0x000000&frontcolor=0x000000&lightcolor=0x000000

En este caso, sólo hay que tener en cuenta dos cosas, el archivo a ejecutar debe ser el archivo XML que contiene la lista. Por lo tanto: file=URL_archivo.XML&parametros Al usar listas, debemos definir la altura de esta y la del reproductor. La altura total está definida por el atributo height de la etiqueta OBJECT y la altura del área donde se va a ver el video se debe definir agregando el parámetro displayheight=alto. La lista tendrá la altura que resulte como diferencia entre ambos valores.

57 comentarios:

CaTa  

No aprendí NADA de manipulación de videos Youtube, pero gocé cada cosa que puso en ellos, desde el que escribe , pasando por los peluches, y la maravillosa Mafalda!!. Me queda la esperanza de aprender lo otro....

Responder
JMiur  

Reconozco que parece un poco (bastante) engorroso pero no lo es tanto. La técnica, si eliminamos toda la palabrería es muy sencilla.

En realidad, tal vez sea un tema que sólo me interese a mi pero ¡qué le vamos a hacer! :D

Juro que este fue el último. Seguiré con el audio y verás que son similares y se entiende mucho más fácilmente ... creo :D

Responder
CaTa  

Noooo diga esoo, lo que ud enseña es genial, ud no tiene la culpa de tener alumnas poco aventajadas!! jeje..pero, pero, prometo que aprenderé. Me gustó mucho el último.
Espero eso de la música...

Responder
JMiur  

Me haces sonrojar, Cata :D

Responder
CaTa  

Tengo una duda: es Bono o Cobain?

Responder
JMiur  

OOps, tienes razón, es Nirvana y Come as you are.

Eso me pasa por usar un archivo para probar y colocar otro en la red :D

Responder
Fede  

Jojojojojo, yo de esto ni idea :D En vez de volverme loco manipulando los videos, prefiero seguir usando el de YouTube :D

Los videos son geniales. El de Mafalda es tremendo, aunque.. las voces no me convencieron, seguramente porque nunca me imaginé cómo podía ser la voz de Mafalda cuando la leía :D

Y me hiciste acordar, tengo que comprar la discografía completa de Nirvana :D Me encanta Come as you are y Smells Like Teen Spirit :D

Salutes, cheeee!!

Duda: Esto no acepta la etiqueta strike o del ?? "Su HTML no es aceptable: Tag is not allowed: del" :S

Responder
JMiur  

Es verdad, Fede, la voz de Mafalda es decepcionante. Hace mucho la intentaron pasar por televisión y fue un fracaso :D

¿Comprar discos? ¿qué es eso? ;)

No, no acepta la etiqueta strike o S, ni muchas otras. En realidad, acepta muy pocas.

Responder
Fede  

Me imaginé :D

En serio intentaron pasarlaa? Que caraduras, con esas voces :P

Y tenes que poner algun tema de AC/DC, che! Back in Black, Sink The Pink, The Jack, Thunderstruck, The Razors Edge, Hard as a Rock, Bad Boy Boogie, Hells Bells, You Shook Me All Night Long, Problem Child, entre otros 207 temas para elegir :D

Saludos, che! :D

Responder
JMiur  

Si, lo pasaron por tele, pero no recuerdo en que año fue :D

Los temas ... para las demostraciones uso siempre los mismos porque no es fácil alojar MP3s en internet y tener links directos al archivo. Se aceptan sugerencias sobre servidores que lo permitan :D

Responder
Cholitzu  

Hola, bueno, si por ejemplo tengo un blog de wordpress y un servidor ftp, en dos archivos que deben ir en el servidor, en que parte lo pongo?
gracias, muy buena tu web

saludos

Responder
JMiur  

En WordPress puedes ponerlo en cualquier parte, lo normal, sería dentro de la carpeta /wp-content/

Personalmente, allí cree una carpeta /wp-content/SWF/ y coloqué los archivos ahí.

Después los utilizas con la URL completa:
http://nombre.com/wp-content/swf/elArchivo
o bien:
/wp-content/swf/elArchivo

Responder
Anónimo  

¿Como puedo descargar el mp3 del JW Mp3 que aparesca en alguna pagina?

Responder
JMiur  

EL reproductor JW es un reproductor personal y, por lo tanto, no hay servicios que puedan ayudarte a hacer eso aunque hay algún software que permite "grabar" audio o video de tipo stream.

Lo único posible es leer el código fuente y determinar el path del archivo. Dependiendo de la página, podrá ser descargado o no.

Responder
Daniel  

Por mas que intento colocar el reproductor en mi blog no encuentro manera. Me harias un gran favor si me pudieras explicar o facilitar un enlace en español para poder hacerlo. Muchas gracias.

Responder
JMiur  

Para ayudarte, necesitaría más explicaciones, ver el código que está colocando o verlo insertado en tu página aunque no funcione.

También podrías copiar y pegar la parte del código fuente de este mismo post para probar un reproductor cualquiera y luego, ir cambiando los datos.

Responder
Anónimo  

hola una pena q en ves que comenten el codigo se pongan a comentar los videos del ejemplo pero bueno,intente por todos los medios que funcione pero lamentablemente no he podido, seria bueno q en el codigo que pones especifiques donde se tiene que reemplazar por ejemplo el URL_mediaplayer.swf del object y si se puede reproducir directamente archivis flv q tengo en mi servidor

Responder
Anónimo  

soy el del comentario 17 jejeje me olvidaba trato de hacer el jwmedia player q tiene el archivo xml dime bien como se tiene q en lazar ya q yo eh puesto asi: value="playlist.xml="

Responder
Anónimo  

jejej soy el mismo del comentario17 en la pagina html donde el puesto el media player aparece el reproductor y la flecha de inicio pero no enlaza carga y carga pero no aparece nada pero si le doy en el boton adelantar aparece el primer flv que puse en la lista y si doy otra ves en el boton de adelantar aparece el segundo flv de la lista pero no pasa eso con el boton play ojo pero no me aprece la lista de videos eso es lo mas curioso aun eso no me aparece la lista, y otra cosa mas es q el boton de ver pantalla completa no se activa como lo puedo activar?? y como puedo enlazar de una vez la lista al reproductor

Responder
JMiur  

¿donde se tiene que reemplazar el URL_mediaplayer.swf del object?

URL_mediaplayer.swf es la dirección URL donde se encuentra el reproductor. LA dirección es un valor absoluto así que comienza con http://

¿se puede reproducir directamente archivis flv q tengo en mi servidor?
si

yo eh puesto asi: value="playlist.xml="

<object id="movie" data="URL_JWmediaplayer.swf" ...............>
<param name="movie" value="URL_JWmediaplayer.swf" />
<param name="flashvars" value="file=URL_playlist.xml&xxxxxxxxxx" ......... />
</object>

Se hace muy difícil adivinar así que insisto en lo mismo: ¿dónde está colocado? ¿dónde se puede ver? Copia el código fuente del último reproductor y analízalo, sólo son cuatro líneas.

Responder
Anónimo  

hola gracias por la respuesta pero ya lo habia solucionado y funciona muy bien traduje el el manual de la misma pagina de jwmedia player ahora investigo como puedo hacer para que no se quede e reproductor a oscuras y la flecha en blanco al centro sino q quede la imagen del video ya sea el ultimo reproducido o el primero en la lista asi como tambien como poner en pantalla completa gracias por la respuesta de todas formas

Responder
Anónimo  

bueno eh notado un error en mi pagina web es que cuando pongo el mouse perdon el puntero sobre los botones del jw media player estos parpadean entre la flechita y la manito es decir varian y eh notado q en tus ejemplos siempre estan como una manito como deberia ser. abra solucion para eso?

Responder
Adrian  

Hola a todos.

A ver si alguien me puede ayudar.
Tengo puesto en la web el reproductor JW FLV Player con uan lista de reproducción que creo llamando a una base de datos SQL.
Hasta ahí todo perfecto, en mi pc puedo visualizar la lista y todos los vídeos.
El problema ocurre cuando intento ver mi página en otros pc's. En éstos, se queda el espacio donde debería aparecer el reproductor completamente en blanco con una ruedecita en medio dando vueltas como intentando cargarlo, y de ahí ya no pasa.

Alguien sabe por qué puede ocurrir esto?
Al archivo XML de la lista ya le he dado todos los permisos para que pueda ser accesible por todos los usuarios.

Gracias

Responder
JMiur  

Lo que no podemos ver es la URL de tu blog o done tengas alojado el reproductor.

Responder
Anónimo  

Por favor necesito ayuda, tambien me ocurre lo mismo, solo aparece la ruedita cargando, por favor ayuda al mail gervic@vtr.net

Responder
JMiur  

Enviame un mail con la URL o colócala en un comentario.

Responder
Geycer  

Hola Jmiur, estuve viendo el player que proporcionas y esta genial, algunos tienen el "JW FLV Player" como player pero no funciona bien cuando cambias el XML de alli que algunos tienen ese error de la ruidita dando vueltas, yo lo he recontra probado, pero el otro player que proporcionas anda súper bien, sólo que no funciona para verlo en pantalla grande ni el boton para descargar, probá y me darás la razón.

Felicidades por tu blog, buen trabajo, muy dedicado.

www.dcristo.net

Responder
JMiur  

Sí, así es, lo que no recuerdo es si eso requiere algún otro tipo e parámetros o si simplemente es un error del mismo reproductor. Tal vez, en la página del autor haya alguna respuesta.

Responder
Geycer  

Hola de new JMiur, he estado probando bien cada player y funciona bien, sólo es importante el orden tmb, para que funcione bien el poder verlo en tamaño completo hay que aislar ese parámetro

Esta es la forma en que yo lo utilizo y funciona para los dos players

-----------------

flashvars="file=jaciv.xml&
displayheight=370&
logo=logo.png&
frontcolor=0x000000&
backcolor=0x0066FF&
lightcolor=0x0000FF&
autostart=true&
bufferlength=8&
volume=100"

allowfullscreen="true">

---------------
Como ves, la comilla se cierra al final del 100, y luego no necesitas ya el "&" para el parámetro de pantalla completa.

Puedes ver mis ejemplos en mi web

http://www.dcristo.org/videos/videos.html

Saludos

Responder
JMiur  

Perfecto, buena aclaración y buen truco, no usas un parámetro del reproductor si no del mismo plugin de Flash, es una excelente solución.

Por si alguien utiliza otro modelo de código, ese atributo pude colocarse en una etiqueta PARAM:

<param name="allowFullScreen" value="true" />

Responder
Anónimo  

HOLA, ME INTERESA MONTAR ESE REPRODUCTOR DE VIDEOS EN UN BLOG QUE TENGO EN BLOGGER, PERO NO SOY MUY EXPERTO EN ESTO. sI PUDIERAS AYUDARME.

TENGO VIDEOS EN FLV EN MI PC. SERA QUE TENGO QUE MONTARLOS EN ALGUN SERVIDOR PARA Q ESTE REPRODUCTOR LOS PUEDA MOSTRAR? SI ES ASI DONDE PODRE MONTAR LOS VIDEOS?

GRACIAS

UNSINFULLPZO@YAHOO.ES

Responder
JMiur  

Sí, debes poner lo videos FLV en algún servidor. Algunas alternativas:

Fileden
ImageShack
HostFile

Responder
Javier  

Hola, la verdad, no me sale, se puede usar para ver videos de youtube? por ejemplo: http://www.youtube.com/v/6uA9-7pTi14&autoplay=1&rel=1

con esta sintaxis? gracias

Responder
JMiur  

No, los videos de YouTube y otros servicios similares sólo pueden mostrarse en los reproductores provistos por ellos. Para utilizar un reproductor independiente es necesario descargar el video en la PC y luego alojarlo en un servidor propio.

Responder
Adrian  

Hola, buenas a todos.

Estoy intentando hacer que se reproduzca una lista de reproducción y que cuando acabe con ésta, se ponga a reproducir otra. Pero por ahora no consigo nada.

Hay una funcion en javascript que controla los eventos del reproductor, con la que puedo controlar la finalización de la lista:


function getUpdate(typ,pr1,pr2,swf)


pero creo que es ésta la que me está fallando. A ver si hay alguien por ahí que ha conseguido hacer esto o sepa como.

Gracias

Responder
Neolo  

buenas, me parece un tema muy interesante, hice algunas pruebas, y me funciona bastante bien para mostrar un video, pero no consigo hacer lo de la lista de reproduccion, quiero que la cargue de un XML, pero no se que estructura deberia tener

Responder
JMiur  

En el post anterior hay un modelo del XML. Fijate ACÁ.

Responder
Neolo  

Muchas gracias, y perdon, pero no lo habia visto :P, es exactamente lo que necesitaba.

Responder
geycer  

Hola amigos, tienen alguna forma de linkear desde youtube?, puesto que ahora el link que te da está condicionado a tu Ip y si tienes IP dinámica no podrás verlo de nuevo.

Responder
JMiur  

YouTube cambia constantemente así que ese bastante difícil de establecer una regla universal.

Responder
mar  

...sólo necesitamos dos, swfobject.js y mediaplayer.swf que deben ser alojados en cualquier servidor...
mi pregunta es:donde los alojo?como imagen?url?video?perdona mi ignoracia,me puedes recomendar algun servidor.gracias

Responder
JMiur  

Mar: lo más sencillo es usar Google Pages. Fíijate en este post, allí está explicado cómo hacerlo.

Responder
Anónimo  

En este momento no puedo ver los ejemplos cob .FLV, es un error en la pag o soy yo que tengo este endiablado windows vista?
Marcelo

Responder
JMiur  

Aquí, el problema es el mismo YouTube que ha cambiado la forma de acceder a sus archivos, muchos otros modelos similares a este tienen el mismo inconveniente.

Así que separo las cosas. por un lado, el reproductor no tiene mayores problemas, funcionará bien; el tema fundamental pasa a ser, entonces el archivo a reproducir.

Si te fijas, por ejemplo, las imágenes o el SWF se ven perfectamente ya que las subi y alojé yo mismo en otro sitio y por lo tanto, accedo a ellos.

Después de ver como YouTube suele cambiar los servidores de manera regular, yo diría que lo razonable es alojar esos archivo uno mismo en algún sitio, descargarlos y subirlos porque sino, siempre estaremos a merced de de esos cambios.

Responder
Jony  

Hola jmiur, tengo un problema con el reproductor... aquí te dejo un enlace a una imagen que es el código que posteo

http://i28.tinypic.com/15yyet5.jpg

Y aquí te dejo un enlace al blog que lo estoy intentando...

http://lvppruebas.blogspot.com

Muchas gracias ;)

Responder
Anónimo  

Hola, no consigo que funcione, lo tengo en una pagina de pruebas pero me aparece el loading bar y la lista debajo pero no el video, si q esta p q si le das al play se escucha el sonido y si le das a pantalla completa se ve, ayudame porfavor.
http://www.elchevirtual.com/videotest.html
http://www.elchevirtual.com/playlist.xml

Responder
JMiur  

Jony:
Usas MediaFire para alojarlo, ese es el problema, el enlace no apunta al video sino a una página web.

En: http://www.elchevirtual.com/videotest.html lo veo perfectamente, sonido, video y pantalla completa. Lo que dice en Title22 es que el video flv no existe.

Responder
Anónimo  

donde va el codigo dentro de que estiqutas

Responder
minkAYuko  

¡muchas gracias por el pequeñot tutorial! mmh no había entendido como poner los parámetros pero ya quedó listo.

Por cierto, la función "pantalla completa" no funciona en firefox3, por lo menos no la que bajé del sitio y de los videos que tienes en esta entrada, visité el sitio y eso comentan, ¿tu tienes alguna solución?

¡saludos!

Responder
JMiur  

Sí, aprentemente no lo hace. Habrá que esperar que actualicen el reproductor.

Responder
Erik Silva  

eemmmm. Muchas Muchas Gracias por tantas cosas tan bonitas que nos explicas. Tengo una dudita ojala y porfas porfas que me la respondas.
Hablando del reproductor e JW Media Player (usandolo para flv`s) y del reproductor de mp3 de 1 pixel out. Si en el mismo blog, quiero insertar varios videos o mp3 en diferentes entradas ¿necesito insertar el script en el head tantas veces como videos o mp3 quiera reproducir en el blog? o ¿puedo utilizar el script ya insertado que utilice en el mp3 o flv a reproducir inicial?
El tutorial para alojar todos los swf .js .mp3 y .flv me parecio maravilloso. muchas gracias.

Responder
JMiur  

Erik:

Si no me equivoco, el script sólo es necesario insertarlo una vez así que colocándolo en el header siempre estaría disponible.

En los posts, deberías colocar los reproductores y nada más.

Responder
abraham1234567890  

quiero que este video de youtube: http://es.youtube.com/watch?v=kK-jp4lPINE&feature=related pueda tenerlo igual q como lo tienen en la pag de aca me lo pueden poner please :D

Responder
JMiur  

Desde hace tiempo, la forma en que YouTube guarda los videos ha cambaido y por lo tanto, no hay otro método que descarlarlos y alojarlos uno mismo en algún servidor.

Responder
abraham1234567890  

se puede descargar los videos con atube ¿no?

Responder
Anónimo  

Hola como se puede modificar el alto de cada tema que hay en la lista de reproduccion a mi me aparecen muy altos

Responder
Agustín  

Hola JMiur. Bueno, lo primero enhorabuena por el peazo de blog y todas esas cosas que se dice. Es la primera vez que escribo, pero llevo tiempo leyéndote, y la verdad es que he aprendido un montón, así que lo primero...muchas gracias por compartir la sabiduría :-D

Y ahora la pregunta: ¿conoces algún reproductor así similar a los que enseñas por aquí pero que admita formatos como avi, mpeg o similares, aparte del de divx claro?? Aunque también serviría si hubiese forma fácil de utilizar el de divx, pero he estado dándole una vuelta al código que hay que meter pero no encuentro por ningún lado la dirección dónde está el reproductor en sí para poder enlazarlo o descargarlo...

Responder
 
CERRAR