Youtube Video Player: tubePlayer 1.0 (beta)

Después de algún tiempo tenemos el agrado de presentar la nueva versión de tubePlayer el reproductor de vídeos de Youtube personalizado. Todo esto gracias a los comentarios y sugerencias de los visitantes a este blog, con lo cual hemos logrado un mejor rendimiento del player.

Cargando Flash

Características

En esta nueva versión se ha reescrito completamente el reproductor utilizando YouTube ActionScript 2.0 Player API el cual corrige algunos problemas de la versión anterior y mejora características solicitadas por nuestros visitantes.

  • Reescrito completamente en ActionScript 2.0 con OOP.
  • Opción para autoplay de vídeos.
  • Opción para el volumen por defecto.
  • Se puede desplazar al cualquier parte del vídeo.
  • Imagen de previsualización del vídeo.
  • Mensaje de error si el vídeo esta bloqueado o eliminado.
  • No se muestra publicidad en los vídeos.
  • No se muestran las anotaciones en los vídeos.
  • Corregido el autoescalado del vídeo de acuerdo al tamaño del player.
  • Reproducción en pantalla completa.

ActionScript 3.0 es muy potente pero el API es AS3 tiene el problema que muestra la publicidad en los vídeos, por lo cual decidimos trabajar con AS2 para mostrar los vídeos sin publicidad. Además de ello estamos trabajando para integrar tubePlayer a un plugin para WordPress que permita utilizar este player de forma sencilla en los blogs.

Como utilizar tubePlayer

Primero debes descargar la ultima versión del player y subir el archivo tubeplayer.swf a tu servidor web. Luego lo incluyes en tu página como cualquier SWF pero con tres parámetros por medio de flashVars:

  • videoId (Requerido)
    Identificador del vídeo de Youtube a reproducir.
  • autoPlay (Opcional)
    Define si el vídeo se reproducirá automáticamente. Acepta valores true o false.
  • volume (Opcional)
    Volumen inicial del vídeo. Acepta valores enteros de 0 a 100.

Podemos embeber el video utilizando el tag de HTML :

  1. <object width="510" height="320">
  2.    <param name="movie" value="http://domain/path/tubeplayer.swf" />
  3.    <param name="flashVars" value="videoId=6hzrDeceEKc&autoPlay=true" />
  4.    <param name="allowFullscreen" value="true" />
  5.    <embed src="tubeplayer.swf" width="510" height="320"
  6.   flashVars="videoId=pa14VNsdSYM" allowFullscreen="true" />

También podemos utilizar SWFObject para incluir el player:

  1. <div id="divmovie">tubePlayer</div>
  2. <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
  3. <script type="text/javascript">
  4.    swfobject.embedSWF("http://domain/path/tubeplayer.swf", "divmovie", "510", "320", "9", "",
  5.    {videoId: "6hzrDeceEKc"}, {allowFullscreen: "true"});

Pueden ver el player funcionando en tubePlayer 1.0 (beta) demo, donde pueden ingresar rl identificador del vídeo que desean visualizar.

Sugerencias

Este player esta en versión beta y esperamos nos hagan llegar su observaciones y sugerencias para de esta forma lograr un buen player que nos beneficie a todos.

Pueden dejar sus sugerencias en nuestro formulario de comentarios. En el transcurso de esta semana estaremos trabajando en la mejora del player y la otra semana estaremos lanzando la versión final que incluye un plugin para WordPress.

Comentarios Total 7 comentarios


Esteban
Publicado: 25/10/2010 9:01 am

Buenisimo.. lo estabamos esperando.
Consulta. el tamaño de la imagen no es full . ? estaribueno que tomara todo el reproductor cuando esta en stop. se podria usar la hqdefaul de yotube.!.

Skins. externos seria un golazo, me parece que se nombro en algun otro post sobre el repdoructor.
Hd?. hay posibilidad de verlo en hd? con conun botoncito?. la API de YT lol permite?
saludos ABrazo uninjimpe! the best!

Pasley
Publicado: 25/10/2010 12:06 pm

Mis sugerencias son:

Un click en el video = Pause
Doble click = Pantalla completa (full screen)
En pantalla completa ocultar la barra de reproducción pasados unos 2 segundos

muy buen trabajo. Saludos,

caezar
Publicado: 25/10/2010 3:20 pm

Saludos, con respecto a rendimiento, alguien sabe cuales son las ventajas en cifras de usar este reproductor? =O ta bonito

unijimpe
Publicado: 25/10/2010 11:34 pm

Esteban estoy utilizando la imagen hqdefault.jpg para el preview del video. Repecto a la opción HD o cambiar de calidad al video según parece el APi en AS2 tiene un problema pues devuelve y permite cambiar las calidades de forma local pero una vez publicado en Web no funciona. Según parece es un error del API en AS2.

Pasley un click para pause me parece un poco confuso funcionalmente, pero lo del doble click para fullscreen me parece interesante, entonces trabajaré en ello. También ocultar los controles en fullscreen sería bueno.

Caezar respecto al rendimiento no he hecho una prueba detallada del consumo de CPU, pero en el desarrollo he cuidado de enterFrames y de eliminarlos cuando dejan de ser necesarios, además con dos detectores de eventos.

Fernando
Publicado: 10/11/2010 5:32 am

Muy bueno. Enhorabuena. Pero salta la alerta de conexión externa del reproductor flash.

Erick Omar Torres Arenales
Publicado: 23/12/2010 6:17 pm

Hola1 disculpa tendras alguna sugerencia de un reproductor para videos de youtube, pero que tenga una lista de reproduccion de varios videos en el mismo reproductor… gracias y salu2

Raul
Publicado: 13/08/2011 9:11 am

Hola de vuelta, repito el comentario por que veo que este post lo tenes mas actualiza. 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) de tobplayer ya que mola mas en clarito a mi gusto y les darias la opcion a los usuarios de tener las dos variantes para no constratar sus sitios web el primer intereasdo soy yo desde ya muchisimas gracias. Muchas gracias

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)