Podremos lograrlo gracias a las API’s de HTML5 que permiten modificar el comportamiento de un video sin usar los clásicos controles.
Controles de video con HTML5 y Js
Como usar Javascript para crear la función
Empezar
Hoy vamos a crear una aplicación para dar play a un video sorpresa, dando click en la imagen de un control remoto
10
¿Listo para comenzar? ¡Haz clic en el enlace al editor y sorprendete!
Ir a CodePen
Importante: Nunca olvides de guardar tu proyecto en la medida que vas avanzando.
10
¡Hola, amigos de Play Code! Hoy vamos a crear una aplicación para dar play al video dando click en la imagen de un control remoto.
Puedes probarlo aqui
10
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
10
Luego en la hoja de estilos le asignamos al cuerpo la ubicacion de los elementos cargados en Html.
10
Seguimos dandole estilo a nuestro proyecto, para lograr eso al elemento container le asignamos medidas de ancho y alto, y la propiedad position en relative.
10
A la imagen de fondo en CSS a las medidas las colocamos 100% para que cubra todo el contenedor.
10
Al elemento video lo colocamos en la posición normal con la propiedad position absolute, para ubicarlo dentro del televisor utilizamos las propiedades top, left y width.
10
En CSS ajustamos la posición de los elementos y para indicar que se debe hacer click en la imagen del control remoto, asignamos pointer a la propiedad cursor y 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.
10
Añadimos la pseudoclase hover y asignamos el dinamismo de crecimiento de la imagen con la propiedad transform particularmente el valor de scale.
En nuestro editor nos vamos a la pestaña JavaScript y guardamos el elemento video dentro de una variable. Finalmente creamos la función play(), donde mediante el método play del elemento video podremos reproducir nuestro video.
10
Controles de video con HTML5
Erica De Pacheco
Created on September 30, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Magazine dossier
View
Momentum: Onboarding Escape Game
View
Momentum: Manager Guide
View
Wizardry Letter
View
Search Bar Card
View
Piñata
View
Microlearning: When to Use Chat, Meetings or Email
Explore all templates
Transcript
Podremos lograrlo gracias a las API’s de HTML5 que permiten modificar el comportamiento de un video sin usar los clásicos controles.
Controles de video con HTML5 y Js
Como usar Javascript para crear la función
Empezar
Hoy vamos a crear una aplicación para dar play a un video sorpresa, dando click en la imagen de un control remoto
10
¿Listo para comenzar? ¡Haz clic en el enlace al editor y sorprendete!
Ir a CodePen
Importante: Nunca olvides de guardar tu proyecto en la medida que vas avanzando.
10
¡Hola, amigos de Play Code! Hoy vamos a crear una aplicación para dar play al video dando click en la imagen de un control remoto.
Puedes probarlo aqui
10
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
10
Luego en la hoja de estilos le asignamos al cuerpo la ubicacion de los elementos cargados en Html.
10
Seguimos dandole estilo a nuestro proyecto, para lograr eso al elemento container le asignamos medidas de ancho y alto, y la propiedad position en relative.
10
A la imagen de fondo en CSS a las medidas las colocamos 100% para que cubra todo el contenedor.
10
Al elemento video lo colocamos en la posición normal con la propiedad position absolute, para ubicarlo dentro del televisor utilizamos las propiedades top, left y width.
10
En CSS ajustamos la posición de los elementos y para indicar que se debe hacer click en la imagen del control remoto, asignamos pointer a la propiedad cursor y 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.
10
Añadimos la pseudoclase hover y asignamos el dinamismo de crecimiento de la imagen con la propiedad transform particularmente el valor de scale.
En nuestro editor nos vamos a la pestaña JavaScript y guardamos el elemento video dentro de una variable. Finalmente creamos la función play(), donde mediante el método play del elemento video podremos reproducir nuestro video.
10