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).
Inauguramos nuestro blog hace poco. Y queremos enfocarnos en las conocidas APIs (y muchos temas mas, claro) pero este es un sector que viene en aumento… y es difícil encontrar documentación al respecto (en nuestro idioma).
Bueno, entonces empezaremos con nuestro primer curso.
Utilizando la API de YouTube. Parte 1
Tema: Como subir videos con la Api de YouTube.
Espero no empezar con material muy pesado, pero he buscado esta información por todo lado y no encuentro nada. Ojala les sirva.
$httpClient = Zend_Gdata_ClientLogin::getHttpClient(
$username = ‘SU USUARIO@gmail.com’,
$password = ‘SU PASSWORD’,
$service = ‘youtube’,
$client = null,
$source = ‘MiYoutube’, // un nombre para identificar la aplicacion
$loginToken = null,
$loginCaptcha = null,
$authenticationURL);
$millave = ‘LA LLAVE o DEVELOPER KEY’;
$httpClient->setHeaders(‘X-GData-Key’, “key=${millave}”);
$yt = new Zend_Gdata_YouTube($httpClient);
[/cc]
$authenticationURL es la direccion donde vamos a enviar los datos que siguen (No cambiar)
Guardamos en $httpClient en valor de la función getHttpClient de la clase que definimos anteriormente ClientLogin, a la cual le enviamos 8 variables de la que debemos cambiar estas:
$username es la cuenta de correo que tenemos ligada con nuestra cuenta de youtube (en este caso debe ser de Gmail, mas adelante enseñaré con otras cuentas) $password el password de la cuenta $source es un nombre para identificar la aplicación.
Colocamos nuestra Llave, la pasamos como cabecera a nuestro elemento $httpClient
Después creamos el objeto $yt que es una clase de Youtube con el parametro $httpClient.
Hasta aqui nuestro script funciona para lo que es la Autentificacion en Youtube.
Vamos a subir un video, ya que estamos “logeados” a nuestra cuenta.
[cc lang="php" tab_size="2" lines="40"]
// Creamos una clase para la entrada del video
$miVideo= new Zend_Gdata_YouTube_VideoEntry();
// Creamos un objeto media group
$mediaGroup = $yt->newMediaGroup();
$mediaGroup->title = $yt->newMediaTitle()->setText(‘Video subido con la API’);
$mediaGroup->description = $yt->newMediaDescription()->setText(‘Mi primer video subido con la Api de Youtube. Curso del manejo de la API por Avenidanet’);
// Descarga el archivo que contiene los tags de youtube
$categoryScheme = ‘http://gdata.youtube.com/schemas/2007/categories.cat’;
// agregamos los tags
$mediaGroup->keywords = $yt->newMediaKeywords()->setText(‘Avenidanet, prueba, api’);
$miVideo->mediaGroup = $mediaGroup;
[/cc]
En el codigo anterior lo que vamos hacer es crear una clase VideoEntry (que es los datos del video) y le agregamos la características con el objeto MediaGroup
Vemos que podemos agregar:
el titulo en $mediaGroup->title = $yt->newMediaTitle()->setText(‘Video subido con la API’);
la descripción en $mediaGroup->description = $yt->newMediaDescription()->setText(‘Mi primer video subido con la Api de Youtube. Curso del manejo de la API por Avenidanet’);
la categoría donde vamos a guardarlo en este caso Tech o tecnologia, se tomo como referencia del archivo http://gdata.youtube.com/schemas/2007/categories.cat donde vienen las etiquetas.
y los tags en $mediaGroup->keywords = $yt->newMediaKeywords()->setText(‘Avenidanet, prueba, api’); tiene que estar separados con (,) coma y no contener espacios
Lo anterior es el proceso para tomar la dirección de donde debemos enviar nuestro video en la variable $enviarloa con un token en $clave y adonde vamos a recibir la respuesta de como nos fue y el ID del video (si, ese que vemos en la url de youtube http://www.youtube.com/watch?v=yzUUJdMSL88).
Resumen:
Ya nos “logeamos” en YouTube
Tenemos la descripción de nuestro video en $miVideo (titulo, descripcion, etiqueta y tags) que utilizamos para generar la dirección donde enviarlo y token
Sabemos donde enviarlo en $enviarloa y un token en $clave
y donde recibiremos la repuesta $devuelta
Que nos falta..
Claro, enviar el video… Facil creamos un formulario donde el usuario o nosotros busquemos un video de nuestro disco duro.
[cc lang="php" tab_size="2" lines="40"]
// Contruimos el formulario
//Y introducimos los datos anteriores
$form = ‘
‘.
‘
‘.
‘
‘.
‘
‘;
//Mostramos el formulario
echo $form;
[/cc]
Sencillo, verdad… No te olvides del multipart/form-data, en el formulario, espera la siguiente clase…
