Controles de video con HTML5

Por user Nestor Plasencia Prado
Controles de video con HTML5

En este tutorial crearemos una aplicación para reproducir el clip de "El Aro", modificando el comportamiento de un video sin usar los clásicos controles de HTML5.

¡Hola, amigos de Devcode! Hoy vamos a crear una aplicación para dar play al video de la película “El aro”, dando click en la imagen de un control remoto. Podremos lograrlo gracias a las API’s de HTML5 que permiten modificar el comportamiento de un video sin usar los clásicos controles.

Para empezar, en HTML añadimos un elemento

 con la clase container, dentro de esta agregaremos dos elementos de imagen y un elemento de video, con las fuentes direccionadas hacia una imagen de fondo, el video a reproducir y la imagen del control remoto.
     

Al elemento container le asignamos medidas de ancho y alto, y la propiedad position en relative, para que los elementos control y video tengan propiedad absolute y se referencian a este elemento.

.container {
  position: relative;
  width: 560px;
  height: 400px;
}

Colocamos la clase de “background” a la imagen de fondo y en las medidas 100% para c todo el contenedor.


.background {
  width: 100%; 
  height: 100%;
}

Al elemento video le asignamos un id de “video”, y en css lo sacamos del flujo normal con la propiedad position absolute, para ubicarlo dentro del televisor utilizamos las propiedades top, left y width.


#video {
  position: absolute;
  top: 90px;
  left: 172px;
  width: 230px;
}

Finalmente, a la imagen que representa al control le asignamos la clase “control”, al igual que el video asignamos absolute a la propiedad position, para ubicarlo en la parte inferior derecha utilizamos las propiedades bottom y right, y por último agregamos dimensiones de alto y ancho.


.control {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 140px;
  height: 200px;
}

Una vez finalizado el ajuste de posición de los elementos, pasamos a programar la funcionalidad de nuestra aplicación.

Para indicar que se debe hacer click en la imagen del control remoto, asignamos pointer a la propiedad cursor, con la pseudoclase hover asignamos el dinamismo de crecimiento de la imagen con la propiedad transform particularmente el valor de scale.

Como deseamos que este crecimiento sea paulatino agregamos la propiedad transition con un tiempo de 0.2 segundos, el crecimiento debe darse de la esquina inferior derecha, por ello cambiamos el origen de las coordenadas con transform-origin.

.control {
  cursor: pointer;
  transition: all .2s ease-in-out;
  transform-origin: 100% 100%;
}
.control:hover {
  transform: scale(1.1);
}

Agregamos el evento onclick a la imagen del control remoto donde llamará a la función play().


En JavaScript guardamos el elemento video dentro de una variable.

var video = document.getElementById("video");

Finalmente creamos la función play(), donde mediante el método play del elemento video  podremos reproducir el video de Samara.

function play(){
  video.play();
}

Recuerda que si deseas aprender esta y muchas otras funcionalidades de las API’s de HTML5 en DevCode puedes inscribirte inmediatamente al Curso de API’s de HTML5. Además tenemos muchos otros cursos que complementarán tu aprendizaje. No olvides compartir el tutorial con tus amigos y dejarnos tus dudas u opiniones en la caja de comentarios. No olvides sivir los próximos 7 días. ¡Hasta pronto!

user

Nestor Plasencia Prado

Programmer | Developer | Maker | Robot Designer | Knowmad