En esta ocasión les presento un reproductor de vídeos de Youtube completamente personalizado llamado tubePlayer el cual fue escrito en ActionScript 2.0. Este reproductor no necesita de ningún script adicional y puede reproducir cualquier vídeo de Youtube.
Para la implementación de este vídeo player se utilizó el API del player de Youtube, el cual brinda métodos y propiedades que pueden ser controladas en AS2, para mayor información pueden leer YouTube ActionScript 2.0 Player API Reference.
Características
Entre las cualidades que podemos destacar en este reproductor podemos mencionar:
- Reproduce cualquier vídeo de Youtube.
- El reproductor es ligero y solo ocupa 7.14 Kb.
- No necesita scripts adicionales para funcionar.
- El reproductor de adapta al tamaño que lo definamos.
- Soporte para visualizar el vídeo en FullScreen.
- Controles de volumen, play, pause y stop.
- Se puede configurar la reproducción automática.
- Optimizado para consumir poca memoria.
- Diseño limpio basado en ToobPlayer.
Como utilizar tubePlayer
Primero descargamos el reproductor en tubeplayer.zip, extraemos los archivos y subimos el archivo tubePlayer.swf a nuestro servidor. Luego de ello hay dos parámetros que debemos indicarle al reproductor: videoId que es el identificador del vídeo a reproducir y autoPlay para definir si deseamos que se reproduzca automaticamente el video.
Si utilizamos solamente código html para incluir el reproductor, tendríamos que hacerlo de la siguiente manera:
<object width="501" height="310"> <param name="movie" value="tubeplayer.swf" /> <param name="FlashVars" value="videoId=6hzrDeceEKc&autoPlay=true" /> <param name="allowFullscreen" value="true" /> <embed src="tubeplayer.swf" width="501" height="310" FlashVars="videoId=6hzrDeceEKc&autoPlay=true" allowFullscreen="true" /> </object>
Si tu utilizas SWFObject en versiones anteriores a la 2.0, el código necesario sería de la forma:
<div id="divmovie">tubePlayer</div>
<script type="text/javascript">
var so = new SWFObject("tubeplayer.swf", "myswf", "501", "320", "8", "");
so.addParam("allowFullscreen", "true");
so.addVariable("videoId", "6hzrDeceEKc");
so.addVariable("autoPlay", "true");
so.write("divmovie");
</script>
Si por el contrario utilizas SWFObject 2.0 la sintaxis ha cambiado y sería la siguiente:
<div id="divmovie">tubePlayer</div>
<script type="text/javascript">
swfobject.embedSWF("tubeplayer.swf", "divmovie", "501", "320", "9","", {videoId: "6hzrDeceEKc", autoPlay: "true"}, {allowFullscreen: "true"});
</script>
Nótese que en cualquiera de los métodos lo importante es la ruta al archivo tubeplayer.swf y los parámetros videoId y autoPlay.
Nota Adicional
Esta es la primera versión de tubePlayer entonces seguramente existirán algunos puntos que mejorar y corregir, les agradecería mucho me hicieran llegar sus observaciones para trabajar en futuras versiones. Además sería muy bueno comenten de donde obtuvieron el player, es la única forma de mantener este blog.
[download id=»49″ autop=»false»]
Comentarios Total 48 comentarios
Publicado: 29/07/2009 3:55 pm
Se ve muchísimo mejor que el horrible reproductor por defecto de YouTube
Publicado: 29/07/2009 6:30 pm
Muy bueno..
Pero una sola pregunta: ¿Se puede quitar el logo de youtube?
Gracias
Publicado: 29/07/2009 6:46 pm
Ya que estoy utilizando el API de Youtube este no te permite eliminar u ocultar el logo, pero si he logrado tener un reproductor completamente personalizado.
Ahora si quieres un reproductor sin el logo de Youtube, necesitarás un script PHP en el servidor que se encargue de obtener el URL final del vídeo a reproducir. Hay un reproductor que funciona con este método y se llama ToobPlayer (http://emehmedovic.com/xmca/toobplayer/). El problema es que cada cierto tiempo Youtube cambia las URLs de sus vídeos con lo cual deja de funcionar el reproductor hasta que alguien adapte el script a la nueva versión.
Publicado: 29/07/2009 9:16 pm
Gracias unijimpe me parece genial el player… solo un detalle lo estoy probando localmente y tengo problemas con el sonido; es decir no suena, tengo que darle clik en el icono de sonido para que comience a sonar…
se agradece tu esfuerzo y cuando lo suba obviamente le prondre tus creditos como debe de ser….salu2
Publicado: 29/07/2009 9:58 pm
Muy bueno el reproductor, excelente!
Sería bueno que se pudiera, no sé, personalizarlo un poco más; por ejemplo, la imagen de cargando es la misma de YouTube. Pero aún así está fenomenal.
Posiblemente lo utilice en un proyecto que tengo en mente.
Gracias unijimpe =D
Publicado: 31/07/2009 8:29 pm
Muy interesante este reproductor…
Pero no podrias publicar el .FLA
para poderlo editar a nuestro gusto?’
Publicado: 01/08/2009 9:59 pm
es cierto amigo unijimpe, si queremos crear url amigables , hay que modificar el fla.
Publicado: 07/08/2009 10:21 am
espectacular. aparte se ve mejor calidad que el de (http://emehmedovic.com/xmca/toobplayer/). cuando levanta el video, ahora . no levanta la imagen desde youtube si esta en stop no?.
estoy tratando de modificar el original para que levante , el logo y tambien la imagen de yt.. cuando tenga algo mando !. saludos y gracias mostro!
Publicado: 10/08/2009 6:14 pm
Hola unijimpe, veo que al cargar la página, el reproductor no muestra ninguna imagen previa sino que permanece negro hasta darle play. Hay manera de cambiarlo, para que en ese sentido sea como el reproductor habitual???
Gracias..!
Publicado: 11/08/2009 12:44 am
Bueno he detectado algunos problemas que son los siguientes:
1.- No hay Preview de video
2.- Cuando pones más de 1 video en una página solamente carga una de ellas.
3.- No se puede modificar el reproductor.
4.- No se puede eliminar el logo de Youtube (Unijimpe ya dió una explicación para esto).
5.- Podría mostrar código para EMBEBER
lo estoy probando en un post http://www.vagoneta.net/2009/08/11/michael-jackson-en-venezuela-y-hablando-espanol-wtf/
y esta de lujo.
Espero que mis sugerencias se tomen en cuenta a ver si se pueden arreglar esos detalles, no se mucho de programación sino colaboraría con mucho gusto.
Publicado: 11/08/2009 8:00 am
Gracias por las sugerencias, como siempre sus sugerencias me estan dando nuevos puntos de vista para mejorar el reproductor.
1.- Voy a implementar el preview.
2.- Si pones varios videos, deberían verse, seguramente tienes un problema al embeber el video.
3.- Me reservo el derecho de no publicar el FLA por que en varias oportunidades ya los usuarios le cambian de nombre y lo muestran o incluso lo venden como suyos (y hasta me pueden denunciar como plagiario http://blog.unijimpe.net/unijimpe-victima-o-agresor/)
4.- El logo de Youtube debe permanecer, porque estamos utilizando el API que ellos proveen.
5.- Voy a incluir la posibilidad de mostrar el código para embeber.
Nuevamente gracias y espero tengan un poco de paciencia para las nuevas opciones por que anda muy atareado ultimamente.
Publicado: 11/08/2009 5:27 pm
Sos grosso unijimpe, ahora respecto al punto cinco, será precisamente una ‘posibilidad’ no? quiero decir, estará la alternativa de mostrar el código y no la obligatoriedad.
Saludos..!
Publicado: 12/08/2009 10:29 pm
El link para bajar el archivo comprimido no funciona
Saludos
Publicado: 13/08/2009 12:26 pm
MIRROR: http://www.sendspace.com/file/htkuot
No creo que Jim se enoje si le hago un mirror al archivo porque efectivamente el archivo alojado en el host de unijimpe no funciona.
Saludos
Publicado: 13/08/2009 12:36 pm
SUGERENCIAS A LA HORA DE EMBEBER EL CÓDIGO EN BLOGS:
Bueno he estado embebiendo el tubeplayer de Unijimpe en mi blog de todas las formas posibles y encontré un problema al embeber el código, el detalle es que deben de hacer una modificación en el código puesto por Jim para los que tienen blogs, si tienes una página estática entonces no tendrás problemas.
Reemplazar: tubeplayer.swf
Por: «http://hostdondehaspuestoelplayer.net/tubeplayer.swf»
Osea en cualquiera de las formas tienes que reemplazar el nombre del archivo por toda la url donde has puesto el reproductor (completa).
Esto soluciona el problema de que cuando ingresabas al post individual, el reproductor no aparecía por que la url se modificaba.
ALGUNAS SUGERENCIAS PARA UNIJIMPE:
Como todos los seguidores de tu blog uso el WP-SWFObject 2.2 y se de tu habilidad para la programación flash-php asi que te sugiero hacer un plugin para insertar videos de Youtube en un post, se que de estos hay varios plugins ya hechos, pero casi todos muestran el reproductor feo de youtube, sería bacan que existiese un plugin de este mismo tipo pero con un reproductor mas 3.0 o con un diseño mejor espero que cojas mi sugerencia, por mi parte intentare champeando modificando el código de los otros plugins a ver si obtengo resultado.
Saludos
Publicado: 13/08/2009 10:06 pm
Gracias Yunks por el link
Saludos
Publicado: 14/08/2009 7:49 am
Hola, gracias por reportar el error, según parece al hacer la actualización de WordPress dejo de funcionar el sistema de descargas que tenía. He corregido esto y ya esta funcionando todo nuevamente.
Gracias
Publicado: 20/08/2009 12:57 pm
Hola, lo implementé localmente y no me funciona… es extraño… incluso bajé el swfobject en mi pc (sin usar googleapi) y tampoco funciona… no me visualiza el video… alguna idea de que podria ser ?
Publicado: 20/08/2009 1:51 pm
Hola de nuevo… el problema fue solucionado… error mío…
Gracias por este aportazo… ojalá pronto lo actualices para poder tener el preview del video
Publicado: 01/09/2009 6:28 am
Gracias, el reproductor está genial.
Te reporto un posible error, he embebido el vídeo a una anchura de 237px y la barra de progreso no se ha escalado sigue siendo más larga y pasa por debajo del control de sonido y el botón para hacer fullscreen.
Publicado: 02/09/2009 4:22 pm
hola y saludos gracias a ustedes ahora mi web va de maravilla :P jejeje http://www.sktube.ok.pe/v2/ hechenle un ojo ojito :D
Publicado: 02/09/2009 6:31 pm
DakyZoft, efectivamente en tu web haz utilizado tubePlayer para mostrar los videos y tambien utilizas el script para descargar videos que aqui desarrollamos.
El problema es que en ningún lado veo los créditos a este blog y para colmo has decompilado el player y le cambiaste los créditos que allí figuraban (en tu web dice: «Sktube By DakyZoft«). Entonces se supone que tu has desarrollado ese player y lo nombraste Sktube, como se ve que no respetas el trabajo hecho en este blog.
Además de ello obviamente en tu web no hay ningún crédito al script que utilizas para descargar los vídeos. Como mencione al final del post: «Además sería muy bueno comenten de donde obtuvieron el player, es la única forma de mantener este blog» pero parece que a muchos como tu se les olvida.
Publicado: 03/09/2009 9:59 am
bueno no hay creditos puesto que baje el mismo ToobPlayer y lo edite yo mismo en el flash 9 lo de la descarga de videos lo cree basandome en el api de youtube.
1.- el reproductor que puse en mi web reproduce el video que selecciones despues de la busqueda.
2.- La descargas de formato equivalen al mismo api que da youtube eh incluso lo mejore para adecuerlo segun el video que se este reproduciendo.
3.- Solo en SKtube V1 use su php para la descarga de videos disculpen si no puse sus creditos pero estare pendiente de ellos y los pondre sktube v2 esta desarrollado por mi mismo.
Publicado: 03/09/2009 10:09 am
otra cosita note que Yunks usa mi script de busqueda y descarga de videos de youtube aunq claro en una version anterior ya lanzare la version que estoy usando a la red para que puedan actualzar ;) saludos Yunks ojala q el buscador tenga mis creditos aun ? claro esta si esq alguien no lo modifico antes y lo bajaste ya modificado gracias y saludos
Publicado: 03/09/2009 1:15 pm
Dakysoft, no se si me tomas por tonto o a ti te han explicado mal las cosas:
1.- El player que utilizas es tubePlayer, pero como repito tu lo decompilaste, lo modificaste para quitar los créditos y lo volviste a compilar. Obviamente como no tienes las tipografías los textos te han salido movidos. Yo en ningún momento he publicado los archivo FLA de ese player, así que tu me has pirateado de la forma mas vil.
2.- Youtube brinda un API para buscar los vídeos, pero no ofrece ningún API para descargar vídeos. Es por ello que en este blog desarrollamos la forma de descargar los vídeos de Youtube. Asi que no pudiste mejorar nada por que no utilizas el API para descargas por que no existe. En consecuencia también utilizas el «PHP Youtube Downloader 2.2» desarrollado en este blog.
Lo que mas me disgusta de tu actitud es que trates de poner excusas a algo que no tiene excusas. Bastaría con que utilices el player original y poner los créditos que me merezco por el trabajo que hago en este blog.
Publicado: 04/09/2009 10:17 am
Hola unijimpe,bueno no quiero tener discusiones contigo mucho menos que te molestes si querias creditos en mi web sobre tu nombre o tu blog pues ahy los tienes ya los puse no se me hace ponerlo :P ademas tu script me a servido en lo que es descarga mediante ID pero el resto de busqueda visualizacion y descarga no te los puedo acreditar ya que no son tuyos yo encontre tu web por el reproductor de videos y el sistema de busqueda, visualizacion y descarga lo venia modificando mucho antes de conocer tu pagina web.
Publicado: 04/09/2009 4:24 pm
Hola gente veo que la pelea esta reñida.. pero bue…
consulta a unijimpe.. te comento que lo he utilizado en un par de sitios. y miconsulta va en .. si con los creditos que estane el player. osea cuando ahce cclik derecho. es suficiente lo ponemos tambien en el pie del sitio. avisame asi hacemos la correccion!
Por otro la do queria saber si has solucionado que levante la imagen.. y seria buenisimo poderles aplicar skins.. para personalizarlo. se que el JW Flash Video Player lo permite inclusive para mostrar de youtube.
miren como qeuda pintado aca http://www.casomascherano.com.ar
saludos
Esteban
Publicado: 05/09/2009 10:01 am
Hola Esteban, respecto a tubePlayer no hace poner créditos adicionales, pueden utilizarlo tal cual esta. El problema con DakyZoft es que lo modifico y puso sus créditos (lo cual es una gran mentira).
Respecto a la imagen inicial y otros añadidos los estoy trabajando y en los próximos días lo tendrán disponible. Ahora lo que comentas respecto a JW Flash Video Player, este es muy bueno pero tubePlayer quiere diferenciarse por ofrecer poco peso (7kb comparado con los 41kb de JW Flash Video Player), pocas sentencias en el código (Para procesar sólo lo que se necesita) y de esta manera ser más rápido. De todas maneras trataré de sacar el player con varios skins solo me faltaría obtener los diseños de los skins para implementarlos.
Publicado: 07/09/2009 2:20 pm
Barbaro! unijimpe, entiendo lo de los creditos., perfecto,, depsues tepaso un mail con los sites en que los estoy implementando!.
entiendo perfecto lo de los 7 kb contra los 41. ;).
con respecto a los skins, conta conmigo si queres que te envie algunos o haga algunos puntuales, pasame caracteristicas que necesitarias y los armamos en un rato!!.
Te mando saludos cualquier cosa aca estaremos para lo que necesites!
por lo de la imagen. no se podria solucinar fuera con el link de rss de google?
tipo: http://i2.ytimg.com/vi/«CODIGO_VIDEO»/default.jpg» .. si le metieramos un moviclip que levante eso del mismo cadigo. lo levantaria no?.
saludos egain
Publicado: 13/09/2009 5:22 pm
[…] Finalmente les dejo el archivo para descargar el player, el cual contiene un ejemplo de uso con SWFObject. Si necesitan mayor información de como utilizarlo pueden leer tubePlayer: Player Youtube. […]
Publicado: 15/09/2009 3:22 am
A mi no me funciona bien. Solo puedo ver 1 en la página…
¿Solución?
Publicado: 15/09/2009 3:24 am
Por cierto. ¿Hay Fla disponible?
Hay alguna forma de hacer un embed rápido y que ocupe poco. Probando
aqui me da fallos con otro que tengo
Publicado: 11/10/2009 11:58 pm
Hola Ujimpe. Excelente blog y desarrollo.
Mi consulta es la siguiente. Estoy implementando el player en un sitio que tiene un slider hecho en javascript. Es decir, que en la primera pantalla se ve el player, y al presionar avanzar, todo se desplaza hacia la derecha (desaparece la primera pantalla y aparece la segunda). Entonces el problema que tengo es que si está andando el video, al avanzar en las pantallas se continúa escuchando de fondo el video.
Existe alguna manera de detener la película vía javascript, para que al momento de avanzar en mi slider llame a alguna función que le comunique al swf que debe detenerse? (con saber que función ejecuta el botón «stop» dentro del player creo que podría hacerlo)
Muchas Gracias!
Publicado: 03/01/2010 1:36 pm
Estimado Unijimpe, he revisado este post y emplee el reproductor, la verdad es muy bueno, práctico y sobre todo pesa muy poco. Sin embargo quisiera preguntarte 2 cosas: ¿Como hago para establecer un nivel del volumen predeterminado?, como verás en este site: http://www.biowash.pe, el volumen esta muy alto, ¿tiene algun parámetro para poder bajarlo?.
Lo otro es con respecto a cuando uno le hace click derecho al reproductor y sale tu web, la abre por default en el mismo marco en el que se encuentra el reproductor, ¿Se podría hacer que el link a tu página lo abra en una nueva ?. Gracias, espero me puedas responder. Saludos y Felicitaciones nuevamente.
Publicado: 04/01/2010 1:17 am
Ernesto, es interesante tu observación para agregarle la posibilidad de asignar el control de volumen por defecto. Respecto a como abre la dirección del autor voy a tomarlo en cuenta.
Son varias observaciones asi que estoy preparando la nueva versión del player. Además de ello estoy preparando la versión en AS3 del player el cual será mucho mas optimizada.
Publicado: 08/01/2010 1:46 pm
Hola,
En un futuro le pondras soporte para archivos flv a tubeplayer?.actualmente uso toobplayer, pero este usa un API que no es de youtube y quita el logo de este. eso es ilegal para youtube y por consiguiente adsense. Ademas creo que al usar al API oficial hay que poner en la pagina el logo de «youtube powered» algo asi esta en los terminos.
Publicado: 02/02/2010 9:47 am
excelente el reproductor les recomiendo el ToobPlayer esta con el FLA para editarlo esta con php para insertar en la pagina y hacer rapido cualquier modificacion. todo esta dentro del paquete XMCA 0.3
Publicado: 27/02/2010 11:17 pm
esto es excelente.
muchas gracias che, lo estoy usando.
Quisiera hacetre una sugerencia-pedido.
El player ne sí ocupa mucho lugar respecto del video embebido (el perímetro es muy «grueso» digamos)
Es posible que puedas largar una versión sin controles del player?
me refiero a un player sin controles, sin perimetro, sin m{árgen…s+olo el video ejecutandose en autoplay sin barrita de progreso, esto sería exactamente lo que estaría necesitando.
Saludos y gracias de nuevo.
PD: si podés escribime al email si pensás que podría hacerse.
Publicado: 12/04/2010 5:40 pm
Como se activa el autoplay?
gracias de antemano jim! muy buen aporte!
Publicado: 12/04/2010 5:49 pm
Por cierto, estaria perfecto si el reproductor tuviese un enlace para publicar la pagina donde se encuentra el video a facebook y a twitter.
(como dailymotion.com) pero ya veo que es más complicado. un saludo!!!
Publicado: 22/05/2010 11:36 pm
Muy bueno el reproductor felicitaciones.
Una sugerencia, no eh visto la forma de crear una lista de videos a repdroducir elegida por mi con ninguna herramienta.
Seria interesante que lo plantiaran, crear una lista de videos y que al terminar uno comience inmediatamente el otro.
Saludos.!!
Muy buena pagina no la conocia.
Publicado: 08/06/2010 9:16 pm
Esta muy bueno!!!, es probable utilizar la variable $videoId de forma de levantar videos cuyas variables son enviadas desde otro flash? quiero decir, si quisiera ver una cantidad de videos «x» sin tener que entrar otra vez o sin tener que agregar más reproductore, osea, simplemente usando el mismo y sin irme a ningún lugar… cómo podría adaptar algo a este player?
Saludos!!! ( me encanta el blog)
Publicado: 15/07/2010 1:54 pm
ta muy chevere, pero existe algun parametro para cambiar los colores?
Publicado: 20/08/2010 11:20 am
[…] Player Personalizado Para la reproducción de vídeos utilizaremos el player tubePlayer el cual permite reproducir vídeos de Youtube sin necesidad de utilizar el video player […]
Publicado: 05/09/2010 7:45 am
Hola ,esta muy bien este reproductor justo lo que estaba necesitando para mi blog de videojuegos ,me a quedado perfecto ya que asi le da un toque de estilo muy guay ,respecto a que la pantalla se queda en negro y no muestra una vista preva del video ,espero que se pueda buscar alguna solución ,para hacer el video mas vistoso al publico,asi como comento una por arriba ,gran blog gran reproductor seguir asi unijimpe ayudas mucho con tu aporte ,y no hacer caso a gente como ( DakyZoft
) que quita creditos al trabajo de otros solo porque puso una coma o acento ya creé que tiene derecho a quitarte el trabajo que gentusa ,bueno un saludo a todos gran blog !!!!!!!.
Publicado: 14/09/2010 6:31 am
felicitaciones por el desarrollo, me gustaría hacer una consulta, me gustaría preproducir varios videos (una reproducción continua) se podría???, osea hacer unalista de videos que se reproducirian uno a continuacion de otro como http://www.mixpod.com o algo así.
Saludos.
Lo estoy probando en un sitio de videos musicales y quería hacer una sección de videos continuos ;) (musicamix.es)
Publicado: 25/11/2010 1:04 pm
Hola, tengo una pregunta a la que no encuentro respuesta googleando, tal vez sea que no estoy preguntando bien.
Bueno, la pregunta es esta: cómo se hace para que un reproductor de mp3 o videos hecho en flash mantenga el mismo nivel del volumen del audio aunque se actualice la página? o cuando se cambia de página a otra donde esta el mismo reproductor?
esto lo e visto en youtube, cuando veo diferentes vídeos, el volumen que elijo para uno se mantiene en los demás.
Saludos a todos, especialmente a Unijimpe.
Publicado: 11/08/2011 10:23 pm
Hola Unijimpe como estas, primero que nada felicidades por esta web tambien por el reproductor y gracias tambien a todos los que colaboraron en el, me gustaria pedirte un favor, ya que exede mis conocimientos en flash, odio flash :P, podrias hacer el player pero con el Simple Skin (Simple 1 o 2) ya que mola mas en clarito a mi gusto. Muchas gracias