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:
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:
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¶metros 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:
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....
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
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...
Me haces sonrojar, Cata :D
Tengo una duda: es Bono o Cobain?
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
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
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.
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
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
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
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
¿Como puedo descargar el mp3 del JW Mp3 que aparesca en alguna pagina?
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.
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.
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.
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
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="
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
¿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.
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
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?
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
Lo que no podemos ver es la URL de tu blog o done tengas alojado el reproductor.
Por favor necesito ayuda, tambien me ocurre lo mismo, solo aparece la ruedita cargando, por favor ayuda al mail gervic@vtr.net
Enviame un mail con la URL o colócala en un comentario.
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
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.
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
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" />
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
Sí, debes poner lo videos FLV en algún servidor. Algunas alternativas:
Fileden
ImageShack
HostFile
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
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.
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
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
En el post anterior hay un modelo del XML. Fijate ACÁ.
Muchas gracias, y perdon, pero no lo habia visto :P, es exactamente lo que necesitaba.
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.
YouTube cambia constantemente así que ese bastante difícil de establecer una regla universal.
...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
Mar: lo más sencillo es usar Google Pages. Fíijate en este post, allí está explicado cómo hacerlo.
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
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.
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 ;)
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
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.
donde va el codigo dentro de que estiqutas
¡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!
Sí, aprentemente no lo hace. Habrá que esperar que actualicen el reproductor.
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.
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.
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
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.
se puede descargar los videos con atube ¿no?
Hola como se puede modificar el alto de cada tema que hay en la lista de reproduccion a mi me aparecen muy altos
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...
No es que el formulario tenga problemas sino que los comentarios están cerrados.