JMiur [E]

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

18 comentarios:

Anónimo  

Hola, como va? Me encanta tu blog. Te queria hacer una pregunta, yo tengo un blog y me gustaria saber que tengo que hacer para que cuando pongo el cursor encima de una imagen del post, no pueda hacer click en ella. Quiero decir que no pueda "entrar" en la imagen, como por ejemplo las de tu blog. No se si me he explicado. Te agredeceria que me explicaras como, ya que lo he estado buscando por internet y todavia no se como. Saludos.

Responder
JMiur  

Cuando creas cada entrada, debes editar el post en modo HTML y quitar el el enlace que Blogger agrega de manera automática. Dependiendo del editor que uses, ese código varía. Fíjate en esta entrada.

Responder
Unknown  

Lo que es tener una Luna propia! ;)

Responder
Andres  

Excelente alternativa de reproductor me pregunto si habrá una forma de bloque el acceso a Youtube cuando haces clic en el logo o pantalla y bloquear el acceso como los vídeos publicados en taringa.

Responder
Andres  

JMiur como Colocar una Imagen de previsualización en el vídeo.Gracias!

Responder
Pablo  

Buen reproductor, solo molesta un poco el logo de youtube durante la reproducción. Un saludo JMiur

Responder
admin  

Sr Jmiur
me gustaría saber como hacer un sticky post, es decir un post que se muestre siempre, en primer plano cada vez que abrimos nuestra pagina prinicpal en nuestro blog de blogger

gracias por la respuesta

Responder
JMiur  

Graciela:
Nada mejor que eso :D

Andres:
No sé a que video te refieres ya que en todo reproductor de YouTube siempre habrá un enlace al sitio original.
No tiene opción para seleccionar la imagen, utiliza la que ya está definida. Otros detalles de personalizacion pueden ser agregados si se usan los reproductores pagos que ellos venden.

Pablo:
El logo es parte del API de YouTube; puede quitarse o ponerse uno personal pero ... pagando.

luthier:
La forma más sencilla es crear la entrada, publicar y luego, cmabairle la fecha para que tenga un fecha muy adelante en el tiempo.
Otra forma es agregar un elemento HTML y poner ese post fijo allí.

Responder
admin  

muchas gracias jmiur!!!!!
lo pondre en práctica

Responder
Anónimo  

hola JMiur ...
Tengo un problema con los videos de youtube.. en mi blog tipo Showcase tengo para mostrar 15 entradas pero si pongo una de esas 15 entradas con un video de youtube incrustado ya se dejan de mostrar 15 entradas en la portada y solo aparecen 14 .... si pongo video en 2 de las 15 entradas solo aparecen 13 entradas y asi... sabes a que se debe? el blo es http://animetopsubs.blogspot.com

Responder
JMiur  

Puede ser que se deba a limitación que hace Blogegr en cuanto al tamaño máximo que puede tener una página, sin importa qué hayamos establecido en la Configuración.

Responder
Anónimo  

mmmm hay alguna forma automatica para que blogger muestre el video en algun popup o lightbox solo poniendo el link del video en el post sin incrustarlo?

Responder
Anónimo  

JMiur disculpa por desviar el tema pero queria saber si conoces algun software o pagina que me permita hacer plantillas para post y editarla mediante formulario, ya que en la mayoria de mis post el formato se repite y no me gusta anda buscando en el html para usar la misma plantilla del post anterior

Por eso busco algun programa que me permita poner todo en un formulario que al rellenarlo se vaya creando el html para blogger

Por ejemplo
- Pon aqui la url de la imagen de portada
- Aqui la sinopsis
- Aqui las capturas
- Aqui el link de descarga 1
- Aqui el link de descarga 2
- Aqui el link de descarga 3
- Aqui el link de descarga ..... etc
no se si me doy a entender

Responder
JMiur  

¿hay alguna forma automatica para que blogger muestre el video en algun popup o lightbox solo poniendo el link del video en el post sin incrustarlo? NO. Ni en Blogger ni en ninguna parte; cualquier cosa que quieras que haga un sitio, se debe hacer manualmente o en este caso, usando JavaScript.

No, no conzoco ningún sof que haga eso. Llegado el caso, puedes crear ese formulario en tu PC.

Responder
Anónimo  

JMiur, te iba a preguntar ¿Por que dejo de funcionar el TubePlayer en mi Blog? pero al parecer a ti tampoco te funciona, ¿esto ha que se debe? ¿tiene solución?

Saludos!

JMiur  

Lo veo funcionar perfectamente.

Revista Pixel Mx  

JMiur me eh dado cuenta que solo en Chrome no se reproduce solo sale el cuadro negro.

JMiur  

En ese caso n osabría darte una respuesta. Como se trata de un archivo de Flash, debería funcionar en cualquier navegador.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR