JMiur [E]

Hace tiempo, mostraba la forma de usar Yahoo Media Player que no era otra cosa que un reproductor de audio con características interesantes ya que bastaba agregar un script y usar enlaces comunes y corrientes a los archivos de audio para que este los detectara.

Aúnque el viejo modelo sigue funcionando perfectamente, durante este año, Yahoo nos permite utilizar un nuevo reproductor llamado Yahoo! WebPlayer que amplia las posibilidades del anterior ya que ahora incluye la posibilidad de reproducir videos de servicios como YouTube.

Agregarlo a un sitio web es sencillo, basta copiar y pegar el script en nuestra plantilla y ellos recomiendan que se haga justo al final, justo antes de </body&dy>
<script type="text/javascript" src="http://webplayer.yahooapis.com/player-beta.js"></script>
Por defecto, el tema o diseño gráfico tiene tonos oscuros, si se quieren usar tonos claros, hay que agregar un dato extra:
<script type="text/javascript">var YWPParams = { theme: "silver" };</script>
<script type="text/javascript" src="http://webplayer.yahooapis.com/player-beta.js"></script>
Eso es todo, ahora podemos usarlo en cualquier parte ya que, de modo automático, detectará los enlaces donde haya contenido multimedia así que si se pone esto:
<a href="URL_archivo.mp3">un archivo MP3</a>
veremos el enlace con un botón de ejecución y pausa a su izquierda y además, una pestaña que se adosará a nuestra página y que, al desplegarse, nos permite seleccionar entre todos los archivos reconocidos ya que el script genera una lista de reproducción con todos ellos.


Lo mismo ocurrirá con un video de YouTube o de Yahoo:
<a href="http://www.youtube.com/watch?v=uGcDed4xVD4">Earth 100 million years from now</a>
<a href="http://movies.yahoo.com/movie/1810190842/info">Ip Man 2</a>


Agregando parámetros, podemos configurar detalles que cambien los valores por defecto:

autoplay:true reproduce el archivo al cargarse la página
autoadvance:false no reproduce el siguiente archivo de modo automático
displaystate:1 muestra la pestaña desplegada
volume:valor entre 0.0 y 1.0 establece el volumen inicial que por defecto es 0.5
defaultalbumart:'URL_imagen' muestra una miniatura personalizada del video recomiendan imágenes de 205x205 pixeles)

Todas ellas se agregan del msimo modo que el tema; por ejemplo:
<script type="text/javascript">
    var YWPParams = {
        heme: 'silver',
        autoplay:true,
        volume:1
    };
</script>
Otras opciones pueden ser añadididas directamente como atributos en la etiqueta del enlace:

type="audio/mpeg" define el tipo de archivo multimedia
tabindex="2 establece el orden enque se verán en la lista de reproducción
title="el título de algo" muestra un título personal

Si tenemos varios archivos en la página, podemos hacer que en la lista de reproducción se sólo se muestren alguno de ellos agregandoles class="htrack"
<a href="URL_1" class="htrack">esta se verá</a>
<a href="URL_2">esta NO se verá</a>
<a href="URL_3" class="htrack">esta se verá</a>
Agregando class="noplay" evitamos que ese enlace se agregue a la lista de reproducción:
<a href="URL_4" class="noplay">esta NO se verá</a>
Si queremos que cierto enlace se muestre con una miniatura especial, agregamos una etiqueta IMG y la ocultamos:
<a href="URL_archivo"><img src="URL_imagen" style="display:none" />my song</a>


Aunque, sabiendo que el script genera una etiqueta SPAN para cada enlace y que esa etiqueta tiene una clase llamada ywp-page-play-pause:
<span class="ywp-page-play-pause ywp-link-hover">
  <em class="ywp-btn-page-play ywp-page-btn"></em>
  <a href="http://www.youtube.com/watch?v=AvLj72apGLI">Nowhere Man Film</a>
</span>
nada impide jugar un poco y hacer exactamente lo contrario, mostrar la miniatura y ocultar el texto:


13 comentarios:

Felipe  

Que reproductor tan coqueto, además que el tono oscuro luce -en mi opinión- tremendamente bien, además me gusta eso que detecta los archivos de la página y los muestra en lista de reproducción.

En pocas ocasiones empleo audios en mis entradas, pero seguro que si llega el día verás a este pequeño allá. :)

Responder
JMiur  

Sí, es lindo y fácil de usar :D

Responder
Iván  

JMiur necesito tu ayuda nuevamente para mi blog, comento en esta entrada ya que es una actualizada y no encontré un tutorial tuyo para lo que ando buscando. Quiero una pre-entrada a mi pagina de blogger que diga entrar al sitio y aparezca un video, se puede?. Probablemente pienso que no, por eso te hago otra consulta por si no se puede la otra, como hago para crear una ventana que se pueda cerrar solo en la pagina principal donde salga como un cartel o una publicidad mostrando un video y una imagen?. Gracias por todo, sos mi blog de ayuda y por eso te la pido a ti n.n
Un saludo, Ivan.

Responder
XIC nou barris  

hola jmiur, hice la entrada con la música y la url desde sites pero me da error, me ha encantado esta entrada, reconoce los videos y la música?? o hay que hacer una entrada para cada cosa.... espero me puedas ayudar. muchas gracias

Responder
Fherguzon Fletcher  

Oye que reproductor tan como dicen en mi pueblo tan "chido"

Responder
JMiur  

Ivan:
Hay varias formas de hacer algo así; una de ellas es la explicada en esta entrada.

XIC nou barris:
Los dos archivos MP3 que veo en tu home parecen funcionar normalmente.
Los videos, por ahora están limitados a YouTube y el mismo Yahoo.

Responder
XIC nou barris  

buenos dias jmiur, cuando le doy a la imagren de la izquierda para que se me abra y darle al mp3,,,,, no funciona, sale un triángulo rojo y me dice que hay un error.... siento volver con el mismo problema.
núria

Responder
XIC nou barris  

otra vez por aquí jmiur, solucioné el problema con los mp3, era la url de la música, desde google sites no me iba y lo subí a fileden y listo.
gracias por todo
núria

Responder
XIC nou barris  

hola jmiur, me duró poco mi alegria.... lo veo a través de mozilla pero en IE no me aparece, sabes porque me pasa esto???? me puedes ayudar ????
muchas gracias

Responder
JMiur  

Tampcoo veo problemas en IE8.

Responder
L  

hola JMiur
no sabes q pasa con el yahooPlayer
en mi blog no me salia y me di una
vuelta a tu post y nada....

Responder
JMiur  

No, no sabría decirte el motivo; acá lo veo funcionando. Tarda un poco pero ahí está.

Responder
L  

tienes razon ahora revise ya volvio ...jajaja
me asuste o_O

Responder
 
CERRAR