Yahoo! WebPlayer Beta: Audio y video

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.

un archivo MP3

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>

Earth 100 million years from now

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>

Nowhere Man Live

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:

Nowhere Man Film