AvenidaNet. Programacion y diseño en Costa Rica

…sigue la ruta de la red

Como agregar subtitulos a los videos de Youtube

Despues de analizar la pagina de Subyo, me pregunté que tan dificil sería colocar ese sistema en mi web, pues bueno al principio note que el metodo es eficaz pero no eficiente, y el secreto esta en la sincronización del texto presentado y el , ??? claro utilizando la Api.

Subtube v1.0 Avenidanet

Entonces aqui lo tienen, la primera version de Subtube V1.0 (si tienen otro nombre para el metodo, bienvenido sea).

Descargar Subtube V1.0

Que contiene la descarga: Un ejemplo en HTML, el Javascript que sincroniza el subtitulo y un CSS para manejar el color, la fuente, tamaño y posicion del subtitulo.

Como se utiliza:

Hacemos referencia de esta forma a los archivos subtube.js, subtube.css y el swfobject.js (este lo linkeo directamente de googlecode):

<link rel="stylesheet" type="text/css" href="subtube.css"/>
    <script src="http://swfobject.googlecode.com/svn/tags/rc3/swfobject/src/swfobject.js" type="text/javascript"></script>
    <script src="subtube.js" type="text/javascript"></script>

Lo que sigue te interesará

2 comentarios

How to remove the Youtube Logo (Embed FlashPlayer)

It’s simple, just copy the Embed of and change word (domain) by avenidanet. More information in Spanish.

For example:

Changing this code:

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/N5etCbMTNCk&hl=en&fs=1">
</param>
<param name="allowFullScreen" value="true">
</param>

<embed src="http://www.youtube.com/v/N5etCbMTNCk&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object>

by that other:

<object width="425" height="344">
<param name="movie" value="http://www.avenidanet.com/v/N5etCbMTNCk&hl=en&fs=1">
</param>
<param name="allowFullScreen" value="true">
</param>

<embed src="http://www.avenidanet.com/v/N5etCbMTNCk&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object>

Result of this example:

Disadvantages for the moment (for his quick release):

* Audio single high and low.
* It loses a little quality.
* Unable to navigate the .

No hay comentarios

Remover el logo de Youtube Beta 0.4.

Nos hemos adelantado en el curso brindando una muestra del tema 10 a peticion del publico.

Antes que nada explicar que el el de no es posible con la API o el reproductor como tal, se debe crear un player y tomar el “prestado” de . Esto es lo que aprenderemos en el capitulo 10 del curso Como utilizar la API de .

Por ahora hemos habilitado el proyecto ANPLAYER (Avenidanet Player) en version 0.4.

Que es eso?

Facil tomamos el EMBED de , cambiamos donde dice y colocamos avenidanet y ya con eso hemos quitado el .

Una muestra del reproductor con Avenidanet.

Y podemos personalizar el

Claro, si quieren colocar su personalizado solamente agreguen &=imagen.png (donde imagen es el nombre del PNG) despues del IDVideo eliminando todo lo que hay al final de la cadena, ejemplo:

<object width="425" height="344">
<param name="movie" value="http://www.avenidanet.com/v/LL_gWdmB9as&logo=logo.png">
</param>
<embed src="http://www.avenidanet.com/v/LL_gWdmB9as&logo=logo.png" type="application/x-shockwave-flash" width="425" height="344">
</embed>
</object>

Nota: la imagen debe ser un PNG (para obtener la transparencia) de 100 x 80 aproximado si no se saldra de recuadro y debe estar en el directorio donde se reproduce el flash, en el caso de los blogs como este, basados en Wordpress debe estar en la raiz del blog.

y este es el resultado:

Desventajas por el momento (por su rapido lanzamiento):

  • Sonido solo alto y bajo.
  • Se pierde un poco de calidad de .
  • No se puede navegar por el .

Esperando que este proyecto les interese, si tienen alguna duda o comentarios para las siguientes versiones no duden en brindarlas.

Actualizacion:
Dado los comentarios que se estan presentando, si alguien desea utilizar este player favor de leer Terminos, ademas cuando se da click en el te va a redireccionar a .

Tenemos un error, que revisare mañana, el personalizado se puede ver solo en la portada del blog y no en el post.

11 comentarios

Entradas Siguientes »