tubePlayer: Nueva versión del reproductor

Como este es un reproductor que me gusta mucho y ha salido una actualización, vuelvo a comentarlo.

tubePlayer es un reproductor de vídeos de Youtube independiente, creado por unijimpe, muy liviano y sencillo de utilizar.

La nueva versión incluye opciones de autoplay, volumen por defecto, posibilidad de desplazarse a cualquier parte del video, previsualización de la imagen, mensajes de error cuando el video esta bloqueado o ha sido eliminado, pantalla completa y además, elimina la publicidad y las anotaciones que son tan molestas.

Descargamos el ZIP desde la página del autor y al descomprimirlo, nos encontraremos con un demo y el archivo newtubeplayer.swf que es el único que necesitamos alojar en algún servidor: Google Sites, Filede DropBox o cualquier otro que nos guste.

De aquí en más, tenemos varias opciones para utilizarlo. La más simple es agregarlo como cualquier otro archivo SWF; allí donde queremos ver el video, ponemos las etiquetas correspondientes:

<object width="510" height="320" type="application/x-shockwave-flash" data="URL_tubeplayer.swf">
  <param name="movie" value="URL_tubeplayer.swf" />
  <param name="FlashVars" value="videoId=XXXXXXXXXXX" />
  <param name="allowFullscreen" value="true" />
</object>

donde:

• en width y height colocamos el tamaño deseado
• reemplazamos URL_tubeplayer.swf por la URL del archivo que hayamos alojado
• y colocamos en XXXXXXXXXXX el ID del video a reproducir

Para quien nunca lo haya hecho, el ID de un video de YouTube es ese conjunto de once caracteres que se muestra tanto en la página del video como en los códigos que nos dan para insertarlos; por ejemplo:

http://www.youtube.com/watch?v=NdkzQ5_Sv_8
http://www.youtube.com/watch?v=wb4RauhteFA&feature=list_related&playnext=1
http://www.youtube.com/v/NdkzQ5_Sv_8?fs=1&hl=es_ES&rel=0

Si queremos agregarle alguna opción extra, colocamos los parámetros uno al lado del otro, separándolos con el caracter &:

<param name="FlashVars" value="videoId=NdkzQ5_Sv_8&autoPlay=true&volume=100" />

Si tenemos instalada la librería SWFObject, podríamos incluir el reproductor con JavaScript:

<div id="divmovie">tubePlayer</div>
<script type="text/javascript">
  swfobject.embedSWF("URL_tubeplayer.swf", "divmovie", "510", "320", "9", "",
  {videoId: "XXXXXXXXXXX"}, {allowFullscreen: "true"});
</script>

Eso no es muy práctico ya que habría que escribirlo en cada video que quisiéramos mostrar pero podemos mejorarlo, creando una función que colocaríamos antes de </head>;

<script type='text/javascript'>
//<![CDATA[
function videoyoutube(id) {
  document.write ("<div id='" + id +"'>tubePlayer</div>");
  swfobject.embedSWF("URL_tubeplayer.swf", id, "510", "320", "9", "", {videoId: id,volume:"100"}, {allowFullscreen: "true",menu: "false",quality: "high",wmode: "transparent"});
}
//]]>
</script>

y la llamamos, colocando esto donde vamos a mostrar el video, por ejemplo, en un post:

<script> videoyoutube("XXXXXXXXXXX") </script>

Si no tenemos la librería instalada, no importa; algo similar puede hacerse sin ella:

<script type='text/javascript'>
//<![CDATA[
function videoyoutube(id) {
  document.write ("<div id='" + id +"'>  tubePlayer </div>");
  var salida = "<object type='application/x-shockwave-flash' height='320' width='510'";
  salida += "data='URL_tubeplayer.swf'>";
  salida += "<param name='movie' value='URL_tubeplayer.swf'>";
  salida += "<param name='FlashVars' value='videoId=" + id + "' />";
  salida += "<param name='allowFullscreen' value='true' />";
  salida += "</object>";
  document.write (salida);
}
//]]>
</script>

REFERENCIAS:unijimpe.net