Tutorial - Reproductor Multimedia Para Sitio Web con Lista de Reproduccin Generada a partir de los Arc

Escrito por Juanjo (Administrador) Jueves, 01 de Marzo de 2012 00:12 - Actualizado Jueves, 01 de Marzo de 2012 02:19

Por si el ttulo del Tutorial no es muy descriptivo con respecto a lo que se quiere hacer, empezare por explicar con mayor detalle lo que se pretende hacer en este Tutorial.

El problema que se me presento cuando quise insertar un reproductor de audio y video en una Pgina Web es que la mayora de ellos solo permita reproducir un solo archivo, cuando encontre uno que manejaba listas de reproduccin esta era tratada con XML, lo que esta bueno, pero cuando quera agregar archivos de audio o video, ademas de tener que subir el archivo al servidor, tena que agregar el detalle del archivo a la Lista de Reproduccin XML. Cuando lo que quera que el reproductor me cargue automticamente todos los archivos multimedia contenidos en un determinado Directorio o Carpeta. De aqui el ttulo del Tutorial.

Bueno, explicado el objetivo, a la prctica.

Lo que haremos ser Generar la Lista de Reproduccin XML a Mano, o sea que escibiremos un cdigo ( En PHP) que genere nuestra lista de reproduccin listando todos los archivos multimedia contenidos en una determinada carpeta o directorio. Luego esta lista ser la que utilizar nuestro reproductor para reproducir los archivos multimedia.

A modo de prctica lo vamos a hacer con dos Reproductores diferentes:

1- Con el Reproductor JW Player para Reproducir Audio y Video

2- Con un Reproductor desarrollado en Flash para Reproducir Solo Audio

1- Con el Reproductor JW Player para Reproducir Audio y Video

1/8

Tutorial - Reproductor Multimedia Para Sitio Web con Lista de Reproduccin Generada a partir de los Arch
Escrito por Juanjo (Administrador) Jueves, 01 de Marzo de 2012 00:12 - Actualizado Jueves, 01 de Marzo de 2012 02:19

Antes que nada tenemos que descargar el reproductor de esta pgina: http://www.longtailvid eo.com/players/jw-flv-player/

Una vez descargado lo descomprimimos. Los archivos que usaremos son jwplayer.js y player.swf.

Nota: Las listas de reproducin que maneja JWPlayer son RSS las cuales son un tipo de XML y tienen la siguiente estructura:

<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/" xmlns:jwplayer="http://dev <channel> <title>MRSS Playlist Playlist</title> <item> <title>Video MP4</title> <media:content url="files/video.mp4" /> <media:thumbnail url="/thumbs/bunny.jpg" /> <description>Esta es la descripcin del Primer Multimedia.</description> </item> <item> <title>Audio MP3</title> <media:content url="files/JoseWEB_TRACK_TRECE.mp3" /> <media:thumbnail url="/thumbs/sintel.jpg" /> <description>Esta es la descripcin del Segundo Multimedia.</description> <!-- <jwplayer:duration>888.06</jwplayer:duration> --> </item> <item> <title>Video FLV</title> <media:content url="files/RUBIK_en_1_minuto.flv" /> <media:thumbnail url="/thumbs/elephant.jpg" /> <description>Esta es la descripcin del Tercer Multimedia.</description> <!-- <jwplayer:duration>653.79</jwplayer:duration> --> </item> </channel> </rss> Este es archivo XML que tenemos que Generar y como veran la partes que nos interesa son lo que son las etiquetas <item>, las cuales contienen los detalles de nuestros archivos multimedia como El Ttulo (<title>), la ruta donde se encuentra alojado el archivo (<media:content>), una imagen a modo de vista previa (<media:thumbnail>), una descripcin del archivo (<description>) y la duracin (<jwplayer:duration>). Si queremos podemos abviar la

2/8

Tutorial - Reproductor Multimedia Para Sitio Web con Lista de Reproduccin Generada a partir de los Arch
Escrito por Juanjo (Administrador) Jueves, 01 de Marzo de 2012 00:12 - Actualizado Jueves, 01 de Marzo de 2012 02:19

