Sesión de Laboratorio 10: Práctica 4_1

Tiempo: 2h
Fecha: Jueves, 28-Marzo-2019
Objetivos de la sesión:
- Presentar la práctica 4
- Aprender a usar los eventos de ratón
- Experimentar con el vídeo local y remoto

Contenido

Enunciado práctica 4
Actividades guiadas
Actividades NO guiadas
Autores
Licencia
Enlaces

Enunciado Práctica 4

Realizador de TV. El objetivo de esta práctica es aprender a manejar vídeo y audio en los clientes javascript. Se propone realizar una aplicación web para un realizador de televisión, que tiene varias fuentes de vídeo disponibles y debe seleccionar en cada momento qué mostrar en la señal de vídeo final que se está retransmitiendo

La aplicación deberá mostrar las tres fuentes de vídeo, sin audio. Mediante tres botones, se selecciona la fuente a mostrar. Deberá indicarse mediante un recuadro la fuente que se está visualizando actualmente

El audio de cada fuente sólo se escuchará si se sitúa el ratón encima de ella. Esto permite cambiar rápidamente de una fuente a otra

Deberá mostrar un reloj digital con el tiempo de reproducción del vídeo

La aplicación debe poder definir bucles, para que la fuente seleccionada se reproduzca en bucle: desde el segundo inicial al final. Mediante un botón se indicará si se aplica el loop o no a la fuente actual

¿Se te ocurren mejoras? ¡Adelante! ¡Impleméntalas! Da rienda suelta a tu creatividad

Actividades guiadas

Preparar práctica 4

Créate en el github un repositorio con este nombre: 2018-19-CSAAI-Video
¡Importante!. Al crear el repo inicialízalo con un README
Cambia las propiedades del repo para que sea accesible como un página web

Eventos de ratón

El movimiento del ratón sobre los diferentes elementos de la página web genera eventos que podemos capturar desde nuestros programas javascript, de igual manera que hicimos con las teclas. Se puede encontrar más información sobre estos eventos en este enlace: Eventos de raton: W3school

Detectando el ratón sobre un elemento

Para detectar cuándo el ratón se ha situado sobre un elemento usamos el evento mouseover. Vamos a probarlo con un ejemplo. En el fichero HTML ponermos un párrafo, identificado como parrafo

<!DOCTYPE html>
<html lang="s" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Mouse 01</title>
    <script src="mouse-01.js"></script>
  </head>
  <body onload="main();">
    <p id="parrafo">Pasa el ratón por encima de este párrafo</p>
  </body>
</html>

Desde el fichero javascript establecemos una función de retrollamada para que se imprima en la consola un mensaje cada vez que el ratón pasa por encima del párrafo

function main()
{
  console.log("Probando...")

  parrafo = document.getElementById('parrafo')

  parrafo.onmouseover = () => {
    console.log("Mouse over!!")
  }
}

Lo probamos desde el navegador. Este es el resultado. El evento sólo se activa cuando el ratón entra en el párrafo. Una vez dentro no se vuelve a producir hasta que el ratón sale y vuelve a entrar

Detectando cuándo el ratón sale de un elemento

Para saber cuándo el ratón ha abandonado un elemento, usamos el evento mouseout. Haremos el mismo ejemplo, pero cambiando el color del fondo del párrafo al entrar con el ratón y se restaurándolo al salir. El fichero javascript es el siguiente:

function main()
{
  console.log("Probando2...")

  parrafo = document.getElementById('parrafo')

  parrafo.onmouseover = () => {
    console.log("Mouse over!!")
    parrafo.style.backgroundColor = "red"
  }

  parrafo.onmouseout = () => {
    console.log("Mouse out!!")
    parrafo.style.backgroundColor = ""
  }
}

Este es el resultado al probarlo en el navegador:

Reproducción de vídeo local

Para hacer pruebas con vídeo es muy útil utilizar ficheros .mp4 de vídeo almacenados localmente, ya que pueden tener un tamaño mayor. Para reproducirlo se usa la etiqueta <video> a la que se agregan atributos. Puedes encontrar la lista de todos los atributos en este enlace: Atributos vídeo html5 (w3school)

Los atributos que vamos a usar en este ejemplo son:

autoplay: El vídeo arranca al cargarse la página
loop: El vídeo se reproduce en bucle: en cuanto acabe vuelve a empezar
muted: Silenciar el vídeo. El audio no se reproduce

Este es el fichero html:

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Video 01</title>
    <script src="video-01.js"></script>
  </head>
  <body onload="main();">
    <p>Prueba de video</p>
    <video id="video1" autoplay loop muted>
      <source src="video-src-01-robot.mp4"/>
    </video>
  </body>
</html>

El fichero con el vídeo que se está empleando es este: video-src-01-robot.mp4

El programa en javascript escribe una traza en la consola para comprobar que se está ejecutando correctamente y establece el tamaño del vídeo a 200x100 píxeles

function main()
{
  console.log("Video 01...")

  //-- Obtener el elemento de video
  video1 = document.getElementById("video1")

  //-- Establecer el tamaño del vídeo
  video1.width = 200;
  video1.height= 100;
}

Al probarlo en el navegador obtenemos esto:

Especificando una fuente remota de vídeo

Para la reproducción del vídeo se puede indicar cualquier fuente remota, situada en algún servidor de internet. Simplemente hay que por la URL en el atributo src de la etiqueta <source> dentro del elemento vídeo

En este ejemplo no se especifica ninguna fuente en el fichero HTML. Se ha colocado un botón para visualizar el vídeo. Cuando se aprieta se selecciona una fuente de vídeo remota

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Video 02</title>
    <script src="video-02.js"></script>
  </head>
  <body onload="main();">
    <p>Prueba de video</p>
    <video id="video1" autoplay loop muted></video>
    <br>
    <button type="button" id="play">VER VIDEO</button>
  </body>
</html>

Este es el programa javascript:

function main()
{
  console.log("Video 02...")

  //-- Obtener el elemento de video
  video1 = document.getElementById("video1")

  //-- Establecer el tamaño del vídeo
  video1.width = 200;
  video1.height= 100;

  //-- Boton de Play
  ver = document.getElementById('play')

  //-- Al apretar el boton de ver video
  ver.onclick = () => {
    console.log("Ver!")

    //-- Indicar la fuente del vídeo
    video1.src ="https://gsyc.urjc.es/jmplaza/csaai/realizador-fuente1.mp4"
  }
}

Cuando se carga la página no aparece nada, porque no hay ningún vídeo seleccionado. Al apretar el botón se añade la fuente en el atributo src del elemento video1 y el vídeo aparece y se empieza a reproducir