práctica en joomla de reproductor de streaming de video y audio
Post on 13-Apr-2017
613 Views
Preview:
TRANSCRIPT
Universidad Internacional De La Rioja
Máster en Dirección e Ingeniería de Sitios Web
Práctica de Difusión de Con-
tenidos Multimedia en la
Web
Presenta: Héctor Garduño Real
México, 05 de abril de 2015
05 de abril de 2015 Página ii
ÍNDICE DE CONTENIDOS
1. INTRODUCCIÓN ..................................................................................................................................... 4
2. INSTALACIÓN Y CONFIGURACIÓN DE JOOMLA ...................................................................................... 4
3. INSTALACIÓN Y CONFIGURACIÓN DE ALL VIDEO SHARE ........................................................................ 8
3.1. Configurar All Video Share .......................................................................................................... 10
3.2. Agregar videos a All Video Share ............................................................................................... 12
4. INSTALACIÓN Y CONFIGURACIÓN DE RAR RADIO ................................................................................ 16
4.1. Instalación del módulo de apache Music Index .......................................................................... 16
4.2. Instalación de servidor de streaming con IceCast ....................................................................... 18
4.3. Instalación de RAR Radio ............................................................................................................ 20
5. CREACIÓN DE UN VIDEO EN ADOBE PREMIERE ................................................................................... 23
ÍNDICE DE IMÁGENES
ILUSTRACIÓN 1. INICIO DE LA INSTALACIÓN DE JOOMLA ................................................................................................... 4
ILUSTRACIÓN 2. CONFIGURACIÓN DE LA BD EN INSTALACIÓN DE JOOMLA ........................................................................... 5
ILUSTRACIÓN 3. CONFIGURACIÓN DE FTP EN INSTALACIÓN DE JOOMLA ............................................................................. 5
ILUSTRACIÓN 4. CONFIRMAR CONFIGURACIÓN ANTES DE INSTALAR JOOMLA ....................................................................... 6
ILUSTRACIÓN 5. FINALIZACIÓN DE INSTALACIÓN DE JOOMLA ............................................................................................ 6
ILUSTRACIÓN 6. SELECCIÓN DE IDIOMA ADICIONAL PARA INSTALAR A JOOMLA ..................................................................... 7
ILUSTRACIÓN 7. ELEGIR IDIOMAS PREDETERMINADOS EN JOOMLA ..................................................................................... 7
ILUSTRACIÓN 8. JOOMLA INSTALADO CORRECTAMENTE ................................................................................................... 7
ILUSTRACIÓN 9. INICIO DE SESIÓN DEL ADMINISTRADOR DE JOOMLA .................................................................................. 8
ILUSTRACIÓN 10. PANEL DE CONTROL DE JOOMLA ......................................................................................................... 8
ILUSTRACIÓN 11. SITIO WEB DE ALL VIDEO SHARE ......................................................................................................... 9
ILUSTRACIÓN 12. INSTALACIÓN DE COMPLEMENTO ALL VIDEO SHARE ............................................................................... 9
ILUSTRACIÓN 13. ALL VIDEO SHARE INSTALADO CORRECTAMENTE .................................................................................... 9
ILUSTRACIÓN 14. SITIO WEB DE JBCORE ................................................................................................................... 10
ILUSTRACIÓN 15. ESTABLECER UNA PLANTILLA COMO PREDETERMINADA .......................................................................... 10
ILUSTRACIÓN 16. EDITAR MENÚS EN JOOMLA ............................................................................................................. 10
ILUSTRACIÓN 17. ESTABLECER MENÚ HOME PARA QUE SEA VIDEO LAYOUT ...................................................................... 11
ILUSTRACIÓN 18. HACER QUE LOS VIDEOS SE MUESTREN EN LA PÁGINA DE INICIO ............................................................... 11
ILUSTRACIÓN 19. CONFIGURAR CUADRO DE BÚSQUEDA EL BLOG ..................................................................................... 11
ILUSTRACIÓN 20. INSERTAR CUADRO DE BÚSQUEDA EN EL BLOG ..................................................................................... 12
ILUSTRACIÓN 21. ABRIR LA EXTENSIÓN ALL VIDEO SHARE ............................................................................................. 12
ILUSTRACIÓN 22. PANEL DE ALL VIDEO SHARE ............................................................................................................ 12
ILUSTRACIÓN 23. CREACIÓN DE UNA NUEVA CATEGORÍA EN ALL VIDEO SHARE .................................................................. 13
ILUSTRACIÓN 24. AGREGAR UN VIDEO DESDE ALL VIDEO SHARE ..................................................................................... 13
ILUSTRACIÓN 25. ALL VIDEO SHARE FUNCIONANDO CON UN VIDEO ................................................................................. 14
05 de abril de 2015 Página iii
ILUSTRACIÓN 26. REPRODUCCIÓN DE UN VIDEO EN ALL VIDEO SHARE ............................................................................. 14
ILUSTRACIÓN 27. ALL VIDEO SHARE FUNCIONANDO CON DIVERSOS VIDEOS ...................................................................... 14
ILUSTRACIÓN 28. MUSIC INDEX FUNCIONANDO EN EL SERVIDOR ..................................................................................... 17
ILUSTRACIÓN 29. AGREGAR UN MENÚ QE EMBEBA LA URL DE MUSIC INDEX .................................................................... 17
ILUSTRACIÓN 30. MUSIC INDEX EMBEBIDO EN EL SITIO WEB DE JOOMLA .......................................................................... 18
ILUSTRACIÓN 31. SERVIDOR ICECAST RECIÉN INSTALADO ............................................................................................... 18
ILUSTRACIÓN 32. PÁGINA WEB DE RAR RADIO ........................................................................................................... 20
ILUSTRACIÓN 33. CARGAR E INSTALAR RAR RADIO EN JOOMLA ...................................................................................... 20
ILUSTRACIÓN 34. INSTALACIÓN EXITOSA DE RAR RADIO ............................................................................................... 21
ILUSTRACIÓN 35. ACTIVAR RAR RADIO PARA QUE SE MUESTRE EN LA PÁGINA PRINCIPAL ..................................................... 21
ILUSTRACIÓN 36. INSERTAR RAR RADIO EN UNA PÁGINA .............................................................................................. 21
ILUSTRACIÓN 37. RAR RADIO INSERTADO Y FUNCIONANDO EN LA PÁGINA PRINCIPAL ......................................................... 22
ILUSTRACIÓN 38. EDICIÓN DE VIDEO EN ADOBE PREMIERE ............................................................................................ 23
ILUSTRACIÓN 39. EXPORTACIÓN DEL PROYECTO A UN VIDEO EXTENSIÓN AVI .................................................................... 23
ILUSTRACIÓN 40. REPRODUCCIÓN DEL VIDEO JUSTO EN EL MOMENTO QUE APARECEN LOS CRÉDITOS DEL AUTOR ...................... 24
ILUSTRACIÓN 41. DIRECTORIO DEL PROYECTO CON TODOS LOS ARCHIVOS FUENTE, JUNTO CON LOS VIDEOS EN VARIOS FORMATOS24
Por: Héctor Garduño Real
Máster en Dirección e Ingeniería de Sitios Web Difusión de Contenidos Multimedia en la Web
05 de abril de 2015 Página 4 de 24
1. INTRODUCCIÓN
La presente práctica fue realizada sobre un servidor conectado a internet, usando sistema operativo
Ubuntu Server 12.04 y ubicado en la siguiente dirección:
http://52.10.233.12/joomla/
Cabe resaltar que se obviaron procedimientos en Linux no esenciales para la asignatura pero que están
implícitos, tales como comandos para asignar permisos a directorios, descargar, mover archivos, etc.
2. INSTALACIÓN Y CONFIGURACIÓN DE JOOMLA
Lo primero que debe de realizarse una vez que se descarga Joomla de la página oficial, es descom-
primir el archivo, y ubicarlo dentro de la carpeta del servidor web. Hecho esto, se puede proceder a
iniciar la instalación con solo poner en la URL la ubicación de Joomla, por ejemplo en para esta
práctica /var/www/html/joomla equivale a www.dominio.com/joomla con lo cual se iniciará el pro-
ceso de instalación como se ve en la imagen. Aquí se deben introducir datos como el usuario admi-
nistrador de Joomla, e identificar el sitio.
Ilustración 1. Inicio de la instalación de Joomla
Posteriormente el segundo paso consistirá en configurar la base de datos con la que trabajará
Joomla, para ello es necesario que se haya creado previamente la base de datos. Ya que la practica
fue hecha sobre un servidor Linux, los comandos usados fueron los siguientes, uno de Linux y otro
de mysql respectivamente
$ mysql –u root –p
Por: Héctor Garduño Real
Máster en Dirección e Ingeniería de Sitios Web Difusión de Contenidos Multimedia en la Web
05 de abril de 2015 Página 5 de 24
mysql> create database joomla;
Ilustración 2. Configuración de la BD en instalación de Joomla
El tercer paso es indicar si se desea utilizar el protocolo de transferencia de archivos, el cual
no se ocupará para esta práctica, por lo que se dejará desactivado
Ilustración 3. Configuración de FTP en instalación de Joomla
En el paso final antes de proceder con la instalación es confirmar todos los datos configurados
anteriormente, sumado con la opción de incluir un blog o sistema de ejemplo para que pueda ser
modificado por aquellos que no tienen muchos conocimientos en Joomla.
Por: Héctor Garduño Real
Máster en Dirección e Ingeniería de Sitios Web Difusión de Contenidos Multimedia en la Web
05 de abril de 2015 Página 6 de 24
Ilustración 4. Confirmar configuración antes de instalar Joomla
Al dar clic en el botón “Instalar”, comenzará el proceso de configuraciones, el cual durará
unos cuantos segundos, hasta que aparezca lo siguiente.
Ilustración 5. Finalización de instalación de Joomla
Como se puede apreciar en la ilustración, ya que una vez instalado Joomla es en inglés, se
ofrece la posibilidad de iniciar la instalar más idiomas, por lo que se da clic en el botón para instalar
el idioma Español.
Por: Héctor Garduño Real
Máster en Dirección e Ingeniería de Sitios Web Difusión de Contenidos Multimedia en la Web
05 de abril de 2015 Página 7 de 24
Ilustración 6. Selección de idioma adicional para instalar a Joomla
Debe seleccionarse el idioma, y posteriormente en el segundo paso elegir si se desea dicho
idioma para la interfaz de administración de Joomla y para el sitio (blog) de Joomla. Para esta práctica
se emplea para ambos, como se puede apreciar en la imagen.
Ilustración 7. Elegir idiomas predeterminados en Joomla
El último paso será solicitará también la eliminación de la carpeta de instalación de Joomla,
y aunque se puede hacer manualmente, se ofrece desde la misma interfaz una opción para eliminarla.
Ilustración 8. Joomla instalado correctamente
Por: Héctor Garduño Real
Máster en Dirección e Ingeniería de Sitios Web Difusión de Contenidos Multimedia en la Web
05 de abril de 2015 Página 8 de 24
Para ingresar al panel de administración Joomla se puede hacer desde la carpeta administrator, tal
como se puede observar en la siguiente imagen.
Ilustración 9. Inicio de sesión del administrador de Joomla
El panel de control de Joomla tendrá la siguiente interfaz por defecto.
Ilustración 10. Panel de control de Joomla
3. INSTALACIÓN Y CONFIGURACIÓN DE ALL VIDEO SHARE
El complemento “All video share” sirve para implementar toda una estructura de videos usando
Joomla, algo similar a Youtube. Aunque hay cuatro formas de realizar la instalación aquí se usará la
de descargar el archivo e instalarlo manualmente, para ello primero será necesario ir a la página del
complemento y descargarlo.
Por: Héctor Garduño Real
Máster en Dirección e Ingeniería de Sitios Web Difusión de Contenidos Multimedia en la Web
05 de abril de 2015 Página 9 de 24
Ilustración 11. Sitio web de All Video Share
A continuación deberá irse al gestor de extensiones de Joomla, desde el menú superior, una
vez ahí, usando la opción de “Subir paquete” se deberá subir e instalar el complemento de All Video
Share en su versión 2.3, tal como se muestra en la imagen.
Ilustración 12. Instalación de complemento All Video Share
Si el proceso de instalación se ha realizado correctamente, se deberá mostrar un mensaje y un
resumen de la instalación.
Ilustración 13. All Video Share instalado correctamente
Por: Héctor Garduño Real
Máster en Dirección e Ingeniería de Sitios Web Difusión de Contenidos Multimedia en la Web
05 de abril de 2015 Página 10 de 24
Siguiendo el mismo procedimiento, se descargará JBCore para usarlo como tema para la interfaz, ya
que fue el propuesto en la misma práctica. Así pues, habrá que ingresar a la página, descargar la
extensión y luego instalarla en Joomla
Ilustración 14. Sitio web de JBCore
Una vez instalado el tema, habrá que dirigirse al “Gestor de plantillas” para activar JBCore para
ponerlo como predeterminado, para ello dando clic en la estrella.
Ilustración 15. Establecer una plantilla como predeterminada
3.1. Configurar All Video Share
Para hacer que una lista de videos aparezca en la página principal, habrá que dirigirse al menú para
editar el menú que viene por defecto llamado “Home”, en el cual se debe dar clic para modificarlo.
La primera opción a modificar en él es hacer que se comporte como una página con la estructura
necesaria para mostrar los videos de All Video Share, tal como se muestra en las siguientes imágenes.
Ilustración 16. Editar menús en Joomla
Por: Héctor Garduño Real
Máster en Dirección e Ingeniería de Sitios Web Difusión de Contenidos Multimedia en la Web
05 de abril de 2015 Página 11 de 24
Ilustración 17. Establecer menú Home para que sea Video Layout
Una vez que se ha establecido como “Video Layout” deberán realizarse las siguientes modi-
ficaciones:
Cambiar el nombre “Home” por “Explorar Videos”
Desde la pestaña “Asignación de módulos” activar y configurar “All Video Share Search”
Ilustración 18. Hacer que los videos se muestren en la página de inicio
Aprovechando la opción ya que se encuentra aquí mismo, se agregará el cuadro de búsquedas confi-
gurándolo desde la pestaña “All Video Share Search”
Ilustración 19. Configurar cuadro de búsqueda el blog
Por: Héctor Garduño Real
Máster en Dirección e Ingeniería de Sitios Web Difusión de Contenidos Multimedia en la Web
05 de abril de 2015 Página 12 de 24
Ilustración 20. Insertar cuadro de búsqueda en el blog
3.2. Agregar videos a All Video Share
Para agregar videos será necesario dirigirse primero al menú “Componentes” y desde ahí “All Video
Share”. Ya estando en la página de esta extensión, es necesario primero que se creen primero las
categorías y posteriormente los videos, tal como se muestra en las imágenes
Ilustración 21. Abrir la extensión All Video Share
Para agregar la categoría basta con hacer clic sobre el botón de “Categorías” y aunque hay
otras opciones, la principal es la de asignar un nombre a la categoría.
Ilustración 22. Panel de All Video Share
Por: Héctor Garduño Real
Máster en Dirección e Ingeniería de Sitios Web Difusión de Contenidos Multimedia en la Web
05 de abril de 2015 Página 13 de 24
Ilustración 23. Creación de una nueva categoría en All Video Share
Una vez que se tienen las categorías deseadas se procederá a insertar los diferentes videos, para lo
cual hay diversas formas, como subir un archivo de video, desde un enlace de Youtube, etc., en este
caso se empleará la opción de Youtube, para lo cual solo bastará con dar el nombre y url del video,
ya que los otros campos aunque pudieran personalizarse, se autocomplementaran.
Una vez agregado el video, debería visualizarse como en la siguiente imagen.
Ilustración 24. Agregar un video desde All Video Share
Por: Héctor Garduño Real
Máster en Dirección e Ingeniería de Sitios Web Difusión de Contenidos Multimedia en la Web
05 de abril de 2015 Página 14 de 24
Ilustración 25. All Video Share funcionando con un video
Ilustración 26. Reproducción de un video en All Video Share
Ilustración 27. All Video Share funcionando con diversos videos
Por: Héctor Garduño Real
Máster en Dirección e Ingeniería de Sitios Web Difusión de Contenidos Multimedia en la Web
05 de abril de 2015 Página 15 de 24
También se puede configurar el módulo “All Video Share Player” desde la página principal
(Explorar Videos) para que se muestre un video en la parte superior de la página. Esto se hace desde
el apartado que se muestra en la Ilustración 19, eligiendo la ubicación correspondiente del tema JBCo-
res.
Por: Héctor Garduño Real
Máster en Dirección e Ingeniería de Sitios Web Difusión de Contenidos Multimedia en la Web
05 de abril de 2015 Página 16 de 24
4. INSTALACIÓN Y CONFIGURACIÓN DE RAR RADIO
RAR Radio es una extensión que permite incrustar en la página un reproductor de streaming, su pro-
ceso de instalación es muy sencillo, pero adicionalmente aquí se agregarán también servicios de strea-
ming.
4.1. Instalación del módulo de apache Music Index
Considerando que ya se encuentra instalado y actualizado Apache, el proceso es el siguiente.
Instalar las librerías de audio con "
$ sudo apt-get install libmad0-dev libid3tag0-dev libogg-dev libvorbis-dev libflac-dev libar-
chive-dev
Instalar el módulo con
$ sudo apt-get install libapache2-mod-musicindex
Crear un archivo para que el módulo maneje su caché con
$ sudo touch /tmp/musicindex
Crear una carpeta para la música en el servidor web y copiar los archivos, por ejemplo
"/var/www/html/musica/"
Editar el archivo de configuración del módulo recién instalado para que contenga lo siguiente:
$ sudo vim /etc/apache2/mods-available/musicindex.conf
Alias /musicindex "/usr/share/mod_musicindex" #Aqui se crea un alias con la ruta
del los archivos de musicindex con la hoja de estilos y botones/imagenes
<Directory "/var/www/html/musica"> #Carpeta sobre la que va a actuar musicindex
#Aquí todas las configuraciones de sobre cómo se comportará musicindex, no tiene
que ir todo esto, sino que solo lo necesario segun las necesidades
Allow from all
Options Indexes MultiViews FollowSymlinks
AllowOverride Indexes
MusicIndex On +Stream +Download +Search -Rss -Tarball
MusicSortOrder album disc track artist title length bitrate freq filetype filename uri
MusicFields title artist album length bitrate
MusicPageTitle Myname
MusicDefaultCss musicindex.css
MusicDirPerLine 3
MusicDefaultDisplay HTML
MusicIndexCache file://tmp/musicindex
MusicIceServer [ice.domain.my]:8000
MusicCookieLife 300
</Directory>
Finalmente hay que reiniciar apache para que cargue el nuevo módulo
sudo service apache2 restart
Finalmente el resultado debería ser como en la siguiente imagen.
Por: Héctor Garduño Real
Máster en Dirección e Ingeniería de Sitios Web Difusión de Contenidos Multimedia en la Web
05 de abril de 2015 Página 17 de 24
Ilustración 28. Music Index funcionando en el servidor
Así pues, se usará esta página para agregar un menú al sitio web de Joomla desde donde se
puedan reproducir vía streaming las pistas de audio. Para ello bastará con agregar un nuevo menú
(como se mostró anteriormente) el cual embeba una URL, las configuraciones y resultado deberán
quedar como se muestran en las dos siguientes imágenes.
Ilustración 29. Agregar un menú que embeba la URL de Music Index
Por: Héctor Garduño Real
Máster en Dirección e Ingeniería de Sitios Web Difusión de Contenidos Multimedia en la Web
05 de abril de 2015 Página 18 de 24
Ilustración 30. Music Index embebido en el sitio web de Joomla
4.2. Instalación de servidor de streaming con IceCast
El proceso de instalación consiste en los siguientes pasos
Ilustración 31. Servidor IceCast recién instalado
Instalar icecast para hacer el servidor de streaming, e instalar ices2 para tener una lista de
reproducción y que el streaming sea en diferido. También se instalan unas herramientas de
audio.
$ sudo apt-get install icecast2 ices2 vorbis-tools
Se edita el archivo de configuración de icecast con los siguientes parámetros
$ sudo vi /etc/icecast2/icecast.xml
<authentication>
<source-password>password</source-password>
<relay-password>password</relay-password>
<admin-user>admin</admin-user>
Por: Héctor Garduño Real
Máster en Dirección e Ingeniería de Sitios Web Difusión de Contenidos Multimedia en la Web
05 de abril de 2015 Página 19 de 24
<admin-password>password</admin-password>
</authentication>
<hostname>localhost</hostname>
<listen-socket>
<port>8000</port>
</listen-socket>
Se edita el archive de demonio de icecast para que se inicie el servicio automáticamente, para
lo cual debe cambiarse a “ENABLE=true”
$ sudo vi /etc/default/icecast2
Para que los cambios surtan efecto hay que reiniciar el servidor
$ sudo /etc/init.d/icecast2 resstart
Ya que ices2 no hace una instalación completa, es necesario crear una carpeta y copiar en
ella una lista de reproducción que incluye por default.
$ sudo mkdir /etc/ices2
$ sudo cp /usr/share/doc/ices2/examples/ices-playlist.xml /etc/ices2/
Para que el servicio funcione adecuadamente, debe configurarse la lista de reproducción para
contener lo siguiente.
$ sudo vi /etc/ices2/ices-playlist.xml
<background>1</background>
<metadata>
<name>Héctor Garduño Real</name>
<genre>UNIR</genre>
<description>Sito web de streaming</description>
</metadata>
<param name="file">/home/ubuntu/playlist.txt</param>
<param name="random">1</param>
<param name="once">0</param>
<hostname>localhost</hostname>
<port>8000</port>
<password>password</password>
<mount>/music.ogg</mount>
Posteriormente será necesario crear la carpeta de registros para ices
$ sudo mkdir /var/log/ices
Por: Héctor Garduño Real
Máster en Dirección e Ingeniería de Sitios Web Difusión de Contenidos Multimedia en la Web
05 de abril de 2015 Página 20 de 24
Y crear un archivo que sea el playlist que tenga todas las rutas de los archivos de música
$ sudo gedit /home/ubuntu/playlist.txt
/home/ubuntu/cacncion1.ogg
/home/ubuntu/cacncion1.ogg
Luego hay que cargar la lista de reproducción al streaming
$ sudo ices2 /etc/ices2/ices-playlist.xml &
4.3. Instalación de RAR Radio
Para realizar la instalación de esta extensión se procede del mismo modo que se hizo anteriormente
con “All Video Share” y con “JBControl”, es decir, ir a la página, descargar el archivo, y luego desde
el panel de control de Joomla, instalarlo.
Ilustración 32. Página web de RAR Radio
Ilustración 33. Cargar e instalar RAR Radio en Joomla
Si la instalación se realizó sin problemas debería mostrarse lo siguiente.
Por: Héctor Garduño Real
Máster en Dirección e Ingeniería de Sitios Web Difusión de Contenidos Multimedia en la Web
05 de abril de 2015 Página 21 de 24
Ilustración 34. Instalación exitosa de RAR Radio
Para configurar RAR Radio para que aparezca en la página principal debe realizarse lo siguiente. Ir a
la edición del menú llamado “Explorar Videos” y ahí, desde la pestaña “Asignación de módulos”
activar RAR Radio con los parámetros que se muestran a continuación. RAR Radio debe tener la
URL del servidor IceCast recién instalado y la posición “lower” del tema JBCore
Ilustración 35. Activar RAR Radio para que se muestre en la página principal
Ilustración 36. Insertar RAR Radio en una página
Por: Héctor Garduño Real
Máster en Dirección e Ingeniería de Sitios Web Difusión de Contenidos Multimedia en la Web
05 de abril de 2015 Página 22 de 24
El resultado de instalar RAR Radio es como el que se muestra en la siguiente imagen.
Ilustración 37. RAR Radio insertado y funcionando en la página principal
Por: Héctor Garduño Real
Máster en Dirección e Ingeniería de Sitios Web Difusión de Contenidos Multimedia en la Web
05 de abril de 2015 Página 23 de 24
5. CREACIÓN DE UN VIDEO EN ADOBE PREMIERE
El video fue realizado usando Adobe Premiere que incluye audios, algunos textos y por supuesto el
video mismo.
Ilustración 38. Edición de video en Adobe Premiere
Ilustración 39. Exportación del proyecto a un video extensión AVI
Por: Héctor Garduño Real
Máster en Dirección e Ingeniería de Sitios Web Difusión de Contenidos Multimedia en la Web
05 de abril de 2015 Página 24 de 24
Ilustración 40. Reproducción del video justo en el momento que aparecen los créditos del autor
Ilustración 41. Directorio del proyecto con todos los archivos fuente, junto con los videos en varios formatos
top related