imagen, la descripcin y la duracin. En este caso yo obviare solo la duracin.

Ahora vamos a crear un archivo con extensin PHP al que Llamaremos GenerarPlayList.php con el siguiente cdigo:

<?php $dir = "./Uploads/"; //Comentario: Carpeta donde estan alojados los archivos multimedia $Vector=array(); //Comentario: Array donde guardaremos los nombres de los archivos cotenidos if (is_dir($dir)) { if ($gd = opendir($dir)) { while (($archivo = readdir($gd)) !== false) { if ($archivo != "." & $archivo != ".." & $archivo != "list.php") { if (is_dir($archivo)) { $Vector[]=$archivo; } else { $Vector[]=$archivo; } } } closedir($gd); } } //Comentario: En $buffer vamos a ir creando nuestro archivo XML $buffer='<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/" xmlns:jwplayer="http://d <channel>'; $buffer.="<title>Lista de Reproduccin RSS</title>"; while (list (, $valor) = each ($Vector)): $buffer.="<item>"; $buffer.="<title>$valor</title>"; $buffer.="<media:content url='Uploads/".$valor."' />"; $buffer.="<media:thumbnail url='Uploads/".$valor."' />"; $buffer.="<description>Esta es la descripcin general.</description>"; $buffer.="</item>"; endwhile; $buffer.="</channel>"; $buffer.="</rss>";

3/8

Tutorial - Reproductor Multimedia Para Sitio Web con Lista de Reproduccin Generada a partir de los Arc
Escrito por Juanjo (Administrador) Jueves, 01 de Marzo de 2012 00:12 - Actualizado Jueves, 01 de Marzo de 2012 02:19

$file=fopen("PlayList.xml","w+");//Cometario: Abrimos o creamos el archivo PlayList.xml fwrite ($file,$buffer); //Cometario: Guardamos los datos de $buffer en nuestro archivo PlayList.xml fclose($file); //Comentario: Cerrramos el archivo ?> Ahora solo nos queda Crear una pgina PHP para insertar el reproductor, la llamaremos Reproductor.php <html>

<head> <title>Reproductor Multimedia con Lista de Reproduccin Creada a Partir de los Archivos Contenido <script type='text/javascript' src='jwplayer.js'></script> </head>

<body> <?php include("GenerarPlayList.php"); //Cometario: Esta linea es para generar la lista antes de abrir el rep ?> <div id='mediaspace'></div> <script type='text/javascript'> jwplayer('mediaspace').setup({ 'flashplayer': 'player.swf', 'playlistfile': 'PlayList.xml', 'playlist': 'bottom', 'autostart': 'true', 'shuffle': 'true', 'frontcolor': 'cccccc', 'lightcolor': '66cc00', 'skin': 'http://www.longtailvideo.com/jw/upload/stylish.swf', 'backcolor': '111111', 'playlistsize': '200', 'controlbar': 'bottom', 'width': '470', 'height': '470' }); </script> </body> </html> Y listo! Para probar solo debemos abrir esta ltima pgina en el navegador (Obvio que desde localhost no haciendo doble click porque de esta forma no funcionara el cdigo PHP)...

4/8

Tutorial - Reproductor Multimedia Para Sitio Web con Lista de Reproduccin Generada a partir de los Arch
Escrito por Juanjo (Administrador) Jueves, 01 de Marzo de 2012 00:12 - Actualizado Jueves, 01 de Marzo de 2012 02:19

Nota: Los archivos jwplayer.js, palyer.swf, la carpeta con los archivos multimedia, el archivo GenerarPlayList.php y Reproductor.php tienen que estar en la misma carpeta.

Nota: En el archivo GenerarPlayList.php, en la variable $dir debemos especificar: Si estamos trabajando en local $dir="./Uploads/" y si estamos trabajando en un servidor remoto $dir="Uploads/"

2- Con un Reproductor desarrollado en Flash para Reproducir Solo Audio

Lo primero, descargar el reproductor de esta pgina: http://www.robnei.net/super-reproducto r-flash-mp3-robney

Si ya no esta disponible lo pueden buscar como Super Reproductor Flash MP3 Robney.

