Como utilizar el Chromeless Player de Youtube (III)

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.
Ahora dentro de nuestro body

[cc lang="html" tab_size="2" lines="40"]

[/cc]

Esta parte es sencilla, primero un DIV donde se va a reproducir el video.
Y después el script para colocar el SWF de YouTube, no te olvides de colocar tu Developer Key.

Hasta aqui es como montar cualquier otro Player.

[cc lang="html" tab_size="2" lines="40"]

[/cc]

Paso a paso y nos vamos a referenciar por las etiquetas H2

1. En los primeros dos enlaces llamamos a loadNewVideo() o cueNewVideo() pasando como parámetro el ID del video y donde va a comenzar en segundos.
Cualquiera de los dos cargaría el video a mostrar.

2. En las funciones básicas se interpreta bien en el código para que sirve cada función. Una anotación el comando play no debe confundirse con LoadNewvideo. Este play funciona solo cuando hemos dado pause o stop.

3. En obtener datos he puesto un campo donde caerá el dato a solicitar con esta dos funciones:
getVideoUrl() que nos devolverá la dirección del video y
getEmbedCode() que nos devolverá el código embed del mismo.

4. En Datos informativos le colocamos un nombre de id a la etiqueta SPAN deacuerdo a lo que queramos obtener :
bytestotal para el Total de bytes
bytesloaded para los Bytes cargados
startbytes para el Inicio bytes
videoduration para la Duracion del video
videotime para el Tiempo transcurrido
volume para el Volumen
Todo esto se llenara en tiempo real después de cargado el video

5. Y bueno en otras funciones podemos modificar el volumen o ir a un segundo preciso del video (se puede utilizar para sincronizar videos). Las funciones son sencillas seekto(x) ir al segundo x y setvolume(x) poner el volumen en x.

6. Y al final un ejemplo de cómo dejar que el usuario ingrese los valores antes descritos se puede utilizar para ingresar el ID del Video, el volumen o como en el ejemplo ir al segundo tal.

En el siguiente tema, veremos el archivo clessplayer.js mas a fondo.

Descarga | Ejercicio 3

Creado el junio 6th, 2008 a las 5:11 pm. No hay comentarios, habrá que editar este post ... »
Categorías: Programación. Tags: APIs, youtube.

Puedes participar en este post, dejando un "comment", o sencillamente dale compartir.