capítulo 4 desarrollo de la aplicación. -...

Capítulo 4

Desarrollo de la aplicación.

4.1. Introducción.

Después de la introducción realizada a las distintas herramientas de trabajo, nos encontramos

en condiciones de comenzar con el desarrollo de la aplicación. En este capítulo de la memoria se

procede a explicar cómo se ha implementado y cómo cumple con las funcionalidades requeridas

la aplicación que se ha desarrollado.

En primer lugar, comentaremos detalladamente toda la parte desarrollada para Django. A

continuación, se explicarán los scripts programados para la conversión entre formatos de vídeo

y el script para guardar y convertir un vídeo de una determinada URL. Finalmente, se explica

el desarrollo del reproductor de vídeo Web.

4.2. Aplicación servidora de vídeos.

Toda la aplicación ha sido desarrollada bajo el mismo proyecto Django, al cual se le añadirá

solo una aplicación que ha sido denominada videos.

A lo largo de esta memoria se ha comentado en varias ocasiones el problema y debate en torno

a los formatos que se pretende utilizar para la distribución de vídeos en la Web mediante el

uso de la etiqueta video de HTML 5. En la actualidad los navegadores barajan sus opciones en

torno a tres formatos de vídeo distintos. Estos formatos son los formatos Ogg, MP4 y WebM.

Para muchos no tiene sentido pretender mediante esta etiqueta la distribución de archivos

multimedia vía Web utilizando tecnologías abiertas y libres de patentes (Javascript, HTML,

59

4.2. APLIC. SERV. DE VÍDEOS. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.

CSS,...) para luego utilizar códecs de vídeo con licencias privadas como es el caso del códec

H.264. De este modo, para que el navegador soporte el vídeo codificado en este formato, es

necesario que pague la licencia de uso de la patente al creador del códec.

Cada navegador Web elegirá libremente qué formatos desea compatibilizar con su aplicación

y cuáles no. Esto provoca el hecho de que un archivo de vídeo no se pueda visualizar en todos

los navegadores. Mozilla Firefox, por ejemplo, se ha negado a pagar las licencias por el uso del

códec H.264, por lo que ha impulsado el apoyo por la utilización del códec libre de patente

Ogg. Por ello, es conveniente y recomendable que al incluir un vídeo en una página Web, éste

se encuentre en al menos dos de los formatos citados anteriormente, con el fin de que el medio

se pueda reproducir y visualizar correctamente en todos los navegadores Web, o al menos en

la gran mayoría de ellos.

Observando el cuadro 3.7 sería suficiente si el vídeo se encuentra en los formatos MP4 y

Ogg, ya que estando en estos dos formatos el vídeo se visualizaría en todos los navegadores

en estudio. Pero para una mayor amplitud del proyecto se han desarrollado los comandos

necesarios para realizar la conversión a los tres tipos de archivos.

Además de la comentada anteriormente, la aplicación implementará otra serie de funcionali-

dades, la cuales se detallarán en el próximo apartado de esta memoria.

En esta parte del proyecto procedemos a explicar toda la funcionalidad, modo de funciona-

miento y desarrollo de esta aplicación Web desarrollada bajo el framework Django.

4.2.1. Especificaciones.

Lo primero que tenemos que tener en cuenta serán las funcionalidades y objetivos que debe

cumplir la aplicación. Detallamos dichas funcionalidades a continuación:

• La aplicación deberá ofrecer al usuario la posibilidad de subir archivos de vídeo al servidor

Web que la contenga. El usuario debe poder realizar esto mediante dos formas distintas:

◦ Se ofrecerá la posibilidad de subir un vídeo que se aloja en el ordenador del cliente.

◦ En la otra opción el usuario podrá subir un vídeo al servidor aportando una dirección

URL. Ésta bien será una dirección de vídeo bajo demanda o bien será una dirección

HTTP que esté recibiendo un vídeo en streaming.

60


• Una vez subido el vídeo al servidor, la aplicación, en función del formato del vídeo, rea-

lizará un proceso de conversión de dicho vídeo a los formatos compatibles con HTML

5, de tal forma que el vídeo pueda ser reproducido por los navegadores Web más im-

portantes. Mientras se esté realizando este proceso, el usuario podrá seguir navegando

por la Web, evitando que tenga que permanecer a la espera de que finalice el proceso

de conversión, ya que este proceso suele tardar algunos minutos en completarse.

• Todas las variedades de un mismo archivo de vídeo se guardarán con el mismo nombre,

cambiando solo la extensión del mismo, según en el formato en que se encuentre.

• Todos los archivos multimedia se alojarán en un mismo directorio.

El funcionamiento de la aplicación, siguiendo las especificaciones de la misma, será el siguiente:

1. El usuario abrirá en un navegador Web la página raíz de la aplicación, la cual mostrará

texto con una breve descripción de la aplicación, así como dos enlaces, cada uno de los

cuales referencian a dos URLs del proyecto distintas.

2. Cuando el usuario haga clic en alguno de los dos enlaces se accederá a una página que

mostrará un formulario que el usuario deberá rellenar. Este formulario varía según el

enlace que haya pinchado el cliente.

3. El usuario deberá rellenar todos los campos del formulario correctamente. Cuando el

usuario haga clic en el botón de envío del formulario (submit), se comprobarán los

campos introducidos.

4. Si contienen errores se volverá a mostrar el formulario con los correspondientes mensajes

de error.

5. Si en cambio ha introducido bien todos los campos se redireccionará a una página que

mostrará un mensaje de texto informando al usuario que el proceso de conversión del

vídeo se está realizando correctamente, y que mientras tanto puede seguir visitando la

Web. Además le dará la dirección donde podrá visualizar el contenido del vídeo una vez

finalizado el proceso.

4.2.2. settings.py.

Como ya se ha dicho lo primero a realizar en un proyecto Django tras ejecutar el comando

de inicio del proyecto, será establecer las configuraciones iniciales del proyecto a través del

archivo settings.py.

61


El comando para iniciar el proyecto es el siguiente:

$ django−admin . py s t a r t p r o j e c t s r c

donde src será el nombre del directorio que contendrá todo el código del proyecto.

Para este proyecto en concreto se han realizado las siguientes configuraciones en el archivo

settings.py:

• Configuración de la base de datos.

Antes de nada, se ha creado una base de datos utilizando como motor MySQL. Los comandos

ejecutados para esto han sido los siguientes:

$ mysql −u r oo t −p123456

mysql> c r e a t e da tabase p l a y e r c h a r a c t e r set u t f 8 ;

Por lo que el nombre que se ha asignado a la base de datos del proyecto es player. El usuario

dueño y creador de la base de datos es el usuario root y la contraseña de MySQL para

poder acceder a la misma es 123456. Además, al crear la base de datos se ha establecido

como codificación de caracteres el sistema UTF-8 (8-bit Unicode Transformation Format).

Las variables de configuración de base de datos del archivo settings.py quedan por tanto

como se muestra a continuación:

DATABASE_ENGINE = ’ mysql ’

DATABASE_NAME = ’ p l a y e r ’

DATABASE_USER = ’ r oo t ’

DATABASE_PASSWORD = ’ 123456 ’

• Cambio de idioma y zona temporal.

Se ha modificado el idioma al español y se establece como zona temporal Europe/Madrid. Esto

se realiza en las variables TIME_ZONE y LANGUAGE_CODE del archivo settings.py:

TIME_ZONE = ’ Europe /Madrid ’

LANGUAGE_CODE = ’ es ’

62


• Establecer el directorio raíz del proyecto.

En el archivo settings.py existe una variable denominada PROJECT_ROOT que será utili-

zada para almacenar el directorio raíz del proyecto Django. En este caso la raíz del proyecto

es:

PROJECT_ROOT = ’ /home/ a l b a / pfc−a l b a / d jango / s r c / ’

• Configuración de directorios para archivos estáticos.

Para el proceso de subida de archivos de vídeo se han tenido que establecer tres variables en

el archivo settings.py: STATIC_ROOT, STATIC_URL y STATICFILES_DIRS.

STATIC_URL = ’ / r e s o u r c e s / ’

STATIC_ROOT = os . path . j o i n (PROJECT_ROOT, ’ r e s o u r c e s ’ )

STATICFILES_DIRS = (

os . path . j o i n (PROJECT_ROOT, ’ r e s o u r c e s ’ , ’ media ’ ) ,

)

• Configuración de la variable ROOT_URLCONF.

En la variable ROOT_URLCONF Django espera encontrar el paquete Python donde se

encuentra el mapeo de directorios del proyecto. En nuestro caso el paquete es src.urls.

ROOT_URLCONF = ’ s r c . u r l s ’

• Asignar directorio de plantillas.

También hay que decirle a Django en qué directorio podrá encontrar todas las plantillas que se

utilizan en el proyecto. En este caso todas las plantillas desarrolladas se han guardado dentro

del directorio template, el cual se encuentra dentro del directorio raíz src.

TEMPLATE_DIRS = (

os . path . j o i n (PROJECT_ROOT, ’ t emp l a t e s ’ ) ,

)

63


• Añadir aplicaciones.

Finalmente, se añaden las aplicaciones de las cuales haremos uso. En este caso añadimos las que

Django ya trae por defecto, que son las necesarias para el manejo del sitio de administración,

además de la aplicación que crearemos más adelante que será denominada videos.

INSTALLED_APPS = (

’ d jango . c o n t r i b . auth ’ ,

’ d jango . c o n t r i b . c o n t e n t t y p e s ’ ,

’ d jango . c o n t r i b . s e s s i o n s ’ ,

’ d jango . c o n t r i b . s i t e s ’ ,

’ d jango . c o n t r i b . admin ’ ,

’ v i d e o s ’ ,

)

El archivo settings.py completo se muestra en el apéndice A.

4.2.3. models.py.

Cada vez que un usuario suba un vídeo al servidor, ya sea directamente desde su archivo local

o aportando una dirección URL, se creará una instancia en la base de datos del proyecto.

Se crean por tanto dos clases de modelos diferentes: uno para archivos cargados desde el

disco local del cliente (class Video) y otro para los vídeos que son aportados mediante alguna

dirección (class Url). Además, se ha creado una clase para los formatos de archivos de vídeo

que soportará la aplicación (class Format). Cada instancia de las clases Video y Url estará

relacionada con una instancia de la clase Format.

Por tanto, se han definido tres clases de modelos diferentes en el archivo models.py de la

aplicación videos, las cuales se detallan a continuación:

• Class Video: cuando un usuario suba un vídeo que se encuentra almacenado en su disco

local, se creará una instancia de este tipo en la base de datos. Esta clase contiene los

siguientes campos:

◦ name: de tipo CharField y limitado a diez caracteres, se utiliza para asignar un

nombre al archivo de vídeo.

64


◦ description: en este campo se almacena una descripción explicativa del contenido

del vídeo. Este campo es de tipo TextField y ha sido limitado su tamaño a mil

caracteres.

◦ format: este campo será de tipo ForeignKey y hace referencia a una instancia de

la clase Format.

◦ image: este campo permitirá al usuario subir una imagen que se utilizará como

imagen del vídeo cuando este todavía no haya comenzado a descargarse. Es de

tipo ImageField y la imagen se cargará en la ruta especificada por la variable

STATICFILES_DIRS definida en el archivo settings.py.

◦ video: este campo permite al usuario subir un archivo al servidor. Para nuestra

aplicación se utiliza con el fin de que el usuario pueda cargar un archivo de vídeo.

Es de tipo FileField y el archivo se guardará en la ruta especificada por la variable

STATICFILES_DIRS definida en el archivo settings.py.

• Class Url: cuando un usuario suba un vídeo proporcionando una URL de Internet, se

creará una instancia de este tipo en la base de datos. Esta clase contiene los siguientes

campos: name, description, format, image y url. El uso de los cuatros primeros será el

mismo que el utilizado en la clase Video.

◦ url: este campo contendrá la dirección URL donde se almacena el vídeo que se

