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 video , ??? claro utilizando la Api.
Entonces aqui lo tienen, la primera version de Subtube V1.0 (si tienen otro nombre para el metodo, bienvenido sea).
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):
Nos hemos adelantado en el curso brindando una muestra del tema 10 a peticion del publico.
Antes que nada explicar que el remover el logo de youtube no es posible con la API o el reproductor como tal, se debe crear un player y tomar el video “prestado” de Youtube. Esto es lo que aprenderemos en el capitulo 10 del curso Como utilizar la API de YouTube.
Por ahora hemos habilitado el proyecto ANPLAYER (Avenidanet Player) en version 0.4.
Que es eso?
Facil tomamos el EMBED de youtube, cambiamos donde dice youtube y colocamos avenidanet y ya con eso hemos quitado el logo.
Una muestra del reproductor con Avenidanet.
Y podemos personalizar el logo
Claro, si quieren colocar su logo personalizado solamente agreguen &logo=imagen.png (donde imagen es el nombre del PNG) despues del IDVideo eliminando todo lo que hay al final de la cadena, ejemplo:
[cc lang="html" tab_size="2" lines="40"]
[/cc]
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 video.
No se puede navegar por el video.
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 video te va a redireccionar a Youtube.
Tenemos un error, que revisare mañana, el logo personalizado se puede ver solo en la portada del blog y no en el post.
Continuamos con nuestro curso de la API de Youtube
Como utilizar la API de YouTube. Parte 3.
Tema: Como utilizar el Chromeless Player de Youtube
Nota: El chromeless player es el reproductor de youtube sin los controles, sin bordes, pero sigue mostrando el logo en la parte inferior derecha.
Requisitos
• Ocuparemos de nuevo nuestra Developer Key
• El archivo ClessPlayer.js estas son las funciones para utilizar el Player (play, stop, etc.) este archivo lo veremos en detalle en la siguiente clase.
• Swfobject.js es para manejar el Flash o .swf
• Flash player 8+
• Javascript Activado
En este caso dejaremos de lado el PHP y nos involucramos un poco al Javascript, aunque claro podemos mezclarlos, pero en este solo ocuparemos JS.
Empezamos creando nuestro archivo vervideo.html (o .php si asi lo desean)
[cc lang="html" tab_size="2" lines="40"]
[/cc]
Aquí “linkeo” el archivo clessplayer.js y el archivo swfobject.js extraido directamente de AJAX Libraries API de Google que veremos en otro tema. Quiero ver la otra parte… »
Ocuparemos los mismos requisitos que la primera lección.
Para este procedimiento no ocuparemos la Developer Key y tampoco necesitaremos “loguearnos” en youtube.
Creamos un PHP puede ser vervideo.php
[cc lang="php" tab_size="2" lines="40"]
// Llamamos a la libreria.
require_once ‘Zend/Loader.php’;
Zend_Loader::loadClass(‘Zend_Gdata_YouTube’);
$yt = new Zend_Gdata_YouTube();
[/cc]
Ya esta parte la vimos, llamamos a la librería Zend, cargamos una clase Youtube y creamos el objeto.
[cc lang="php" tab_size="2" lines="40"]
// El ID del video (ya saben las letritas esas de la direccion de youtube)
$IDVideo = ‘MbNH00ZXeLk’;
$NuestroVideo = $yt->getVideoEntry($IDVideo);
[/cc]
Guardamos toda la información del video en $NuestroVideo, ahora vamos a obtener la información y mostrarla.
[cc lang="php" tab_size="2" lines="40"]
//Esta es la direccion flash del video
$direccion = $NuestroVideo->getFlashPlayerUrl();
//Obtenemos mas informacion del video y la mostramos
Esta parte se explica por si misma, puedo añadir, que si uno quiere puede guardar la información en variables y después mostrarla, como en el caso de la Url Flash y el Titulo, que yo guardé porque lo voy a utilizar unas 3 veces mas adelante (y no seria correcto llamar a la funcion getFlashPlayerUrl() o getVideoTitle() cada vez)
Ya tenemos toda la información del video, falta mostrarlo
[cc lang="php" tab_size="2" lines="40"]
// Utilizamos el codigo embed que nos facilita youtube y lo adecuamos a nuestro codigo
echo ““. $Titulo . “
“;
[/cc]
Listo, que les pareció…sencillo verdad, la próxima lección veremos como utilizar el Chromeless Player (el reproductor de youtube sin marco y botones).
