El Atributo POSTER

El atributo poster en HTML se utiliza específicamente con el elemento <video> para definir una imagen que se muestra como vista previa antes de que el video comience a reproducirse. Esta imagen actúa como una "miniatura" o portada del video, mejorando la experiencia del usuario y proporcionando contexto visual. A continuación, te explicamos cómo implementarlo correctamente.

1. Introducción al atributo poster

• Propósito: Mostrar una imagen estática antes de que el video se cargue o reproduzca.

• Casos de uso:

  • Miniaturas personalizadas para videos.

  • Evitar un espacio en blanco mientras el video se carga.

  • Mostrar un marco específico del video (ej.: portada, logo o texto descriptivo).

• Compatibilidad: Todos los navegadores modernos (Chrome, Firefox, Safari, Edge).

2. Sintaxis básica

El atributo poster se incluye dentro de la etiqueta <video> y apunta a la URL de una imagen:

<video controls poster="ruta-de-la-imagen.jpg">
  <source src="video.mp4" type="video/mp4">
  Tu navegador no soporta el elemento de video.
</video>

3. Ejemplos prácticos

Ejemplo 1: Portada personalizada

<video 
  controls 
  width="600" 
  poster="portada.jpg"
>
  <source src="presentacion.mp4" type="video/mp4">
  <source src="presentacion.webm" type="video/webm">
  Descarga el <a href="presentacion.mp4">video</a> si no se reproduce.
</video>

Ejemplo 2: Marco específico del video

Si quieres mostrar el primer fotograma del video como portada, puedes generarlo con herramientas de edición y usarlo en poster:

<video controls poster="primer-fotograma.png">
  <source src="tutorial.mp4" type="video/mp4">
</video>

4. Buenas prácticas

• Optimiza la imagen: Usa formatos como JPEG, WebP o PNG comprimido para reducir el tiempo de carga.

• Coherencia de tamaño: La imagen del poster debe tener las mismas dimensiones que el video para evitar distorsiones.

• Accesibilidad:

  • Proporciona un texto alternativo indirecto mediante etiquetas cercanas (ej.: <figcaption> si usas <figure>).

  html

  Copy

  <figure>
    <video controls poster="portada.jpg">
      <source src="video.mp4" type="video/mp4">
    </video>
    <figcaption>Video explicativo: Cómo usar el atributo poster.</figcaption>
  </figure>

   

• Run HTML

• Fallback: Si el navegador no soporta <video>, se mostrará el texto dentro de la etiqueta.

5. Estilización con CSS

Puedes personalizar la apariencia del contenedor del video y su portada:

video {
  border: 2px solid #333;
  border-radius: 8px;
  background-color: #000; /* Fondo si la imagen no cubre todo el espacio */
}

/* Ajustar la imagen del poster al contenedor */
video::poster {
  object-fit: cover; /* Evita deformaciones */
}

6. Comportamiento en diferentes escenarios

• Mientras el video se carga: El poster se muestra hasta que el video esté listo.

• Después de la reproducción:

  • Si el video termina, algunos navegadores vuelven a mostrar el poster; otros mantienen el último fotograma.

  • Para forzar que el poster reaparezca, usa JavaScript:

  javascript

  Copy

  const video = document.querySelector('video');
  video.addEventListener('ended', () => {
    video.load(); // Reinicia el video y muestra el poster
  });

7. Errores comunes

1. Ruta incorrecta de la imagen: Verifica que la URL en poster sea válida.

2. Imagen no optimizada: Una imagen pesada retrasará la carga de la página.

3. Ignorar la accesibilidad: No olvides agregar descripciones para usuarios con discapacidad visual.

8. Conclusión

El atributo poster es esencial para:

• Mejorar la presentación visual de los videos.

• Guiar a los usuarios con una vista previa relevante.

• Evitar espacios vacíos durante la carga.

¡Recuerda!

• Usa imágenes de alta calidad pero optimizadas.

• Combina poster con otros atributos como controls, loop o muted para mayor funcionalidad.

• Prueba en múltiples navegadores y dispositivos para garantizar compatibilidad.