Capítulo 4 Desarrollo de la aplicación. -...
-
Upload
truongmien -
Category
Documents
-
view
219 -
download
1
Transcript of 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
4.2. APLIC. SERV. DE VÍDEOS. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
• 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
4.2. APLIC. SERV. DE VÍDEOS. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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
4.2. APLIC. SERV. DE VÍDEOS. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
• 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
4.2. APLIC. SERV. DE VÍDEOS. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
• 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
4.2. APLIC. SERV. DE VÍDEOS. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
◦ 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
4.2. APLIC. SERV. DE VÍDEOS. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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
4.2. APLIC. SERV. DE VÍDEOS. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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
4.2. APLIC. SERV. DE VÍDEOS. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
• 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 ’^admin/ ’ , 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 ’^add_videos /$ ’ , ’ v i d e o s . v i ews . v i d e o s ’ ) ,( r ’^add_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. APLIC. SERV. DE VÍDEOS. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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
4.2. APLIC. SERV. DE VÍDEOS. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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
4.2. APLIC. SERV. DE VÍDEOS. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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
4.2. APLIC. SERV. DE VÍDEOS. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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
4.2. APLIC. SERV. DE VÍDEOS. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
<!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
4.2. APLIC. SERV. DE VÍDEOS. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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
4.2. APLIC. SERV. DE VÍDEOS. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
<!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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
#!/ 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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
#!/ 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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
• 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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
î 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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
◦ 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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
. 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 ;
p o s i t i o n : a b s o l u t e ;
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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
. simb−p l a y {
p o s i t i o n : a b s o l u t e ;
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−s t y l e : s o l i d ;
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 {
p o s i t i o n : a b s o l u t e ;
w idth : 4px ; h e i g h t : 12px ;
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;
border−s t y l e : s o l i d ;
border−width : 0px 3px 0px 3px ; }
Figura 4.9: Símbolo pausa.
• Clase timer1.
Este elemento se diseña como un rectángulo de dimensiones 45x30 píxeles.
92
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
. 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 {
margin−top : 8px ;
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 %;
h e i g h t : 30px ;
f l o a t : l e f t ; }
• Clase progress.
93
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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 {
c u r s o r : p o i n t e r ! impo r tan t ;
w idth : 99 ,9%; h e i g h t : 9px ;
margin−top : 10px ;
/∗ 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 ) ;
p o s i t i o n : a b s o l u t e ;
−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 ; }
94
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
• 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 {
width : 0px ; h e i g h t : 9px ;
/∗ 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 (#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);
p o s i t i o n : a b s o l u t e ;
−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.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 ;
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 ; }
95
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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 ;
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 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 {
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 ; 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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
. simb−v o l {
p o s i t i o n : a b s o l u t e ;
w idth : 30px ; h e i g h t : 30px ;
margin−top : 5px ;
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 {
p o s i t i o n : a b s o l u t e ;
w idth : 30px ; h e i g h t : 30px ;
margin−top : 2px ;
margin− l e f t : 2px ;
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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
. l e v e l −c o n t a i n e r {
c u r s o r : p o i n t e r ! impo r tan t ;
f l o a t : l e f t ;
w idth : 55px ; h e i g h t : 5px ;
margin−top : 13px ;
/∗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 ;
/∗ 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 ) ; }
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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
. f u l l s c r e e n {
c u r s o r : p o i n t e r ! impo r tan t ;
w idth : 31px ;
h e i g h t : 30px ;
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 {
p o s i t i o n : a b s o l u t e ;
w idth : 30px ;
h e i g h t : 30px ;
margin−top : 6px ;
margin− l e f t : 6px ;
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{
p o s i t i o n : a b s o l u t e ;
w idth : 30px ;
h e i g h t : 30px ;
margin−top : 6px ;
margin− l e f t : 6px ;
background : u r l ( ’ f u l l s c r e e n_on . png ’ ) no−r e p e a t ; }
99
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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 ;
p o s i t i o n : a b s o l u t e ;
top : 50%; l e f t : 50%;
width : 80px ; h e i g h t : 80px ;
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 ;
−webkit−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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
. 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 ;
p o s i t i o n : a b s o l u t e ;
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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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 {
p o s i t i o n : a b s o l u t e ;
l e f t : 40 px ; top : 40px ;
w idth : 20px ; h e i g h t : 20px ;
background : #f f f ;
borde r−r a d i u s : 20px ;
−webki t−border−r a d i u s : 20px ;
−moz−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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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 ;
−moz−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 ;
p o s i t i o n : a b s o l u t e ;
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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
. o p t i o n {
h e i g h t : 30px ;
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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
• 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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
( 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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
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
4.4. REPRODUCTOR DE VÍDEO. CAPÍTULO 4. DESARROLLO DE LA APLICACIÓN.
116