desea guardar en el servidor. Es de tipo ULRField.

• Class Format: antes de poner en funcionamiento la aplicación, se crearán tantas ins-

tancias de este tipo en la base de datos, como tipos de formatos de vídeos pretendemos

que la aplicación soporte. Este modelo contiene un solo campo:

◦ type: campo de tipo CharField que guardará un tipo de formato de vídeo. En

nuestro caso se han creado las instancias con los valores mp4, ogg, webm, avi, flv,

mpeg.

El archivo models.py se muestra en el cuadro 4.1.

4.2.4. forms.py.

En nuestra aplicación, todos los campos que contienen los modelos Video y Url tienen que

ser rellenados por el usuario que pretende subir el vídeo. De este modo debe haber dos tipos

65


from d jango . db import models

c l a s s Video ( models . Model ) :name = models . Cha rF i e l d ( max_length=10)d e s c r i p t i o n = models . T e x tF i e l d ( max_length=1000)format = models . Fore ignKey ( ’ Format ’ )image = models . ImageF i e l d ( upload_to=’ r e s o u r c e s /media / ’ )v i d e o = models . F i l e F i e l d ( upload_to=’ r e s o u r c e s /media/ ’ )

def __unicode__( s e l f ) :return s e l f . name

c l a s s Ur l ( models . Model ) :name = models . Cha rF i e l d ( max_length=10)d e s c r i p t i o n = models . T e x tF i e l d ( max_length=1000)format = models . Fore ignKey ( ’ Format ’ )image = models . ImageF i e l d ( upload_to=’ r e s o u r c e s /media / ’ )u r l = models . URLFie ld ( )

def __unicode__( s e l f ) :return s e l f . name

c l a s s Format ( models . Model ) :t ype = models . Cha rF i e l d ( max_length=5)

def __unicode__( s e l f ) :return s e l f . t ype

Cuadro 4.1: Código archivo models.py

de formularios distintos, uno para cada tipo de modelo, y la aplicación mostrará uno u otro

según el método de subida que haya seleccionado el usuario en la página raíz de la aplicación.

Así, se ha creado un archivo forms.py para definir estos dos formularios. Este archivo contendrá

por tanto dos clases: VideoForm y UrlForm. Estas extenderán a la clase ModelForm, la cual

se ha explicado con anterioridad en la memoria de este proyecto.

El código completo del archivo se muestra en el cuadro 4.2.

4.2.5. urls.py.

En este archivo, como se ha comentado anteriormente, se establece la relación entre una

dirección URL y el código Python asociado a dicha dirección. Este código Python se ejecuta

tras la petición de una dirección Web y recibe en Django el nombre de vista.

66


from d jango . forms import ModelFormfrom v i d e o s . models import Video , U r l

c lass VideoForm ( ModelForm ) :c lass Meta : model = Video

c lass UrlForm ( ModelForm ) :c lass Meta : model = Ur l

Cuadro 4.2: Código archivo forms.py

Se han definido seis direcciones distintas en este proyecto:

• http://localhost:8080/index/

Esta es la dirección raíz de la apliación Web y está asociada con la vista index del paquete

’videos.views’. Si el usuario accede a esta dirección se mostrará dos mensajes, uno por si desea

cargar el vídeo desde su ordenador y otro por si desea proporcionar una URL. Cada mensaje

contiene una referencia a una dirección distinta del proyecto.

• http://localhost:8000/add_videos/

Se llegará a esta dirección desde la dirección raíz si el usuario elije la opción de subir un vídeo

localizado en su disco local. Esta dirección nos mostrará un formulario que el usuario deberá

rellenar adecuadamente para que la carga del vídeo se realice correctamente. Está asociada a

la vista ’videos.views.videos’.

• http://localhost:8000/add_url/

Si el usuario elige la opción de subir un archivo de vídeo a partir de una URL de Internet,

se redireccionará a esta página, la cual mostrará un formulario que el usuario deberá rellenar

correctamente para que el vídeo se guarde correctamente en el servidor de la aplicación. Está

asociada a la vista ’videos.views.urls’.

• http://localhost:8000/videos/

Si el usuario accede a esta dirección, se mostrará una página con el vídeo que ha subido el usua-

rio en el servidor. En esta página haremos uso del reproductor de vídeo diseñado y por tanto el

usuario tendrá la posibilidad de realizar ciertas acciones sobre el contenido multimedia que está

visualizando. Esta dirección ejecutará el código de la función vista ’videos.views.seevideos’.

67


• http://localhost:8000/admin/

Esta dirección se utiliza para la administración del servidor. En ella se pueden visualizar los

tipos de modelos, las bases de datos creadas con sus instancias, los usuarios con acceso a la

aplicación, etc.

• Añadir paquete stactifiles.urls.

Cada vez que se suba un archivo al servidor se añadirá una URL en el archivo urls.py del

paquete stactifiles para que dicho archivo disponga de una dirección y pueda ser servido

correctamente. Se incluye por tanto también, el paquete ’staticfiles.urls’ en el archivo urls.py.

El código completo del archivo urls.py se muestra en el cuadro 4.3. Y en el cuadro 4.4 vemos

las relaciones entre las URLs y las funciones vistas del proyecto.

from d jango . con f . u r l s . d e f a u l t s import ∗

from d jango . c o n t r i b import adminadmin . a u t o d i s c o v e r ( )

u r l p a t t e r n s = p a t t e r n s ( ’ ’ ,( r ’âdmin/ ’ , i n c l u d e ( admin . s i t e . u r l s ) ) ,( r ’^ i nd e x /$ ’ , ’ v i d e o s . v i ews . i n d e x ’ ) ,( r ’âdd_videos /$ ’ , ’ v i d e o s . v i ews . v i d e o s ’ ) ,( r ’âdd_ur l s /$ ’ , ’ v i d e o s . v i ews . u r l s ’ ) ,( r ’^ v i d e o s /$ ’ , ’ v i d e o s . v i ews . s e e v i d e o s ’ ) ,

)

from d jango . con f import s e t t i n g s

i f s e t t i n g s .DEBUG:u r l p a t t e r n s += pa t t e r n s ( ’ ’ ,

( r ’ ’ , i n c l u d e ( ’ s t a t i c f i l e s . u r l s ’ ) ) ,)

Cuadro 4.3: Código archivo urls.py

URL VISTA

http://localhost:8080/index/ ’videos.views.index’http://localhost:8080/add_videos/ ’videos.views.videos’http://localhost:8080/add_urls/ ’videos.views.urls’http://localhost:8080/videos/ ’videos.views.seevideos’

Cuadro 4.4: Relaciones URL-vista

68


4.2.6. views.py.

Las vistas en Django son funciones que recibirán como argumento una petición HTTP y que

por lo general retornarán una plantilla que contiene el código HTML de una página Web.

Normalmente el funcionamiento de las funciones del archivo views.py es el siguiente:

• El usuario, mediante alguna acción que realice (hacer clic en algún enlace, introducir

una dirección en el navegador,...) generará una petición HTTP.

• Django entonces buscará en el archivo urls.py a qué vista le corresponde la dirección

Web a la que hay que direccionar y comenzará a ejecutar dicha función.

• La función vista recibe como argumento un objeto que contiene detalles sobre la petición.

Después de realizar las operaciones que sean necesarias, la función devolverá una plantilla

que contendrá el código HTML necesario para la correcta visualización de la página Web

a la que le corresponde la dirección URL.

Para nuestra aplicación, en este fichero se han definido cuatro funciones de vistas. Además, se

han implementado dos clases que servirán para realizar el proceso de conversión o el proceso

de guardar el vídeo de una dirección Web determinada.

Las funciones vistas programadas en esta aplicación son las que se detallan en los próximos

subapartados. El archivo views.py es el que se muestra en el apéndice B.

4.2.6.1. videos.views.index.

Función que se ejecuta al introducir la dirección Web http://localhost:8080/index. Esta fun-

ción lo único que hace es devolver el template index.html que será la página raíz de la

aplicación y que se explica en el apartado 4.2.7.1. En ella se muestran dos enlaces, uno para

poder subir un vídeo desde el directorio local y otro para subir un vídeo proporcionando un

alojamiento Web.

4.2.6.2. videos.views.videos.

Lo primero que hace la función videos es comprobar si el método de acceso a la página ha

sido POST o GET.

69


Si se ha accedido a esta página pinchando en el enlace correspondiente de la página raíz del pro-

yecto, la petición HTTP será GET y entonces este método llamará a la función VideoForm()

que se definió en el archivo forms.py para iniciar un objeto de este tipo. A continuación, se

retorna la plantilla form.html a la que se le pasa como contexto el objeto VideoForm, creado

anteriormente, y la variable STATIC_URL del archivo settings.py.

En cambio, si el método de acceso a la página ha sido POST será porque el usuario ha

rellenado el formulario y ha pinchado en el botón submit de dicho formulario. En este caso, la

función vista videos crea un objeto tipo VideoForm() con los datos que se han introducido.

Esto se consigue fácilmente pasándole a la función VideoForm() los objetos request.POST

y request.FILES de la petición HTTP. En request.POST tendremos los datos introducidos

en los campos name, description y format del modelo de formulario. Y en request.FILES

el valor de los campos image y video; estos últimos serán las rutas de los archivos que haya

seleccionado el usuario.

Una vez creado el objeto validamos el formulario mediante la función is_valid(). Para ello se

ejecuta el comando form.is_valid().

Si no es válido, bien porque falte algún campo por rellenar o porque el valor introducido no se

ajuste a lo especificado por el formulario, entonces se retornará la plantilla form.html al que

le pasamos como contexto el objeto form creado con los datos introducidos por el usuario. La

nueva página mostrará los mensajes de error producidos.

Si en cambio, el formulario es válido, entonces se procederá a comprobar que la extensión

del archivo que se ha seleccionado se corresponde con el tipo de formato introducido en el

formulario. Si concuerda entonces se crea un objeto tipo Video con los datos introducidos y

lo guardamos en la base de datos.

Seguidamente, se iniciará un nuevo hilo en segundo plano que iniciará el proceso de conversión

del vídeo a los formatos HTML5 y se retorna el template video_guardado.html, que mostrará

una página que anunciará al usuario que el vídeo se ha guardado correctamente y que se ha

iniciado el proceso de conversión de formato del vídeo.

4.2.6.3. videos.views.urls.

El procedimiento seguido por esta vista es muy similar al explicado anteriormente para la vista

videos, pero en este caso, se crea un objeto de tipo UrlForm, en lugar de VideoForm.

70


En primer lugar se comprueba si el método por el que se ha accedido a la URL es GET o

POST. Si ha sido por el método GET entonces se crea el objeto UrlForm vacío y se retorna

el template form.html que mostrará el formulario al usuario.

En cambio si el método por el que se ha accedido es POST, entonces se creará el objeto

UrlForm con los datos introducidos por el usuario y seguidamente se procede a validar dichos

datos.

Si estos son válidos se crea entonces un objeto Url para almacenar estos datos en la base de

datos y si no lo son se muestran los mensajes de error.

Finalmente se inicia el proceso de subida del vídeo al servidor como un nuevo proceso en

segundo plano y se retorna el template video_guardado.html.

4.2.6.4. videos.views.seevideos.

Función que se ejecuta al introducir la dirección Web http://localhost:8080/videos/. Esta

función lo único que hace es devolver el template player.html que será la página donde se

visualizará el vídeo que ha cargado el usuario.

4.2.6.5. Class Convert.

A continuación, explicamos el funcionamiento de la clase Convert() creada para la conversión

del vídeo.

La clase convert será una subclase del módulo de Python threathing.Thread el cual propor-

ciona mecanismos para trabajar con múltiples hilos. La clase contiene dos funciones:

• __init__: para inicializar las variables.

• run: este método inicia la ejecución del script convert.sh. Para eso hace uso del módulo

os.system de Python, el cual es capaz de ejecutar líneas de comandos como si de un

terminal se tratase.

4.2.6.6. Class saveVideo.

En este subapartado se explica la clase saveVideo() creada para guardar el vídeo que se aloja

en la URL dada por el usuario en el servidor.

71


La estructura de la clase saveVideo() es igual a la de la clase convert(). En este caso, se ejecuta

primero el script save.sh que guardará el vídeo que proporciona la dirección suministrada por

el usuario en el servidor. El vídeo se guardará directamente en el formato MP4, se encuentre

en el formato que se encuentre. Tras esto, ejecuta el script convert.sh para convertir el vídeo

del formato MP4 a los formatos Ogg y WebM.

4.2.7. Templates.

En este proyecto se tienen cuatro URLs definidas y cada una de ellas será una página HTML

diferente, por lo que se han diseñado un total de cuatro plantillas (templates) para esta

aplicación, una para cada URL del proyecto.

4.2.7.1. index.html.

Esta es la página raíz del proyecto. La página contiene texto informativo y dos enlaces que

redireccionarán a otras URLs del proyecto si el usuario hace clic sobre alguno de ellos.

El primero de los enlaces será para acceder al formulario que debe rellenar el usuario si lo

que pretende es subir un vídeo desde su propio ordenador. Si el usuario hace clic sobre el

primer enlace se accederá a la página http://localhost:8000/add_videos/, dirección a la que

le corresponde según el archivo urls.py la vista ’videos.views.videos’.

En cambio si se pincha el segundo enlace redirecciona a la página http://localhost:8000/add_urls/

y por tanto se ejecutará la función de vista ’videos.views.urls’.

El código de esta plantilla se muestra en el cuadro 4.5.

Y en la figura 4.1 podemos ver una muestra de la página.

4.2.7.2. form.html.

Esta plantilla muestra el formulario que el usuario debe rellenar para poder subir un vídeo al

servidor. Este template es devuelto tanto si se accede a la página /add_videos/ como si se

accede a /add_urls/. El contexto varía según desde dónde se haya accedido. Si el formulario

se ha generado por acceder a la dirección /add_videos/ la función que se habrá ejecutado

será videos, y por tanto al contexto se le pasa un objeto formulario de tipo VideoForm. El

formulario que se muestra en este caso es el de la figura 4.2.

72


<!DOCTYPE HTML><html>

<head>< t i t l e> P la y e r Html5 </ t i t l e>< l i n k r e l=" s t y l e s h e e t " type=" t e x t / c s s " href=" c s s / p l a y e r . c s s "/>

</head><body>

<h2>Ap l i c a c i ó n s e r v i d o r a de Django</h2><p>Ap l i c a c i ó n para s u b i r a r c h i v o s de v í d e o a l s e r v i d o r yr e a l i z a r p r o c e s o s de c o n v e r s i ó n a l o s fo rmatos HTML</p><p>S i q u i e r e s s u b i r un v i d e o desde tu ordenador , c l i c k aqu í

<a href="/add_videos /"> Sub i r v í d e o </a> </p><p>S i q u i e r e s s u b i r un v i d e o desde una u r l , c l i c k aqu í

<a href="/ add_ur l s /"> Sub i r v í d e o </a> </p></body>

</html>

Cuadro 4.5: Código archivo index.html

Figura 4.1: Página index.html

En cambio, si se ha generado por acceder a la página http://localhost:8000/add_urls/, en-

tonces el objeto formulario que se pasará como contexto será de tipo UrlForm. Este formulario

se muestra en la figura 4.3.

Si el usuario ha introducido incorrectamente algún campo del formulario y pincha en el botón

Upload del formulario se volverá a cargar esta misma plantilla pero mostrando entonces los

mensajes de error producidos. Un ejemplo de formularios con mensajes de error se pueden

visualizar en las figuras 4.4 y 4.5.

El código de esta plantilla HTML se muestra en el cuadro 4.6.

73


Figura 4.2: Formulario subir vídeo desde disco local

4.2.7.3. video_guardado.html.

Esta plantilla se carga cuando el usuario rellena correctamente todos los campos del formulario

y hace clic en el botón Upload. Entonces comienza el proceso de conversión de vídeo y se

muestra esta página que informa al usuario de que el vídeo se ha cargado correctamente en el

servidor y que se ha iniciado la conversión de formatos del vídeo.

El código HTML del template es el que se muestra en el cuadro 4.7. Vemos que incluye además

un enlace a la dirección raíz de la aplicación para que el usuario pueda seguir navegando por

la Web sin necesidad de permanecer a la espera de que termine la conversión.

Y en la figura 4.6 se muestra una figura con la pantalla.

4.2.7.4. player.html.

Plantilla para la visualización del vídeo que se haya subido a la aplicación. En este archivo se

definen las partes y elementos del reproductor. El contenido de este archivo y el funcionamiento

del reproductor se explica en el apartado 4.4.

74


Figura 4.3: Formulario subir vídeo desde URL

4.2.8. Directorio resources.

En el directorio resources, el cual se encuentra dentro del directorio raíz del proyecto, se alojan

una serie de archivos que la aplicación necesitará como recursos para el correcto funcionamiento

de la misma. Este directorio está compuesto por cuatro subdirecorios:

• css: contiene una serie de archivos que especifican el estilo de ciertas partes del contenido

Web de la aplicación. Los archivos que componen este directorio y su funcionalidad son

los siguientes:

◦ player.css: hoja de estilo para el reproductor multimedia. Se hace uso de este

archivo al acceder a la página http://localhost:8000/videos/, la cual mostrará el

reproductor diseñado en la sección 4.4.3 de este mismo capítulo de la memoria. El

código del archivo se explica en dicha parte de la memoria.

◦ spinner.css: archivo en el que se especifica el diseño de una de las partes del

reproductor de vídeo. El contenido del archivo se explica en el apartado 4.4.3 de la

memoria.

◦ form.css: archivo que define el estilo del formulario que se mostrará al usuario en las

páginas http://localhost:8000/add_videos/ y http://localhost:8000/add_urls/

de la aplicación.

◦ imagenes: además en este directorio se guardan también ciertas imágenes que

utilizan las hojas de estilos mencionadas anteriormente.

75

4.3. SCRIPTS FFMPEG. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.

Figura 4.4: Formulario con errores.

• js: directorio donde se almacena el archivo player.js que contiene todo el código Javas-

cript necesario para la implementación de las funciones del reproductor multimedia. El

código se explica en el apartado 4.4.4 de la memoria.

• media: directorio para almacenar los archivos de vídeos subidos por el usuario, así como

las imágenes y los vídeos que se crean tras el proceso de conversión.

• script: directorio donde se almacenan los scripts programados para los procesos de

conversión de vídeo y el proceso de guardar un vídeo alojado en una dirección Web en

el servidor. En este directorio se encuentran los archivos convert.sh y save.sh los cuales

se explican en el próximo apartado de esta memoria.

4.3. Scripts FFmpeg.

Antes de poder lanzar los scripts necesarios para la conversión de vídeo, es necesario previamen-

te realizar la instalación y configuración de la aplicación FFmpeg y de las librerías necesarias

76

4.3. SCRIPTS FFMPEG. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.

Figura 4.5: Otro ejemplo de formulario con errores.

para la codificación de los archivos en los formatos deseados. Este proceso se detalla en el

apéndice E.

4.3.1. convert.sh.

Se ha visto en el apartado anterior cómo se lanza el script necesario para realizar el proceso

de conversión del vídeo. En este apartado se van a explicar los comandos que será necesario

ejecutar para realizar la conversión en sí del archivo.

En principio, se ha considerado suficiente con pasar el vídeo a los formatos MP4 y Ogg ya que

alguno de estos dos es soportado por los navegadores más conocidos. El script en primer lugar

comprueba la extensión del archivo que ha subido el usuario: si es MP4 entonces sólo tendrá

que hacer la conversión al formato Ogg; si está en el formato Ogg realizará la conversión

al formato MP4; y si no se encuentra en ninguno de estos dos formatos, entonces realiza la

conversión a los dos.

Los formatos de entrada sobre los que se han realizado las pruebas son los siguientes: Ogg,

MP4, WebM, AVI, WMV, MKV, MOV y MPG.

El código de este script se muestra en el cuadro 4.8.

77

4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.

<!DOCTYPE html><html xmlns=" ht tp ://www.w3 . org /1999/ xhtml "

xml : lang=" es " lang="es−es "><head>< t i t l e> P la y e r HTML5 </ t i t l e><meta http−equ i v="Content−Type"

content=" t e x t / html ; ␣ c h a r s e t=UTF−8"/>< l i n k r e l=" s t y l e s h e e t " type=" t e x t / c s s "

href="{{␣STATIC_URL␣}} c s s / form . c s s " /></head><body>

<div id=" contenedo r "><h2> Upload Video </h2><form act ion="" method=" pos t " enc type=" mu l t i p a r t / form−data ">

{{ form . as_p }}<input type=" submit " value="Upload">

</form></div>

</body></html>

Cuadro 4.6: Código archivo form.html

4.3.2. save.sh.

Este script convierte el vídeo localizado en la URL suministrada por el usuario en un vídeo con

formato MP4 y lo guarda en el servidor.

El código de este archivo se muestra en el cuadro 4.9.

4.4. Reproductor de vídeo.

Hasta la aparición de la versión 5 de HTML, para incluir vídeos en nuestras páginas Web era

necesario la instalación de plugins adicionales en nuestro navegador. Los plugins son aplicacio-

nes software que se relacionan con otra para aportarle mayor funcionalidad, normalmente una

funcionalidad muy específica. Esta aplicación adicional se ejecuta por la aplicación principal e

interactúa con ella a través de una API.

En el caso de los reproductores multimedia para páginas Web existen varias tecnologías que

desarrollan este tipo de aplicaciones. La más popular a día de hoy es el reproductor Adobe Flash

Player, desarrollado por Adobe Systems, utilizado en sitios tan populares como Youtube. Pero

esta es sólo una de las varias alternativas que existen. Empresas como Real Networks, Apple,

78


<!DOCTYPE HTML><html>

<head>< t i t l e> P la y e r Html5 </ t i t l e>< l i n k r e l=" s t y l e s h e e t " type=" t e x t / c s s " href=" c s s / p l a y e r . c s s "/>

</head><body>

<p>El v í d e o se ha guardado co r r e c t amen t e en e l s e r v i d o r ; )</p><p>Estamos p ro c ed i endo a c o n v e r t i r o t r o s fo rmatos compat i b l e s ,

para l a c o r r e c t a v i s u a l i z a c i ó n d e l v í d eob en todosl o s navegado re s </p>

<p>Mien t r a s puede s e g u i r v i s i t a n d o nu e s t r a<a href="/ i ndex /"> Web .</a></p>

<p>Gra c i a s !</p></body>

</html>

Cuadro 4.7: Código plantilla video_guardado.html.

Figura 4.6: Pantalla video_guardado.html

Microsoft cuentan con sus propias versiones de reproductor Web multimedia. La utilización de

una aplicación u otra es elección del creador del sitio, por lo que es habitual que, conforme

navegamos por la red, vayamos necesitando la instalación de todos estos plugins adicionales.

Finalmente tendremos instalados varios plugins en nuestros navegador, sólo con el fin de suplir

la funcionalidad de reproducir archivos multimedia en una página Web.

Con el fin de poner solución a este problema y estandarizar la reproducción de archivos mul-

timedia en las páginas Web, nacen las etiquetas video y audio de HTML 5. Estos nuevos

elementos junto con una API desarrollada por el mismo estándar, facilitan la tarea de incluir

vídeos en un documento HTML y evita la necesidad de instalar plugins adicionales. Con sólo

hacer uso de la etiqueta junto con la ruta asociada al archivo que deseamos adjuntar, ya po-

dremos visualizar o escuchar el contenido en la página Web. Siempre y cuando dicho archivo

se encuentre en un formato soportado por el navegador.

79


#!/ b in / bash##Sc r i p t que c o n v i e r t e l o s v í d e o s a l o s fo rmatos compa t i b l e s con html5#

NAME=$1EXT=$2STATIC_ROOT=$3MP4="mp4"OGV="ogv"

i f [ $EXT != $OGV ] ; then

f fmpeg −y − i $STATIC_ROOT/media/$NAME. $EXT−f ogg −b 2M −r 24 −vcodec l i b t h e o r a −ab 126k −a r 48k−acodec l i b v o r b i s $STATIC_ROOT/media/$NAME. ogv

e l s e [ $EXT != $MP4 ]f fmpeg −y − i $STATIC_ROOT/media/$NAME. $EXT−f mp4 −b 2M −r 24 −vcodec l i b x 2 6 4 −ab 126k −a r 48k−acodec l i b f a a c −vp re s low $STATIC_ROOT/media/$NAME.mp4

f i

Cuadro 4.8: Código script convert.sh

Pero es conveniente e interesante que el usuario pueda interactuar con la reproducción del

medio, es decir, es habitual que cuando se está reproduciendo un vídeo, se desee parar mo-

mentáneamente la reproducción del mismo y poder después continuar con la misma. Además,

puede que al usuario le interese ver solo una parte de todo el contenido del archivo, por lo

que también es interesante que el usuario pueda dar saltos en la reproducción, o por ejemplo,

desactivar o bajar el sonido, entre otras acciones.

Para el control de la reproducción de estos medios (inicio o pausa de la reproducción, control

sobre la intensidad del volumen,...) cada navegador implementa de forma nativa una interfaz

que nos permite realizar ciertas de estas acciones. Esta interfaz de controles se incorporan

fácilmente al objeto multimedia añadiendo el atributo controls en la etiqueta video o audio

mencionadas anteriormente.

De este modo, podríamos plantearnos por qué implementar nuestra propia interfaz de con-

troles para la reproducción de medios, si los navegadores incorporan una de forma nativa. A

continuación detallamos algunas de sus principales ventajas:

• Diseño: al implementar nuestro propio reproductor podemos elegir libremente la interfaz

y el diseño del mismo. Así, tendremos un reproductor diseñado a nuestro gusto, que

80


#!/ b in / bash##Sc r i p t que c o n v i e r t e l o s v í d e o s a l o s fo rmatos compa t i b l e s con html5#

URL=$1STATIC_ROOT=$2

ffmpeg − i $URL −f mp4 −b 2M −r 24 −vcodec l i b x 2 6 4−ab 126k −a r 48k −acodec l i b f a a c −vp re s low$STATIC_ROOT/media/ v i d eo .mp4

Cuadro 4.9: Código script save.sh

además tendrá el mismo aspecto en todos los navegadores. Esto proporciona una se-

ña de identidad y hace que el producto sea distinguible entre competidores. E incluso

podremos tener varias alternativas como interfaz o cambiar el diseño con el paso del

tiempo fácilmente si así se desea.

• Funcionalidad: al diseñar el reproductor podemos elegir las funciones que deseamos

que implemente. Además, siempre será posible ampliar o reducir estas funcionalidades

según la aplicación o el momento en que queramos utilizar el reproductor. También, es

importante pensar que se puede llevar una continua evolución sobre el reproductor, ya

que al encontrarse la especificación HTML 5 aún en desarrollo, es muy probable que

aparezcan nuevas funciones y nuevas características en la API que nos puedan interesar

incluir en nuestro reproductor.

• Interacción con el usuario: según las necesidades o tipo de aplicaciones que usarán el

reproductor, es posible que se requieran cambios en la interacción entre el usuario o

cliente y el reproductor.

Como desventaja frente a usar los controles que por defecto incorporan los navegadores se

podría decir que la única desventaja es el mayor uso de código, por lo que la página Web

resultará un tanto más pesada. Además del gasto de tiempo, trabajo y dinero que conlleva el

desarrollo del reproductor.

Pero en definitiva, se puede concluir que si se necesita hacer uso de vídeos en los proyectos

Web, se aconseja el desarrollo de su propio reproductor para vídeos, de modo que así podrá

darle el aspecto deseado y podrá definir las funciones que crea conveniente y personalizar con

todo detalle el funcionamiento del mismo.

En la sección 3.2, hemos visto una introducción a algunos de los nuevos elementos que define

el borrador de HTML 5. Estos elementos, que son los que utilizaremos para la creación del

81


reproductor de vídeo, son los elementos video, source y media. Además se han explicado

también los atributos y funciones más relevantes creados para el control de reproducción del

vídeo.

A continuación, veremos como hacer uso de estas nuevas características y funcionalidades para

desarrollar un completo y funcional reproductor de vídeo.

Lo primero que debemos tener en cuenta es que en el desarrollo del reproductor habrá tres

partes claramente diferenciadas.

• Código HTML: En primer lugar, debemos diseñar su código HTML, definiendo todos

y cada uno de los elementos que serán necesarios incluir para implementar todas las

especificaciones que se solicitan.

• Código CSS: A continuación, debemos dar forma y diseño a esas partes de modo que

sea intuitivo para el cliente, según las funciones que realizará. Para esta parte usaremos

el lenguaje CSS (Cascading Style Sheets).

• Código Javascript: finalmente debemos implementar las especificaciones y funciones que

se solicitan que debe cumplir el navegador. En este caso hay que utilizar el lenguaje de

programación interpretado Javascript. Además utilizaremos también la librería del mismo

lenguaje jQuery.

Se han creado por tanto tres archivos diferentes. En uno de ellos se incluye el código HTML

denominado player.html, en otro todo el código CSS al que hemos llamado player.css y por

último, un fichero para el código Javascript denominado player.js.

El fichero HTML se encuentra dentro del directorio principal del proyecto del reproductor. Los

archivos player.css y player.js se encuentran dentro de los subdirectorios css y js, respectiva-

mente. Además, se ha creado otro subdirectorio con el nombre de media para almacenar la

imagen y el vídeo de prueba en los distintos formatos soportados MP4 y Ogg.

4.4.1. Especificaciones.

Es conveniente, tanto para el diseño del reproductor como para el desarrollo del mismo, tener

claras las especificaciones que dicho reproductor debe cumplir y que por tanto debemos im-

plementar. Estas funciones vamos a dividirlas en dos grupos: las especificaciones principales y

fundamentales y otras especificaciones.

82


• Funciones principales: estas son las funciones básicas que cumple cualquier reproduc-

tor de vídeos.

◦ Funciones de pausa-reproducción: Existirán varias formas de pausar la reproducción

o de proseguir con la misma. En todas ellas el usuario tendrá que hacer clic en

alguna parte concreta del reproductor.

◦ Funciones de progreso: El usuario podrá hacer saltos en la reproducción. Bien podrá

saltar directamente a un punto concreto del vídeo, o bien podrá ir avanzando

o retrocediendo según el movimiento del ratón. Esto se podrá realizar tanto si

queremos avanzar el vídeo como si queremos retrocederlo.

◦ Funciones de tiempo: Además se considera oportuno mostrar el instante actual de

la reproducción en todo momento, así como la duración total del vídeo.

◦ Funciones de control de volumen: al igual que con el progreso del vídeo, se podrán

hacer saltos o subir y bajar el volumen del vídeo de forma progresiva mediante el

movimiento de ratón. Además, el reproductor debe darnos la opción de silenciar el

vídeo totalmente haciendo un solo clic, y poder después volver al estado anterior

del volumen.

◦ Funciones de pantalla completa: Podremos visualizar el vídeo a modo pantalla

completa mediante un clic del ratón. Debe ofrecer también la opción de volver a

su versión original.

• Otras funciones: se considera oportuno además añadir otras funciones secundarias al

reproductor, que en sí no son necesarias para una correcta reproducción de medios, pero

que sí son atrayentes incluir.

◦ Visualización de la interfaz: la interfaz de los controles de reproducción se mostrarán

siempre que el vídeo esté detenido. En el caso de que el vídeo esté en estado de

reproducción y el usuario permanezca unos cinco segundos con el ratón detenido,

estos controles se ocultarán, procediendo de nuevo a mostrarse en el momento en

el que el usuario comience de nuevo a mover el ratón.

◦ Ocultación del ratón: lo dicho anteriormente para la visualización de los controles

de reproducción nos sirve igualmente para la visualización del cursor del ratón. Este

permanecerá oculto si el vídeo se está reproduciendo y dicho cursor no se encuentra

en movimiento. Este volverá a mostrarse en cuanto vuelva a moverse el ratón.

◦ Modificación del menú contextual: En el menú contextual que tienen los navegado-

res al hacer clic con el botón derecho del ratón sobre un elemento HTML video se

nos permite mostrar los controles que el navegador implementa por defecto. Con el

83


fin de que el usuario no muestre también estos controles y se acaben superponiendo

ambos, se ha diseñado un nuevo menú que no incluye esta opción.

◦ Movimiento del spinner: el spinner será un elemento que de algún modo haga intuir

al usuario que el vídeo se está cargando. Este elemento se mostrará cuando el vídeo

esté siendo descargado pero aún no se disponga de información suficiente como

para comenzar con la reproducción del mismo.

4.4.2. Código HTML: Definiendo los elementos del reproductor.

Para esta parte del desarrollo debemos plantearnos de qué elementos deberá constar el repro-

ductor de forma que pueda cumplir con todas las especificaciones que se requieren. Utilizamos

para este apartado la versión 5 de HTML que como hemos dicho aún se encuentra en desa-

rrollo. Por ello hay que tener presente la compatibilidad de elementos y atributos usados con

los navegadores Web.

Las funciones que implemente el reproductor se ejecutarán generalmente tras una determinada

acción del usuario, como puede ser hacer clic sobre un determinado elemento del reproductor.

El reproductor tendrá dos partes principales, por un lado una pantalla de visualización y por

otro una barra para los controles de reproducción. En la barra de controles además, debe

haber varios botones que permitan al usuario realizar las acciones de comienzo o pausa de

la reproducción, activar o desactivar el sonido del vídeo y visualizar el vídeo a modo pantalla

completa o en modo normal. Además, se necesitará una barra que muestre el progreso del vídeo

y la carga del buffer. Sobre esta barra el usuario podrá avanzar o retroceder la reproducción

y otra barra para el control de la intensidad del volumen. También será conveniente incluir

marcas temporales que, por ejemplo indiquen cuanto tiempo lleva transcurrido la reproducción

del medio o cual es la duración del mismo.

Los anteriores son los elementos principales, pero aparte existen otros elementos secundarios.

Uno de ellos es un botón de reproducción situado en el centro de la pantalla de visualización,

otro de ellos es un elemento que haga intuir al usuario que el vídeo está siendo descargado. Y

finalmente, se ha decidido cambiar el menú contextual mostrado en el vídeo.

En este apartado vamos a ir detallando todos los elementos que se han definido en el archivo

player.html y que compondrán por tanto el reproductor Web multimedia. Además, indicare-

mos cuales son el identificador y la clase de cada elemento. Estos dos atributos de HTML

se utilizarán posteriormente tanto para el diseño en CSS de los elementos, como para la

implementación de funciones en Javascript.

84


Los elementos definidos en el código HTML son los siguientes:

• Elemento player: este será el contenedor principal del reproductor. Todos los elementos

HTML definidos para el reproductor irán incluidos dentro de este elemento. Su identi-

ficador HTML es id_player y su clase dependerá de si el reproductor se encuentra en

modo normal o en modo pantalla completa siendo las clases player y player-fullscreen

respectivamente.

◦ Elemento video: este elemento será el marcado con la etiqueta video de HTML

5. En este elemento se visualizará el contenido del archivo multimedia. Su identi-

ficador es id_watch-video mientras que la clase es watch-video. Además, se ha

especificado un valor para el atributo poster de dicha etiqueta. Este atributo como

ya comentamos anteriormente muestra una imagen en la pantalla de visualización

cuando el vídeo todavía no ha comenzado a descargarse. Dentro del elemento vi-

deo se encuentran los elementos source que están asociados al elemento video.

Ponemos tantos elementos source como formatos de vídeo hay compatibles con

HTML 5. A día de hoy son tres: el formato MP4, el formato Ogg y el formato

WebM. En estos elementos source tenemos que añadir un atributo src con el fin

de especificar la ruta del archivo multimedia. Además, también es necesario incluir

el atributo type, el cual especificará el tipo y formato del archivo. Este atributo es

muy importante ya que lo utiliza el navegador como recolector de información y

poder así determinar si es o no compatible con el archivo al que está asociado.

◦ Elemento controls: este elemento, cuyo identificador es id_controls y su clase

controls, será el contenedor de varios elementos que nos servirán para manejar el

control de la reproducción. Los elementos que van incluidos dentro de este son los

siguientes:

î Elemento play-pause: elemento que servirá como botón para el control de

reproducción del vídeo. Su identificador es id_play-pause y su clase play-

pause. Dentro de este definimos otro elemento div HTML que servirá para

el diseño del símbolo que irá dentro del botón. Su identificador es id_simb-

play-pause y su clase dependerá de si el vídeo se encuentra en estado de

reproducción o detenido, siendo simb-play o simb-pause respectivamente.

î Elemento timer1: elemento div HTML para mostrar el minuto y segundo

actual en la reproducción del vídeo. Su identificador es id_timer1 y su clase

timer1. Dentro de este irá el elemento que contendrá los números indicativos

del tiempo. Este último elemento está identificado por id_counter1 y su clase

es counter.

85


î Elemento progress-container: este será el contenedor principal para todos los

elementos necesarios para la implementación y diseño de la barra de progre-

so del vídeo. Su identificador es id_progress-container y su clase progress-

container. Dentro de este elemento se encuentran los siguientes:

– Elemento progress: este elemento se incluye para diseñar la barra de pro-

greso. Su identificador es id_progress y su clase progress. Dentro de este

elemento irán los indicadores del progreso del vídeo y de la carga del buffer,

identificados y clasificados por id_progress-video y id_progress-buffer,

respectivamente. Así, sus clases serán progress-video y progress-buffer,

respectivamente.

î Elemento timer2: elemento div HTML para mostrar los minutos y segundos

restantes en la reproducción del vídeo. Su identificador es id_timer2 y su clase

timer2. Dentro de este irá el elemento que mostrará el tiempo. Este último

elemento está identificado por id_counter2 y su clase es counter, la misma

clase que tiene id_counter1.

î Elemento volume-container: este elemento será el elemento contenedor tanto

de un elemento que nos servirá para activar o desactivar el volumen del vídeo,

como otro elemento que nos mostrará la intensidad del volumen. Es identifi-

cado por id_volume-container y el valor de la clase es volume-container.

– Elemento vol-mute: este será el botón para la activación y desactivación

del volumen. Su identificador es id_vol-mute y su clase vol-mute. Dentro

de él irá un símbolo en representación del estado en el que se encuentra el

volumen del vídeo, si se encuentra activado o desactivado. El identificador

de este elemento es id_simb-vol-mute y la clase depende del estado. Si el

vídeo tiene el volumen activo la clase del elemento será simb-vol, mientras

que si está desactivado será simb-mute.

– Elemento level-container: contenedor para la intensidad del volumen. Iden-

tificado por id_level-container y cuya clase es level-container. Dentro de

este elemento se encuentra otro elemento para mostrar el nivel del volu-

men. Este es identificado por id_level-volume y la clase de dicho elemento

es level-volume.

î Elemento fullscreen: este elemento representa un botón para cambiar del modo

normal al modo pantalla completa y viceversa. Su identificador es id_fullscreen

y su clase fullscreen. Dentro de este irá otro elemento para representar los sím-

bolos correspondientes según el estado. El identificador es id_simb-fullscreen

y la clase será simb-off si el vídeo se encuentra en su tamaño original, o

simb-on si por el contrario se encuentra a modo pantalla completa.

86


◦ Elemento menu: tenemos que añadir las etiquetas necesarias para la creación

del menú contextual alternativo. Este es el elemento menu cuyo identificador es

id_menu y su clase menu. Dentro de él irán tantos elementos como funciones

distintas queramos incluir en el menú. Estos subelementos se irán marcando con

el identificador id_menu-x, donde x es el número del subelemento y la clase de

todos ellos es option.

◦ Elemento spinner: también se ha considerado oportuno incluir unos elementos

que indiquen que el vídeo se está cargando, en caso de que se haya comenzado

la descarga del mismo pero aún no disponga de contenido suficiente como para

comenzar con la reproducción del archivo. Este elemento viene identificado me-

diante id_spinner y su clase es spinner. Este elemento es el contenedor de varios

subelementos que darán forma al spinner.

◦ Elemento big-play: por último, se ha incluido también un elemento que será dise-

ñado como un botón de reproducción y que se situará en el centro de la pantalla

de visualización. A este elemento lo identificamos con id_big-play y su clase es

big-play. Este elemento es ilustrativo de si el vídeo se encuentra detenido o en

reproducción. Dentro de el definimos otro elemento para el diseño del símbolo de

reproducción, que está identificado por big-play-span.

En el archivo HTML, además de todos los elementos mencionados anteriormente, debemos

definir el tipo de documento e incluir los recursos utilizados como los archivos CSS o Javascript,

en la cabecera del documento.

Para HTML 5 el DOCTYPE será el siguiente:

<!DOCTYPE HTML>

Esto indicará al navegador que se enfrenta ante un documento que utiliza la versión 5 del

estándar HTML. En la cabecera (etiqueta <head>) incluimos, el título de la página, añadimos

la librería jQuery, ya que haremos uso de ella, así como los archivos player.css y player.js, de

los que hará uso el reproductor.

El código de todo lo explicado anteriormente se muestra en el apéndice C.

En el cuadro 4.10 podemos ver los elementos HTML con sus identificadores y clases.

87


ELEMENTO IDENTIFICADOR CLASE

player id_player playervideo id_watch-video watch-video

controls id_controls controlsplay-pause id_play-pause play-pause

simb-play-pause id_simb-play-pausesimb-play

o simb-mutetimer1 id_timer1 timer1

counter1 id_counter1 counterprogress-container id_progress-container progress-container

progress id_progress progressprogress-buffer id_progress-buffer progress-bufferprogress-video id_progress-video progress-video

timer2 id_timer2 timer2counter2 id_counter2 counter

volume-container id_volume-container volume-container

vol-mute id_vol-mutesimb-vol osimb-mute

simb-vol-mute id_simb-vol-mutesimb-vol osimb-mute

level-container id_level-container level-containerlevel-volume id_level-volume level-volumefullscreen id_fullscreen fullscreen

simb-fullscreen id_simb-fullscreensimb-on osimb-off

menu id_menu menusubmenu id_menu-x optionspinner id_spinner id_spinnerbig-play id_big-play big-play

simb-big-play id_simb-big-play simb-big-play

Cuadro 4.10: Elementos HTML.

4.4.3. Diseño del reproductor: código CSS.

De nada sirve definir los elementos anteriores si no le damos forma y por tanto visualizamos

en el documento. Para dar forma y diseñar los elementos anteriores en una página Web usa-

mos CSS. CSS (Cascading Style Sheets) es, precisamente, un lenguaje usado para definir la

presentación de un documento estructurado escrito en HTML o XML.

Se ha incluido todo el código de diseño en dos archivos independientes. Estos archivos se

encuentran dentro del directorio css y se denominan player.css y spinner.css.

88


A continuación, vamos a ir explicando el diseño que se ha dado a cada uno de los elementos

que hemos definido en el apartado anterior.

• Clase player.

El contenedor principal del reproductor lo diseñamos como un rectángulo con las dimensiones

del vídeo que se va a reproducir. En este caso, el vídeo seleccionado para pruebas tiene unas

dimensiones de 848 píxeles de ancho y 480 píxeles de alto. Por tanto, en nuestro documento

CSS las únicas propiedades CSS que asignamos a esta clase serán las propiedades width

y height cuyos valores serán de 848px y 480px respectivamente. Además, la posición del

elemento la definimos como relativa.

. p l a y e r {

width : 848 px ;

h e i g h t : 480 px ;

p o s i t i o n : r e l a t i v e ; }

• Clase player-fullscreen.

Este será el contenedor del reproductor cuando el vídeo se encuentre en modo pantalla comple-

ta. Por este motivo le asignamos a las propiedades width y height el 100 % de la dimensión del

documento. Además, eliminamos los márgenes que los navegadores suelen incluir por defecto.

. p l a y e r− f u l l s c r e e n {

width : 100 %;

h e i g h t : 100 %;

p o s i t i o n : f i x e d ;

l e f t : 0 ; top : 0 ; r i g h t : 0 ; bottom : 0 ; }

• Clase watch-video.

En este elemento se muestra el contenido del archivo multimedia que se va a reproducir. El

tamaño del mismo será el mismo que el del elemento padre, es decir, el mismo tamaño que el

de la clase player que acabamos de ver. Por eso asignamos a las propiedades width y height

el valor de 100 %. Además, definimos la posición como absoluta, lo que indica que su posición

es relativa a su elemento padre. Y finalmente, ponemos el fondo del elemento en color negro.

Esto se hace con el objetivo de que si el vídeo a reproducir tiene dimensiones diferentes al de

la clase player, las partes sobrantes se muestren en este color. Además, al poner el vídeo en

modo pantalla completa, las dimensiones del reproductor y del vídeo serán diferentes.

89


. watch−v i d e o {

width : 100 %;

h e i g h t : 100 %;

p o s i t i o n : a b s o l u t e ;

background−c o l o r : #000000; }

• Clase controls.

Esta clase diseña una barra cuyas dimensiones serán de 30 píxeles de alto y del 100 % de

la anchura de su elemento padre, el elemento player. La situaremos en la parte inferior del

elemento player, por eso ponemos la propiedad bottom de CSS a valor 0, para indicar que el

borde inferior de este elemento diste 0 píxeles del borde inferior del elemento padre. Finalmente,

damos aspecto al fondo de la barra con un degradado con el fin de hacerlo visualmente más

atractivo.

. c o n t r o l s {

width : 100%; h e i g h t : 30px ;


bottom : 0px ;

background : #D8D8C7 ;

background : −moz− l i n e a r −g r a d i e n t ( top , #D8D8C7 0%, #7C7A6F 100%);

background : −webkit−g r a d i e n t ( l i n e a r , l e f t top , l e f t bottom ,

co l o r−s top(0%,#D8D8C7) , c o l o r−s top (100%,#7C7A6F ) ) ;

f i l t e r : p r o g i d : DXImageTransform . M i c r o s o f t . g r a d i e n t (

s t a r t C o l o r s t r=’#D8D8C7 ’ ,

e n dCo l o r s t r=’#7C7A6F ’ , Grad ientType=0 ) ;

}

Hasta ahora, lo que hemos diseñado se muestra en la figura 4.7.

Dentro del elemento controls, tenemos que ir añadiendo una serie de más elementos, que nos

permitirá interactuar con el vídeo. Estos elementos son los siguientes:

• Clase play-pause.

Esta clase diseña un botón. Lo diseñamos con las dimensiones de 30 píxeles de alto (misma

altura que la barra de controles) y 30 píxeles de ancho. Con el fin de poder seguir añadiendo

90


Figura 4.7: Primera parte reproductor

más elementos en la barra de controles a la derecha de este elemento asignamos a la propiedad

de CSS float el valor de left. Además, indicamos que el cursor del ratón sobre este elemento

sea tipo pointer. Finalmente, ponemos un borde en la parte derecha del botón con el fin de

delimitar las distintas partes de la barra de control.

. p l ay−pause {

c u r s o r : p o i n t e r ! impo r tan t ;

w idth : 30px ; h e i g h t : 30px ;

f l o a t : l e f t ;

borde r−c o l o r : t r a n s p a r e n t #D8D8D8 t r a n s p a r e n t t r a n s p a r e n t ;

border−s t y l e : s o l i d ;

border−width : 0px 1px 0px 0px ; }

• Clase simb-play.

Esta clase diseña el símbolo play convencional de cualquier reproductor de vídeo. Esto se

consigue jugando con los bordes del elemento, poniendo todos transparentes salvo el borde

izquierdo, y asignando diferentes grosores a unos que a otros. Además, jugamos con los

márgenes con tal de centrar el símbolo en el botón. El elemento puede verse en la figura 4.8.

91


. simb−p l a y {


border−c o l o r : t r a n s p a r e n t t r a n s p a r e n t t r a n s p a r e n t #000;


border−width : 6px 8px 6px 8px ;

margin−top : 9px ;

margin− l e f t : 11 px ; }

Figura 4.8: Símbolo play.

• Clase simb-pause.

El símbolo de pausa se diseña de un modo similar al símbolo play, jugando con el grosor y el

color de los bordes del elemento. El elemento puede verse en la figura 4.9.

. simb−pause {



margin− l e f t : 10 px ; margin−top : 9px ;

border−c o l o r : t r a n s p a r e n t #000 t r a n s p a r e n t #000;



Figura 4.9: Símbolo pausa.

• Clase timer1.

Este elemento se diseña como un rectángulo de dimensiones 45x30 píxeles.

92


. t ime r1 {

width : 45px ;

h e i g h t : 30px ;

f l o a t : l e f t ; }

• Clase counter.

Especifica la posición y el estilo (familia de fuente, color y tamaño) de los números que

indicarán el minuto y el segundo actual de la reproducción. El elemento puede verse en la

figura 4.10.

. coun t e r1 {


t ex t−a l i g n : c e n t e r ;

font−f am i l y : Verdana ;

font−s i z e : 11px ;

c o l o r : b l a c k ; }

Figura 4.10: Elemento timer1 y counter.

• Clase progress-container.

Este es el elemento contenedor para la barra de progreso y sus demás elementos. Lo diseñamos

como un rectángulo cuya anchura será del 70 % del elemento padre (barra de controles) y de

la misma altura que este.

. p r og r e s s−c o n t a i n e r {

width : 70 %;


f l o a t : l e f t ; }

• Clase progress.

93


Esta clase diseña la barra de progreso. Su anchura será la del elemento contenedor (progress-

container) y su altura de 9 píxeles. El cursor sobre este elemento será tipo pointer. Se diseña

el fondo con un degradado que da aspecto de profundidad y además se redondean los bordes.

Puede verse este elemento en la figura 4.11.

. p r o g r e s s {


w idth : 99 ,9%; h e i g h t : 9px ;


/∗ De f au l t ∗/ background : #000;

/∗ Webkit ∗/ background : −webkit−g r a d i e n t (

l i n e a r , l e f t top , l e f t bottom , from (#404040) , to (#808080)) ;

/∗ F i r e f o x ∗/ background : −moz− l i n e a r −g r a d i e n t (

top , #404040 , #808080);

−webkit−border−r a d i u s : 5px ;

−moz−border−r a d i u s : 5px ; border−r a d i u s : 5px ; }

Figura 4.11: Elemento progress-container.

• Clase progress-video.

Este es el elemento indicador del transcurso del vídeo en un momento dado. El ancho es

variable según el estado de reproducción. Por lo demás, se diseña de forma que se adapte al

elemento padre con un color diferente para distinguir claramente las distintas partes.

. p r og r e s s−v i d eo {

width : 0px ; h e i g h t : 9px ;

/∗ CSS Grad i en t ∗/

/∗ De f au l t ∗/ background : #f f f ;

/∗ Webkit ∗/ background :

−webkit−g r a d i e n t ( l i n e a r , l e f t top ,

l e f t bottom , from(# f f f ) , to(#C8C8C8 ) ) ;

/∗ F i r e f o x ∗/ background : −moz− l i n e a r −g r a d i e n t ( top , #f f f , #C8C8C8 ) ;




94


• Clase progress-buffer.

Este es el elemento indicador de la carga del buffer en un momento dado. El ancho es variable

según el estado de descarga del vídeo. Por lo demás, se diseña de forma que se adapte al

elemento padre con un color diferente para distinguir claramente las distintas partes. El aspecto

del progreso del vídeo y del progreso del buffer se muestra en la figura 4.12.

. p r og r e s s−b u f f e r {



/∗ De f au l t ∗/ background : #000;

/∗ Webkit ∗/ background : −webkit−g r a d i e n t (

l i n e a r , l e f t top , l e f t bottom , from (#282828) , to (#686868)) ;

/∗ F i r e f o x ∗/ background : −moz− l i n e a r −g r a d i e n t (

top , #282828 , #686868);




Figura 4.12: Elementos progress-video y progress-buffer.

• Clase timer2.

Esta clase es prácticamente igual a la clase timer1 solo que en este caso además añadimos un

borde en la parte derecha del elemento con el fin de diferenciar partes en la barra de controles.

Dentro de este elemento irá otro elemento de clase counter, explicada anteriormente. Este

elemento se puede visualizar en la figura 4.13.

. t ime r2 {

width : 45px ;






95


Figura 4.13: Elemento timer2 y counter.

• Elemento volume-container.

Contenedor para los diferentes elementos de control del audio. Se especifican las dimensiones

y un borde derecho.

. volume−c o n t a i n e r {

width : 100 px ; h e i g h t : 30px ;





• Clase vol-mute.

Botón para la activación y desactivación del sonido. Si se pulsa este botón con el sonido activo,

pasará a estado de silencio, mientras que si se pulsa estando en silencio se procederá a activar

el sonido con la misma intensidad con la que se encontraba anteriormente de haber pasado a

silencio. Este elemento tiene dimensiones de 30x30 píxeles, el cursor sobre este elemento es

tipo pointer y contiene un borde en la parte derecha del elemento.

. vo l−mute {





border−s t y l e : s o l i d ; borde r−width : 0px 1px 0px 0px ; }

• Clase simb-vol.

Símbolo que indica que el sonido está activado. Se ha escogido una imagen para representar

este símbolo. La imagen se encuentra dentro de la carpeta css y se denomina sound2.jpg. Este

elemento se puede ver en la figura 4.14.

96


. simb−v o l {




margin− l e f t : 4px ;

background : u r l ( ’ sound2 . png ’ ) no−r e p e a t ; }

Figura 4.14: Elemento simb-vol.

• Clase simb-mute.

Símbolo que indica que el sonido está desactivado. Se ha escogido una imagen para representar

este símbolo. La imagen se encuentra dentro de la carpeta css y se denomina mute2.jpg. Este

elemento se muestra en la figura 4.15.

. simb−mute {





background : u r l ( ’ mute2 . png ’ ) no−r e p e a t ; }

Figura 4.15: Elemento simb-mute.

• Clase level-container.

Este elemento se diseña de un forma similar a la barra de progreso con un degradado con el

fin de dar aspecto de profundidad.

97


. l e v e l −c o n t a i n e r {





/∗CSS Grad i en t ∗/

/∗De f au l t ∗/ background : #000;

/∗Webkit ∗/ background :

−webkit−g r a d i e n t ( l i n e a r , l e f t top , l e f t bottom ,

from (#404040) , to (#808080)) ;

/∗ F i r e f o x ∗/ background :

−moz− l i n e a r −g r a d i e n t ( top , #404040 , #808080); }

• Clase level-volume.

De aspecto similar al indicador de progreso del vídeo. En este caso no se bordean los borde y

el alto es inferior. Este elemento se puede ver en la figura 4.16.

. l e v e l −volume {

po s t i o n : a b s o l u t e ;

w idth : 100%; h e i g h t : 5px ;


/∗ De f au l t ∗/ background : #f f f ;

/∗ Webkit ∗/ background : −webkit−g r a d i e n t ( l i n e a r ,

l e f t top , l e f t bottom , from(# f f f ) , to(#C8C8C8 ) ) ;

/∗ F i r e f o x ∗/ background :

−moz− l i n e a r −g r a d i e n t ( top , #f f f , #C8C8C8 ) ; }

Figura 4.16: Elemento level-volume.

• Clase fullscreen.

Botón para poner el vídeo a su versión en pantalla completa o volverlo a su tamaño original.

El cursor sobre este elemento es tipo pointer, y en cuanto a las dimensiones se le ha dado el

ancho que faltaba hasta llegar al final de la barra de controles.

98


. f u l l s c r e e n {


w idth : 31px ;


f l o a t : l e f t ; }

• Clase simb-off.

Símbolo que representa que el tamaño del vídeo es el tamaño original. Se utiliza una imagen

que se encuentra en el directorio css y que se llama fullscreen_off.png. Este elemento se

muestra en la figura 4.17.

. simb−o f f {


w idth : 30px ;




background : u r l ( ’ f u l l s c r e e n _ o f f . png ’ ) no−r e p e a t ; }

Figura 4.17: Elemento simb-off.

• Clase simb-on.

Símbolo que representa que el vídeo se encuentra en modo pantalla completa. Se utiliza una

imagen que se encuentra en el directorio css y que se llama fullscreen_on.png. El elemento

se visualiza en la figura 4.18.

. simb−on{


w idth : 30px ;




background : u r l ( ’ f u l l s c r e e n_on . png ’ ) no−r e p e a t ; }

99


Figura 4.18: Elemento simb-on.

• Clase big-play.

Con esta clase diseñamos un botón para reproducción en el centro de la pantalla. Diseñamos

un cuadrado de dimensiones 80x80 píxeles con los bordes redondeados y de un color diferente

al fondo. El fondo tiene un degradado. Además jugamos con los márgenes para centrarlo en

la pantalla de visualización.

. b ig−p l a y {

d i s p l a y : b l o ck ; z−i n d e x : 2 ;


top : 50%; l e f t : 50%;


margin : −43px 0 0 −43px ;

t ex t−a l i g n : c e n t e r ;

v e r t i c a l −a l i g n : c e n t e r ;

bo rd e r : 3px s o l i d #f f f ; o p a c i t y : 0 . 9 ;

border−r a d i u s : 20px ;


−moz−border−r a d i u s : 20px ;

background−c o l o r : #0B151A ;

background : #1F3744 −webkit−g r a d i e n t (

l i n e a r , l e f t top , l e f t bottom ,

from(#0B151A ) , to (#1F3744 ) ) l e f t 40px ;

background : #1F3744

−moz− l i n e a r −g r a d i e n t ( top , #0B151A , #1F3744 ) l e f t 40px ;

box−shadow : 4px 4px 8px #000;

−webkit−box−shadow : 4px 4px 8px #000;

−moz−box−shadow : 4px 4px 8px #000; }

• Clase simb-big-play.

Este elemento es el símbolo del botón anterior. El diseño es similar al otro símbolo de play

que hemos diseñado anteriormente. El elemento se muestra en la figura 4.19.

100


. simb−big−p l a y {

d i s p l a y : b l o ck ;

font−s i z e : 0 ;

l i n e −h e i g h t : 0 ;

w idth : 0 ; h e i g h t : 0 ;

marg in : 20px 0 0 23px ;

border− l e f t : 40 px s o l i d #f f f ;

borde r−top : 20px s o l i d rgba ( 0 , 0 , 0 , 0 ) ;

border−bottom : 20px s o l i d rgba ( 0 , 0 , 0 , 0 ) ; }

Figura 4.19: Elemento big-play.

• Clase spinner.

Este será el elemento contenedor de otra serie de elementos que definirán el spinner. Lo dise-

ñamos como un cuadrado de dimensiones 100x100 en el centro de la pantalla del reproductor.

. s p i n n e r {

d i s p l a y : none ;


top : 50 %; l e f t : 50 %;

width : 100 px ;

h e i g h t : 100 px ;

z−i n d e x : 1 ;

marg in : −50px 0 0 −50px ; }

• Elementos div del spinner.

101


Estos son ocho elementos que definen el spinner. Son pequeños círculos que en conjunto

forman un círculo más grande. Para eso tenemos que ir situando los distintos elementos

rotándolos respecto a su posición original. Los elementos se diseñan del siguiente modo:

. s p i n n e r d i v {


l e f t : 40 px ; top : 40px ;


background : #f f f ;

borde r−r a d i u s : 20px ;

−webki t−border−r a d i u s : 20px ;


bo rd e r : 1px s o l i d #ccc ; }

Y para conseguir la posición deseada tenemos que aplicarles distintas transformaciones a los

distintos elementos. Estos elementos se muestran en la figura 4.20.

. s p i n n e r d i v : nth−c h i l d (1 ) {

o p a c i t y : 0 . 1 2 ;

t r an s f o rm : r o t a t e (000 deg ) t r a n s l a t e (0 , −40px ) s c a l e ( 0 . 1 ) ;

−webkit−t r an s f o rm : r o t a t e (000 deg ) t r a n s l a t e (0 , −40px ) s c a l e ( 0 . 1 ) ;

−moz−t r an s f o rm : r o t a t e (000 deg ) t r a n s l a t e (0 , −40px ) s c a l e ( 0 . 1 ) ; }

. s p i n n e r d i v : nth−c h i l d (2 ) {

o p a c i t y : 0 . 2 5 ;

t r an s f o rm : r o t a t e (045 deg ) t r a n s l a t e (0 , −40px ) s c a l e ( 0 . 2 ) ;

−webkit−t r an s f o rm : r o t a t e (045 deg ) t r a n s l a t e (0 , −40px ) s c a l e ( 0 . 2 ) ;

−moz−t r an s f o rm : r o t a t e (045 deg ) t r a n s l a t e (0 , −40px ) s c a l e ( 0 . 2 ) ; }

• Clase menu.

Este elemento es el contenedor de todas las opciones que incluirán el menú contextual alter-

nativo. Será un rectángulo de dimensiones 130x93 píxeles. Además diseñamos los bordes y lo

redondeamos:

102


Figura 4.20: Elemento spinner.

. menu{

d i s p l a y : none ;

w idth : 130 px ; h e i g h t : 93px ;

bo rd e r : 10px s o l i d #3e3e3e ;

background : #FFFFCC ;

border−r a d i u s : 5px ;


−webki t−border−r a d i u s : 5px ;

−khtml−border−r a d i u s : 5px ;


z−i n d e x : 3 ; }

• Clase option.

Estos elementos serán las opciones que componen el menú. Irán dentro del elemento conte-

nedor anterior. Son rectángulos de 30 píxeles de alto y de la misma anchura que su elemento

contenedor. Contienen un borde inferior para delimitar el espacio entre una opción y otra. Ade-

más, al situar el ratón sobre alguno de estos elementos el fondo, el borde y el texto cambiarán

de color. Este elemento se encuentra en la figura 4.21.

103


. o p t i o n {


border−bottom : 1px s o l i d #FFFFCC ;

font−f am i l y : Verdana ;

font−s i z e : 13px ;

font−we ight : bo ld ; }

. op t i o n : hove r {

background−c o l o r : #f f f 8 c c ;

border−bottom : 1px s o l i d #f f e 2 2 2 ;

c o l o r : #000;

c u r s o r : p o i n t e r ; }

Figura 4.21: Elemento menu.

El aspecto final del reproductor en modo normal es el que se muestra en la figura 4.22 y en

modo pantalla completa el que se muestra en la figura 4.23.

4.4.4. Implementación de las funciones del reproductor: código

Javascript y Jquery.

Ya tenemos todo el diseño de nuestro reproductor, pero de nada nos serviría esto si este no

responde a las acciones del usuario. Necesitamos implementar ahora todas aquellas especifi-

caciones que deseamos que cumpla el reproductor.

Esta parte del código se encuentra en el archivo player.js dentro del directorio js. Será un

documento escrito en Javascript que además hará uso de la librería jQuery debido a su facilidad

de uso y su óptima forma para acceder a los elementos HTML.

Conocidos ya todos los elementos que componen el reproductor de vídeo, vamos a detallar

todas las funciones que debe implementar el reproductor en función de las acciones que realice

el usuario sobre estos elementos:

104


Figura 4.22: Reproductor modo normal.

• Funciones de reproducción: Si el usuario hace clic con el botón izquierdo del ratón sobre

la pantalla de visualización (elemento watch-video), sobre el elemento play-pause o

sobre el elemento big-play, se cambiará el estado de reproducción del vídeo. Es decir,

si este estaba detenido comenzará a reproducirse o proseguirá por el punto en que se

detuvo y si estaba en reproducción se detendrá.

• Funciones de avance o retroceso: Si el usuario hace un clic sobre la barra de progreso

(elemento progress-container), el vídeo dará un salto temporal en la reproducción y

proseguirá con la misma desde el punto en el que el usuario hizo el clic. Si el usuario

pulsa el botón izquierdo sobre la misma barra sin soltarlo y comienza a mover el ratón

hacia el lado izquierdo o derecho, el vídeo deberá seguir el movimiento del ratón, bien

hasta que el usuario suelte el botón o bien hasta que el ratón salga de la zona delimitada

por el reproductor. El estado de reproducción del vídeo se debe conservar tras esta

acción.

• Funciones temporales: los marcadores de tiempos se deben ir actualizando temporal-

mente mientras que el vídeo se está reproduciendo. Si se da un salto en la reproducción,

igualmente se deben actualizar acto seguido, y si se está avanzando con el movimiento

del ratón, se debe ir actualizando igualmente con el movimiento de este.

• Funciones de sonido: si el usuario hace clic sobre el elemento vol-mute el reproductor

105


Figura 4.23: Reproductor modo pantalla completa.

debe cambiar su estado en cuanto al sonido, es decir, si estaba en silencio se activará

el sonido y viceversa. Si hace clic sobre el elemento level-container, actualizará la in-

tensidad de sonido al nivel donde se hizo el clic. Y si el usuario pulsa el botón izquierdo

sobre la misma barra sin soltarlo y comienza a mover el ratón hacia el lado izquierdo o

derecho, la intensidad de audio deberá seguir el movimiento del ratón, bien hasta que

el usuario suelte el botón o bien hasta que el ratón salga de la zona delimitada por el

elemento level-container.

• Funciones de pantalla completa: si el usuario hace clic sobre el elemento fullscreen el

vídeo cambiará de tamaño. Si se encontraba en la versión original pasará a mostrarse en

su versión pantalla completa y viceversa.

• Funciones de menú: Si el usuario pulsa el botón derecho sobre la pantalla de visualización,

se evitará que se muestre el menú contextual convencional del navegador y se mostrará

en la zona donde se pulso el ratón el menú alternativo creado para el reproductor. Al

volver a hacer un clic este menú dejará de mostrarse.

106


• Funciones de visualización de la barra de controles y del ratón: estos elementos se

mostrarán siempre, salvo que el vídeo se esté reproduciendo durante 5 segundos o más sin

mover el ratón, que entonces ambos elementos se ocultarán. Estos volverán a mostrarse

en cuanto el usuario mueva de nuevo el ratón o se detenga la reproducción.

4.4.4.1. Funciones de reproducción.

Comenzamos con la que puede ser la función más importante de todas, la de comienzo-

continuación o detención de la reproducción.

El procedimiento para implementar esta función es el siguiente:

• Primero de todo hay que detectar el evento en los elementos deseados.

• Una vez detectado el evento sobre algunos de los elementos, se procederá a comprobar el

estado del vídeo, es decir, si este se encuentra en reproducción o detenido en el instante

en que se produjo dicho evento.

• Finalmente, si el vídeo estaba detenido pasará a estado de reproducción y viceversa.

A continuación, explicamos cómo implementar los pasos anteriores.

• Detectar los eventos.

Para detectar los eventos utilizamos la función bind() de jQuery. Este método permite asignar

uno o más controladores de eventos a los elementos seleccionados y además ejecutar una

determinada función cuando dichos eventos ocurran.

La sintaxis de este método es la siguiente:

( s e l e c t o r ) . b ind ( event , data , f u n c t i o n )

donde selector es el elemento en cuestión, event es el evento que queremos detectar sobre el

elemento, data especifica datos adicionales que se desean pasar a la función y function será

la función que se ejecutará cuando ocurra el evento.

Pero existe una sintaxis alternativa que nos interesa más, y es la siguiente:

107


( s e l e c t o r ) . b ind ({ even t : f u n c t i o n , e ven t : f u n c t i o n , })

de este modo podemos monitorizar varios eventos sobre un mismo elemento y ejecutar distintas

funciones según el tipo evento que se haya producido sobre el elemento.

En este caso el evento que tenemos que manejar serán eventos ’click’ sobre los elementos

id_play-pause, id_big-play y id_watch-video.

• Comprobar el estado del vídeo.

Una vez capturado el evento, tenemos que proceder a comprobar cual es el estado del vídeo

y proceder en consecuencia de la respuesta. Para eso disponemos del atributo booleano de

solo lectura paused en un elemento media. Si este atributo tiene el valor de true, indicará

que el vídeo está detenido y procederemos por tanto a ejecutar la función que ponga el vídeo

en reproducción. Si por el contrario tiene el valor false, el vídeo estará en reproducción y se

procederá con la detención del mismo. Para acceder al valor de este atributo hacemos uso de

la función get() de jQuery.

El método get() obtiene los elementos DOM especificados por el selector:

( s e l e c t o r ) . ge t ( i n d e x )

donde index especifica la posición en el archivo HTML del elemento en cuestión.

• Funciones play y pause.

Se han programado dos métodos para realizar estas acciones ya que el código que contiene

deberá ejecutarse desde varias partes de la función principal. Estos métodos son los métodos

playVideo() y pauseVideo().

Función playVideo().

Cuando se llama a esta función hay que poner el vídeo en reproducción. Esta acción se realiza

fácilmente utilizando el método play() del elemento media. Este método automáticamente

comenzará la reproducción del vídeo. Además, debemos cambiar la clase del elemento id_simb-

play-pause para que pase a ser simb-pause y de este modo se muestre el símbolo de pausa

en el botón de reproducción, lo que indicará que si se vuelve a pinchar el botón el vídeo se

detendrá.

108


Esta función además ejecuta otras acciones que ya se irán explicando a lo largo del apartado.

Función pauseVideo().

Esta función es muy similar a la anterior. En este caso tendremos que llamar al método pause()

del elemento media, lo cual detendrá la reproducción. Y además cambiará la clase del elemento

id_simb-play-pause por simb-play.

4.4.4.2. Funciones de avance o retroceso.

Explicamos ahora como se realizan las funciones de avance o retroceso del vídeo. Debemos

implementar dos clases de funciones:

Funciones de progreso siguiendo la reproducción del vídeo.

Por un lado, si el vídeo se está reproduciendo, debemos ir actualizando el progreso del mismo

cada cierto tiempo, mientras que si está parado el progreso debe mantenerse fijo. Por tanto,

necesitaremos ejecutar una función repetitivamente cada cierto tiempo. Para este objetivo se

ha utilizado la función de Javascript setInterval(), la cual ejecuta una función cada vez que

pasa el intervalo de tiempo especificado. Esta función continúa ejecutándose hasta que se

llame al método clearInterval().

La sintaxis de setInterval() es la siguiente:

s e t I n t e r v a l ( code , m i l i s e c , l ang )

Donde code será una referencia al código o función que será ejecutado. milisec el intervalo

de frecuencia con la que se ejecutará la función en milisegundos. lang es opcional y puede ser

Jscript, VBscript o Javascript.

Esta función será ejecutada desde la función principal del código Javascript, el cual empezará

a ejecutarse tras cargar la página, y llamará a la función updateProgress() la cual ha sido

creada para actualizar cada 500 milisegundos, tanto el ancho de la barra de progreso del vídeo,

como el instante actual de la reproducción.

Lo primero que hay que pensar es que debemos encontrar una proporcionalidad entre la dura-

ción del vídeo y el ancho del progreso, es decir, si el vídeo está en su punto medio, el ancho

de la barra deberá estar por la mitad del ancho de la barra contenedora y si está en el punto

final, el ancho del progreso debe ser el ancho de su elemento contenedor.

109


La duración del vídeo la conseguimos con el atributo duration, el instante actual de la re-

producción con el atributo currentTime y el ancho del elemento contenedor del progreso

(id_progress) lo podemos obtener con la función width() de jQuery.

Por tanto, la fórmula que nos da el ancho del progreso actual del vídeo es la siguiente:

pv = p

d⋆ ct

donde pv es el ancho del progreso del vídeo, p el ancho total de la barra contenedora, d la

duración del vídeo y ct el instante actual de la reproducción.

De este modo, como la variable currentTime se va actualizando conforme el vídeo avanza, el

ancho de la barra se irá actualizando también con el paso del tiempo.

Hay que decir también, que si el vídeo está detenido, el valor de currentTime se mantiene

constante en el valor que tenía al detener el vídeo, por lo que como los otros dos parámetros

de la función son constantes, el ancho de la barra permanecerá constante mientras el vídeo

esté parado.

Funciones de saltos en la reproducción.

Nos falta implementar la función de saltos en el progreso. Recordamos que si el usuario hace

un clic sobre la barra el vídeo debe saltar a ese punto. Si además el usuario pulsa el botón

izquierdo y sin levantarlo comienza a mover el ratón hacia derecha o izquierda, el vídeo debe

seguir el movimiento de este, bien hasta que el usuario suelte el botón o bien hasta que el

ratón salga del reproductor.

El procedimiento para implementar esto se explica a continuación.

En primer lugar detectamos el evento ’mousedown’ (mousedown se produce cuando el usuario

pulsa el botón aunque no haya soltado este) en el elemento id_progress. Esto se hará como

se ha explicado anteriormente con la función bind(). Como vamos a necesitar datos del evento

lo pasamos como argumento.

Una vez detectado el evento, actualizamos el ancho del progreso del vídeo hasta donde se

encuentra el ratón. Esto se consigue mediante e.pageX (solo nos hará falta esta coordenada).

Pero a este valor tenemos que restarle el valor de la coordenada donde comienza la barra de

progreso. Se ha creado la función findPos() para esto, la cual obtiene la coordenada X del

elemento que se le pasa como parámetro, en este caso será id_progress. Usamos la función

offset() de jQuery, que nos permite obtener la posición de un elemento relativa al documento.

Devuelve las propiedades top y left. En nuestro caso nos interesa solo left.

110


Actualizamos por tanto de este modo el ancho de la barra de progreso y a continuación tenemos

que actualizar el valor de currentTime, para que la reproducción del vídeo salte a este punto.

Para eso utilizamos la siguiente fórmula:

ct = (d ⋆ pv)/p

donde ct es el instante actual de reproducción, d la duración total del vídeo, pv el ancho de

la barra de progreso del vídeo, y p el ancho total de la barra contenedora.

A continuación, tenemos que detectar los eventos de movimiento del ratón y el evento cuando

el usuario suelte el botón, sobre el elemento id_player. Para esto, dentro del bind() anterior

ponemos otro con los eventos ’mousemove’ y ’mouseup’. Si se produce el evento mousemove,

se llamará a la función mouseMove, que se ha creado y que se explicará a continuación. Y

finalmente, cuando el usuario suelte el botón, se dejarán de escuchar los eventos ’mousemove’

y ’mouseup’ sobre id_player y se volverá a llamara a la función mouseMove.

La función mouseMove se encarga de actualizar la barra de progreso y el instante de reproduc-

ción. Esto ya se ha explicado anteriormente como se hace, lo único a destacar de esta función

es que realizará el proceso anterior siempre y cuando el ratón no sobrepase los límites de la

barra contenedora del progreso.

4.4.4.3. Funciones temporales.

Los elementos timer y id_timer2 nos mostrarán tanto el instante actual de la reproducción

como la duración total del vídeo. No es difícil conseguir esto sabiendo que contamos con los

atributos currentTime y duration dentro de un elemento media. El atributo currentTime

es un atributo tipo doble que contiene el instante actual de la reproducción expresado en

segundos. Este valor puede ser modificado por el desarrollador. El atributo duration es también

un atributo tipo doble de solo lectura que contiene la duración total del vídeo expresadas en

segundos.

Es más intuitivo para el usuario mostrar el tiempo en el formato minutos y segundos que si

mostramos sólo los segundos. Para pasar los segundos a minutos y segundos hacemos uso de la

clase Date() de Javascript. Para ello creamos un elemento Date al que le pasamos el valor de

los atributos en milisegundos. Podemos obtener entonces fácilmente la descomposición de este

valor en minutos y segundos con las funciones de la clase Date, getMinutes() y getSeconds()

que devuelven los minutos y segundos respectivamente del objeto Date que se pasa como

argumento.

111


La función mencionada anteriormente updateProgress() deberá actualizar cada vez que sea

llamada el elemento timer1 que cambiará el valor de minutos y segundos anteriores por el

actual.

4.4.4.4. Funciones de volumen.

Recordemos que se tiene que implementar la función de activación o desactivación del sonido

según el estado del vídeo, y el control sobre la intensidad de audio.

Activación-desactivación del sonido.

El procedimiento será el siguiente:

1. Detectar el evento ’click’ sobre el elemento vol-mute.

2. Comprobar el estado del sonido del vídeo: para ello contamos con el atributo muted, el

cual tendrá un valor de false si el sonido está activo y el valor de true si por el contrario

se encuentra en modo silencio.

3. Si el sonido estaba activado ponemos el atributo muted a true, el ancho de la barra de

intensidad del volumen a cero, y cambiamos el símbolo del botón, indicando el estado

actual del vídeo.

4. Si el sonido estaba inactivo ponemos el atributo muted a false, el ancho de la barra de

intensidad del volumen lo actualizamos con el valor del atributo volume, y cambiamos

el símbolo del botón.

Barra de control de la intensidad del volumen.

El reproductor cuenta con una barra sobre el que se puede desplazar el ratón para subir o bajar

progresivamente la intensidad del volumen. O de un salto si el usuario hace clic sobre esta

barra. El procedimiento es exactamente el mismo que el seguido para la barra de progreso del

vídeo, cambiado solo los elementos implicados.

4.4.4.5. Funciones de control de pantalla completa.

El reproductor dará la opción al usuario de visualizar el vídeo en su tamaño original o en

tamaño de pantalla completa. El procedimiento para implementar esta función es el siguiente.

112


1. Detectar el evento: Para detectar el evento lo haremos como en funciones anteriores.

El selector en este caso será id_fullscreen. De momento no es posible programar la

visualización del vídeo sin las barras de herramientas y navegación de los navegadores.

Esta función, en cambio, podrá conseguirse normalmente pulsando la tecla F11.

2. Una vez detectado el evento sobre el elemento, se procederá a comprobar el estado

del tamaño del vídeo, es decir, si este se encuentra en modo normal o en modo de

pantalla completa. Para comprobar el tamaño del reproductor al producirse el evento

hemos declarado una variable denominada isfullScreen en nuestro código Javascript.

Esta variable (booleana) se iniciará con el valor de false, indicando que el tamaño inicial

del vídeo será el normal. Cuando el vídeo esté en pantalla completa el valor de esta

variable será true. Por tanto, una vez detectado el evento, comprobamos el valor de

esta variable: si es false ejecutamos las acciones necesarias para pasar el vídeo a pantalla

completa; y si es true tendremos que pasar a visualizar el reproductor en su versión

original.

3. Si el vídeo se encontraba en modo normal al hacer el clic, tendremos que poner la

variable isfullScreen a true, cambiar la clase del elemento player a player-fullscreen,

cambiar el símbolo del botón y el ancho del elemento contenedor del progreso para que

los elementos de la interfaz ocupen todo el ancho de la barra de controles.

4. Si por el contrario se encontraba en tamaño pantalla completa, cambiamos el valor de

isfullScreen a false, la clase de player-fullscreen a player, el símbolo del botón y el

ancho de la barra a su valor anterior.

4.4.4.6. Visualización de la interfaz y el cursor del ratón.

Tanto la interfaz de controles del reproductor como el puntero del ratón se ocultarán si trans-

curren cinco segundos durante los cuales el vídeo se está reproduciendo y el ratón no se

mueve.

Para esto usamos las funciones setTimeout y clearTimeout de jQuery. setTimeout ejecuta

una función tras el transcurso del tiempo que se le pasa como argumento. Esta función devuelve

un identificador.

La función clearTimeout borra el temporizador del identificador que se le pasa como argu-

mento, lo que quiere decir que si esta función es llamada antes del transcurso del intervalo de

tiempo anterior, la función no se ejecutará.

113


De este modo, cada vez que se llame a la función playVideo() comenzamos un contador

con setTimeout, guardando su identificador en una variable que se ha creado para tal fin,

la variable contador. Si pasan los cinco segundos esta función esconderá el ratón, lo cual se

consigue fácilmente cambiando la propiedad cursor de CSS a ’none’, y escondemos la interfaz

de controles con la función fadeTo() de jQuery.

En cambio, si antes de transcurrir los cinco segundos el usuario mueve el ratón o detiene el

vídeo, se procederá a llamar a la función clearTimeout pasando contador como argumento,

para que borre el contador.

4.4.4.7. Modificación del menú contextual.

Ya se ha comentado que se ha modificado el menú contextual que mostrará el navegador

cuando el usuario haga clic con el botón derecho del ratón sobre el elemento player.

Para realizar esto lo primero que hay que hacer es evitar que el navegador muestre el menú

contextual que implementa de forma nativa. Para ello utilizamos el atributo oncontexmenu

de Javascript.

Una vez hecho esto, tendremos que mostrar el menú alternativo que se ha diseñado cuando

el usuario haga clic con el botón derecho sobre el elemento player. Para detectar tal evento

se utiliza ’mousedown’ y para mostrar o ocultar el menú utilizamos la propiedad display de

CSS. Para mostrarlo se pone esta propiedad a ’block’, mientras que para ocultarlo a ’none’.

Además, cuando el usuario haga clic sobre algunos de los elementos option del menú contextual

hay que realizar distintas acciones según el elemento sobre el que haya pulsado el ratón.

El menú contextual diseñado consta de tres elementos option. El primero de ellos, Reproducir,

sirve para detener o proseguir con la reproducción del mismo. El segundo, Silenciar, para

activar o desactivar el sonido del vídeo. Y el tercero, Bucle, sirve para realizar la reproducción

en bucle: al finalizar, volverá a comenzar de nuevo con la reproducción.

Para detectar sobre qué elemento option se hizo clic, se utiliza mousedown y para ejecutar

unas acciones u otras se ha diseñado una sentencia switch de Javascript. Está formada por

tres case, uno para cada elemento option del menú. Se distingue el elemento seleccionado

leyendo el identificador del evento.

114


4.4.4.8. Movimiento del spinner.

El moviento del elemento spinner se realizará también cada cierto tiempo, por eso la función

que rota dicho elemento se encuentra dentro de una función setInterval, de la cual ya se ha

explicado su funcionamiento.

Lo primero a tener en cuenta es que el elemento spinner se mostrará en el reproductor cuando

el vídeo se esté cargando, pero no disponga de suficiente información como para comenzar o

continuar con la reproducción. Para implementar esto disponemos del atributo readyState de

los elementos media de HTML. Este atributo ya se explicó en el apartado 3.2.4.1. Según esto,

el elemento debe mostrarse si readyState tiene un valor distinto de 3 y 4.

Para realizar la rotación utilizamos las propiedades WebkitTransform y MozTransform de

CSS (según motor de reenderizado del navegador) y la función rotate().

115


116

capítulo 4 desarrollo de la aplicación. -...

Documents