Descomprimimos. El nico archivo que nos interesa es player.swf

En lo personal me parece un diseo muy atractivo. Y si quieren pueden modificarlo porque el paquete incluye el archivo .fla.

Esta reproductor tambin usa Listas de Reproduccin XML pero con una estructura distanta al anterior:

<?xml version="1.0" encoding="UTF-8"?> <songs>

<song title="Adele - Set Fire To The Rain"

5/8

Tutorial - Reproductor Multimedia Para Sitio Web con Lista de Reproduccin Generada a partir de los Arc
Escrito por Juanjo (Administrador) Jueves, 01 de Marzo de 2012 00:12 - Actualizado Jueves, 01 de Marzo de 2012 02:19

path="set fire to the rain.mp3"/> <song title="Magnate y Valentino - Si Te Acuerdas de Mi" path="http://www.robney.org/listen/b324b82/Si-Te-Acuerdas-de-Mi"/> <song title="Diego Torres - Guapa" path="http://www.robney.org/listen/534e8cd/Diego-Torres-Guapa"/>

<song title="Ttulo de Mi Cancin" path="micancion.mp3"/>

</songs>

Para generar una lista de reproduccin XML con esta estructura usaremos el mismo cdigo que usado para generar la lista de reproduccin para el reproductor JWPlayer pero con algunas modificaciones, lo llamaremos GenerarPlayListMP3.php: <?php $dir = "./Canciones/"; $Vector=array(); if (is_dir($dir)) { if ($gd = opendir($dir)) { while (($archivo = readdir($gd)) !== false) { if ($archivo != "." & $archivo != ".." & $archivo != "list.php") { if (is_dir($archivo)) { $Vector[]=$archivo; } else { $Vector[]=$archivo; } } } closedir($gd);

6/8

Tutorial - Reproductor Multimedia Para Sitio Web con Lista de Reproduccin Generada a partir de los Arc
Escrito por Juanjo (Administrador) Jueves, 01 de Marzo de 2012 00:12 - Actualizado Jueves, 01 de Marzo de 2012 02:19

} } $buffer='<?xml version="1.0" encoding="UTF-8"?> <songs>'; while (list (, $valor) = each ($Vector)): $buffer.="<song title='".$valor."' path='Canciones/".$valor."' />"; endwhile; $buffer.="</songs>"; $file=fopen("robneylista.xml","w+"); fwrite ($file,$buffer); fclose($file); ?> Nota: En este caso la especificacin de la ubicacin de la Lista de Reproduccin no se hace en el archivo PHP donde insertamos el reproductor sino en el mismo reproductor. En este caso en el reproductor player.swf que descargamos esta configurado para que use una lista llamada robneylista.xml por eso es que cremos la lista de reproduccin XML con ese nombre. Pero esto se puede modificar abriendo el archivo player.fla con Adobe Flash, modificando el nombre de la lista a la que hace referencia y volviendo a generar el archivo swf correspondiente. Yo no lo hare por eso creo la lista de reproduccin con el mismo nombre (robneylista.xml).

Ahora solo nos queda crear el archivo PHP donde insertaremos el reproductor, lo llamaremos ReproductorMP3.php: <html>

<head> <title>Reproductor de MP3</title> </head> <body topmargin="0" bgcolor="#000000" text="#FFFFFF"> <? include("GenerarPlayListMP3.php"); ?> <div align="center"> </div> <p align="center"> <object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="repro" codebase="http://do <param name="movie" value="Player.swf"> <param name="quality" value="High"> <embed src="Player.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="app </object> </p>

7/8

Tutorial - Reproductor Multimedia Para Sitio Web con Lista de Reproduccin Generada a partir de los Arc
Escrito por Juanjo (Administrador) Jueves, 01 de Marzo de 2012 00:12 - Actualizado Jueves, 01 de Marzo de 2012 02:19

</body> Y listo! Solo queda probarlo en el navegador (en localhost).

Nota: Los archivos player.swf, GenerarPlayListMP3.php, ReproductorMP3.php y la carpeta Canciones tienen que estar en un mismo directorio.

Saludos...

8/8