DROPCODING BLOG

Añade una imagen de miniatura en un vídeo HTML (atributo poster)

Cuando vayas a poner un vídeo en tu página web o en cualquier documento de HTML has de saber que puedes modificar la imagen que se ve cuando se carga el vídeo. De esta forma, se verá la imagen que tu quieras antes de darle al «play», es decir, antes de la reproducción del vídeo.

Esto es algo bastante simple, que podemos hacer con el atributo poster de HTML. A continuación te explico como puedes utilizarlo para agregar tus miniaturas en cualquier vídeo en HTML.

Agregar miniatura en vídeo con atributo poster

Todo lo que tenemos que hacer es crear nuestro vídeo en HTML, como siempre y luego añadir este atributo poster dentro de la etiqueta <vídeo>.

Te dejo un ejemplo de como hacerlo a continuación.

Si te fijas, en el atributo poster siempre hay que declarar la ruta de la imagen que queramos mostrar (como es lógico).

Y de esta forma tan simple podemos mostrar la imagen que nosotros queramos en nuestros vídeos HTML cuando se carga la página, antes de su reproducción.

Como siempre ya sabes que puedes dejarme tus dudas o sugerencias en los comentarios y te responderé lo más rápido posible.

Apúntate a la Newsletter y Mejora tus Habilidades

Conoce los secretos mejor guardados sobre el Diseño y el Desarrollo Web.

Suscríbete

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *