Sencillo post para repasar el atributo poster HTML5, su funcionalidad es la de establecer una imagen de preview por defecto en los reproductores de vídeo. En la etiqueta audio no existe este atributo.
Otros post de HTML5 con información y ejemplos relevantes de vídeo y audio son:
- Atributo loop HTML5: Reproducción continua de vídeo y audio
- Atributo controls HTML5: Activar los controles en vídeo y audio
- Atributo mediagroup HTML5: Reproducción sincronizada de vídeo y audio
- Atributo autoplay HTML5: Reproducción automática de vídeo y audio
- Atributo muted HTML5: Silenciar los reproductores de vídeo y audio
- Atributo preload HTML5: Autocargar vídeos y audios
Sintaxis del atributo poster HTML5 para vídeo
Os voy a poner la sencilla sintaxis de este nuevo atributo para vídeo extraída de su web oficial:
1 2 3 |
<video width="600" height="400" controls poster="/imagen-preview.png"> <source src="video.mp4" type="video/mp4"> </video> |
Tal y como se aprecia en el código superior solo hay que añadir el atributo poster con la ruta de la imagen que hará de preview en el reproductor de vídeo.
- Con <video> indicamos que vamos que se va a embeber un vídeo, podemos asignar un alto y ancho al reproductor.
- Con <source> especificamos la ruta del vídeo a reproducir.
- Con poster establecemos la imagen de preview.
Ejemplos del atributo poster HTML5 en vídeo
Vayamos con un práctico ejemplo del atributo poster:
1 2 3 4 |
<video width="320" height="180" controls poster="027-ejemplo-etiqueta-video-html5-poster.png"> <source src="011-html5-video-golden_gate_bridge_timelapse_hd_stock_video.mp4" type="video/mp4"> Tu navegador no soporta HTML5 video. </video> |
Os explico el ejemplo superior:
- Tenemos la etiqueta video con los atributos height y width para dar las dimesiones del vídeo.
- Con el atributo controls mostramos los controles del player (play, pause, volumen…).
- Con el atributo poster establecemos la imagen de preview.
- En la etiqueta source establecemos la ruta (src) del vídeo a reproducir y definimos el tipo (video/mp4).
- En caso de que el navegador no soporte esta etiqueta mostramos un mensaje por pantalla.
Os pongo una imagen de ejemplo: