Introducción: en este artículo, vamos a aprender cómo configurar una imagen en miniatura para un video HTML5. La miniatura es la imagen que se muestra como una vista previa del video. Básicamente se usa para representar lo que contiene el video o con qué está relacionado. Se muestra hasta el momento en que se inicia el vídeo. De manera predeterminada, el primer cuadro del video se muestra como la vista previa inicial del video.
Enfoque: A veces, el usuario quiere mostrar una imagen específica de su elección como miniatura del video. Esto se puede hacer simplemente usando el atributo poster. Todo lo que tiene que hacer es crear un atributo de póster en la etiqueta de video y colocar la URL de la imagen en miniatura en él.
Sintaxis:
<video height="" width="" poster="URL of the image to be displayed">
Ejemplo:
<!DOCTYPE html> <html> <body> <video width="400" height="350" controls poster= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <source src= "https://media.geeksforgeeks.org/wp-content/uploads/20200409094356/Placement100-_-GeeksforGeeks2.mp4" type="video/mp4"> </video> </body> </html>
Producción:
Explicación: el atributo de póster de la etiqueta de video contiene la URL de la imagen que el usuario desea establecer como miniatura del video, que es la imagen que estará visible hasta que el usuario presione el botón de reproducción. El atributo src contiene la URL del video y el atributo de control muestra funciones como reproducción/pausa/búsqueda/volumen en el video.
Para obtener más información sobre la etiqueta de video HTML, visite aquí
Publicación traducida automáticamente
Artículo escrito por preetikagupta8171 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA