Otro uso interesante de JavaScript puede consistir en dotar
de funcionalidad a botones que sirvan para controlar la reproducción
de vídeos. Para ejercitarte en este tipo de uso, se te propone una
nueva serie de ejercicios publicados por Víctor Jiménez en
su web para
la asignatura:
- Crea una página web con varios vídeos sin reproducción
automática ni controles por defecto. Cada vídeo debe tener un
borde visible alrededor y se debe reproducir cuando el usuario
sitúe el ratón dentro del espacio delimitado por ese
borde. Además, el vídeo seleccionado ha de distinguirse por
su color de fondo. Cuando el usuario sitúe el ratón fuera de ese
borde, la reproducción se debe detener en el instante en que
esté (y debe perderse el color distintivo). Debe ser posible
añadir nuevos vídeos a la página sin tener que modificar nada
del código JavaScript. Los eventos de los vídeos a los que
conviene añadir manejadores son
mouseover y
mouseout.
- Modifica la solución al ejercicio anterior para controlar la
reproducción de los vídeos no mediante la posición del ratón,
sino ya haciendo uso de botones, que en este ejercicio serán
dos. Ahora, la forma de seleccionar un vídeo será haciendo clic
en él, pero seleccionar ya no debe implicar reproducir (ni
perder la selección debe detener el vídeo), sino responder a los
botones. En concreto, el primer botón deben servir para
reproducir el vídeo seleccionado; el segundo, para
detenerlo. Por lo tanto, el usuario podrá tener varios vídeos
reproduciéndose simultáneamente si así lo desea.
- Enriquece la solución del ejercicio anterior añadiendo los
siguientes botones:
- Uno que permita duplicar la velocidad de reproducción del
vídeo seleccionado si no está detenido (pulsar el botón de
reproducción del ejercicio anterior debe reestablecer su
velocidad por defecto).
- Tres para controlar el sonido del vídeo seleccionado:
aumentar volumen, disminuir volumen y quitar/reestablecer
sonido.
- Uno que permita detener todos los vídeos.
Como indicaciones generales para la resolución de estos
ejercicios, sigue las mismas que para
los ejercicios de la semana
pasada.