El Soundtrack de mi vida.
YouTube + Playlists + JWplayer
14 de agosto de 2009
Con ayuda de YouTube y JWplayer podemos crear un reproductor de videos alimentado con una playlist ( lista de reproducción ).
Como prueba de concepto, les presento el soundtrack de mi vida. Y citando a los clásicos: "I know it's only rock and roll... But I like it"
Instale Flash Player para ver el video.
¿Cómo hacer uno propio?
Primero es necesario descargar el JWPlayer. El JWPlayer puede descargase en:
El JWPlayer consiste en dos archivos:
player.swf (el reproductor en sí)
swfobject.js (el archivo que permite insertar reproductor en el navegador)
Este es el código HTML que yo utilicé para insertar el reproductor y alimentarlo con un playlist.
/* Esto es un comentario al código. Los comentarios son sólo ilustrativos. Pueden borrarse. */
<script type="text/javascript" src="swfobject.js"></script>
/*
Importa el archivo swfobject.js
En este caso el archivo swfobject.js está en la misma carpeta que el archivo HTML que desplegará al JWPlayer.
Si estuviera en otra carpeta, debe ponerse la ruta correcta al archivo.
*/
<p id="player1">
<a href="http://www.macromedia.com/go/getflashplayer">Instale Flash Player</a> para ver el video.
</p>
/*
Aquí se mostrará el JWPlayer.
Si no está instalado flash aparecerá un vínculo para instalarlo.
*/
<script type="text/javascript">
/* Inicia codigo javascript que insertará y personalizara al JWPlayer. */
var s1 = new SWFObject("player.swf","mediaplayer","320","267","7");
/*
Inserta el archivo player.swf utilizando la función definida en el archivo swfobjet.js.
Se indica la ruta completa hacia el archivo player.swf.
En este caso el archivo player.swf está en la misma carpeta que el archivo HTML que desplegará al JWPlayer.
Se define el ancho en pixeles (320) del archivo swf a insertar / crear.
Se define el ancho en pixeles (267) del archivo swf insertar / crear.
*/
s1.addParam('allowscriptaccess','always');
/*
Con addParam se puede definir propiedades del reproductor.
En este caso habilita el
allowscriptaccess que le permite a flash intercambiar datos entre sevidores
*/
s1.addParam("allowfullscreen","true");
/* Habilita el modo fullscreen (pantalla completa) */
s1.addVariable('width','320');
/*
Define el ancho del reproductor en pixeles.
Puede ser más grande o más pequeño.
Téngase como referencia el ancho del archivo swf donde se despliega el reproductor
*/
s1.addVariable('height','267');
/*
Define el alto del reproductor en pixeles.
Puede ser más grande o más pequeño.
Téngase como referencia el alto del archivo swf donde se despliega el reproductor
*/
s1.addVariable('file', 'playlist.xml');
/*
Le indica al JWPlayer utilizar un archivo xml como playlist.
En el archivo playlist.xml está la lista con los videos a reproducir.
En este ejemplo el archivo playlist.xml
está en la misma carpeta que el archivo HTML que desplegará el JWPlayer.
*/
s1.addVariable('autostart','true');
/* Habilita el inicio automático de la reproducción de videos */
s1.addVariable('shuffle','true');
/* Reproduce aleatoriamente los videos de la playlist */
s1.addVariable('repeat','always');
/*
Al reproducirse completamente la playlist, se inicia nuevamente su reproducción.
Con esto se logra que la playlist se repita infinitamente.
*/
s1.addVariable("enablejs", "true");
/* Habilita javascript en el reproductor */
s1.addVariable("backcolor","0x666666");
/* Define el color de fondo del reproductor */
s1.addVariable("frontcolor","0xCCCCCC");
/* Define el color de los botones que controlan el reproductor*/
s1.addVariable("lightcolor","0x00ff00");
/*
Define el color de los botones que controlan el reproductor al momento de pasar el ratón sobre ellos
*/
s1.addVariable('overstretch','none');
/* Deshabilita la función de estirar los videos para que ocupen todo el espacio del reproductor
*/
s1.addVariable("showdigits","total");
/* Muestra la duración total del vídeo */
s1.write("player1");
/* Crea el reproductor */
</script>
/* termina el código javascript que inserta y personaliza al JWPlayer */
El siguiente paso es crear el archivo XML con la playlist, con la lista de vídeos. a reproducir.
Esta es una porción del código del archivo playlist.xml:
<!-- Esto es un comentario al código XML. Los comentarios son sólo ilustrativos. Pueden borrarse. -->
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<!-- Inicia codigo XML para crear la playlist -->
<title>El Soundtrack de mi vida</title>
<!-- el título de la playlist -->
<creator>Alain Garcia </creator>
<!-- Nombre del autor de esta playlist -->
<info>http://www.alaingarcia.net</info>
<!-- URL del autor de esta playlist -->
<trackList>
<!-- Inicia la lista de tracks (videos o canciones) -->
<track>
<!-- Crea un nuevo track (video o canción) -->
<creator>
<!-- Define el autor / intérprete del track (video o canción) -->
MGMT
<!--
Nombre del autor / intérprete del track (video o canción)
En este caso pongo el nombre del intérprete (MGMT
)
-->
</creator>
<!-- TAG de cierre para defininir el autor / intérprete -->
<title>
<!-- Define el título para del track (video o canción) -->
Kids
<!--
EL Título del track (video o canción)
En este caso pongo el título de la canción (Kids)
-->
</title>
<!-- TAG de cierre para defininir el titulo del video -->
<location>
<!-- Define la ubicación del track / video -->
http://www.youtube.com/watch?v=w7JthgTMHDU
<!--
En este caso los videos se toman de YouTube
Aquí se escribe la URL / Dirección del video
IMPORTANTE: DEBE SER la URL / Dirección del video.
Si se utliza la URL de un playlist de youtube, no funcionará.
Si se utliza la URL de RELATED VIDEO de youtube, no funcionar á.
-->
</location>
<!-- TAG de cierre para defininir la ubicacion -->
</track>
<!-- TAG de cierre para crear un nuevo track / video -->
<!-- A continuación se muestra el código para agregar tracks sin comentarios: -->
<track>
<creator>Evanescence</creator>
<title> My Immortal</title>
<location>http://www.youtube.com/watch?v=idd_92ajjwY</location>
</track>
<track>
<creator>Bob Dylan</creator>
<title> Like a Rolling Stone/title> <location>http://www.youtube.com/watch?v=xO0gSJGJ7Fs</location>
</track>
</trackList>
<!-- Termina la lista de tracks / videos -->
</playlist>
<!-- Termina codigo XML para crear la playlist -->
Como referencia y para un estudio a mayor detalle pueden descargar el archivo playlist.xml
Es así como se puede crear un reproductor de videos alimentado con una playlist (lista de reproducción).
Si. Con youtube se puede crear un playlist de videos y luego insertarlo en cualquier página. ¿Para que molestarse en hacer un reproductor propio?
Las ventajas de JWPlayer son:
Sitios de interés
Sitio para descargar el JWPlayer. Incluye tutoriales y foros para ayudar a configurar al JWPlayer. El sitio está en inglés.
Sitio que busca definir un fomato unificado para crear playlists con xml. El sitio está en inglés.
Tutorial de XML. Y Php. Y HTML. Y Javascript. El sitio está en inglés.
Canal de vídeos con parte de la memoria visual del mundo. (Hasta que el copyright los alcance...)
Firma mi libro de visitas Lee mi libro de visitas
© 1997-2010 Alain García Gómez
albegago@hotmail.com
El vínculo a este documento es:
http://www.alaingarcia.net/weird/soundtrack-youtube-playlist.php
Puedes apoyar a este sitio realizando una donación por medio de Paypal
InicioCurriculumEnsayosReseñasJavascriptMi tesisDesdemonaCFCPortafolios