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)
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
Usted necesita Flash Player 8+ y Javascript activado</div>
<!--//Este es el script que lanzara el reproductor-->
<script type="text/javascript"><!--
//Developer Key
var MiLlave = ‘SU LLAVE’;
var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
var atts = { id: "reproductor" };
swfobject.embedSWF("http://gdata.youtube.com/apiplayer?key=" + MiLlave + "&enablejsapi=1&playerapiid=ytplayer",
"reproductor", "550", "300", "8", null, null, params, atts);
//550 x 300 da una perspectiva Widescreen interesante, ud puede utilizar la más adecuada a su pagina o la por defecto que seria 425 x 350
// --></script>
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.
<div id="controles">
<h2>Funciones que inicializan el video</h2>
<a onclick="loadNewVideo('gJmX1z1NY2c','0');" href="javascript:void(0);">Cargar video</a> |
<a onclick="cueNewVideo('gJmX1z1NY2c','0');" href="javascript:void(0);">Cargar nuevo video</a>
<h2>Funciones basicas</h2>
<a onclick="play();" href="javascript:void(0);">Play</a> |
<a onclick="pause();" href="javascript:void(0);">Pausar</a> |
<a onclick="stop();" href="javascript:void(0);">Detener</a> |
<a onclick="mute();" href="javascript:void(0);">Desactivar sonido</a> |
<a onclick="unMute();" href="javascript:void(0);">Activar sonido</a>
<h2>Obtener datos</h2>
URL del video:
<input id="direccion" type="text" /> <a onclick="document.getElementById('direccion').value = getVideoUrl();" href="javascript:void(0);">Obtener</a>
Codigo Embed:
<input id="cembed" type="text" /> <a onclick="document.getElementById('cembed').value = getEmbedCode();" href="javascript:void(0);">Obtener</a>
<h2>Datos informativos (se actualizan en tiempo real)</h2>
Total de bytes: <span id="bytestotal">--</span> |
Bytes cargados: <span id="bytesloaded">--</span> |
Inicio bytes: <span id="startbytes">--</span> ||
Duracion del video: <span id="videoduration">--:--</span> |
Tiempo transcurrido: <span id="videotime">--:--</span> ||
Volumen: <span id="volume">--</span>
<h2>Otras funciones</h2>
<a onclick="setVolume('5');" href="javascript:void(0);">Poner el volumen en 5</a> |
<a onclick="seekTo('20');" href="javascript:void(0);">Ir al segundo 20 del video</a>
<h2>Ejemplo de como introducir los datos con Input</h2>
<input id="dato" type="text" /> |
<a onclick="seekTo(document.getElementById('dato').value);" href="javascript:void(0);">Ir al segundo que escribamos en el input</a>
Este ejemplo se puede utilizar para la funcion <strong>Cargar video, Cargar nuevo video, Poner el volumen e Ir a.</strong>
</div>
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
Te interesó este articulo, visita estos...
Animate escribe un comentario...
Da tu opinion
