El atributo de póster HTML <video> se usa para mostrar la imagen mientras se descarga el video o cuando el usuario hace clic en el botón de reproducción. Si esta imagen no está configurada, tomará el primer cuadro de video como una imagen de póster.
Sintaxis:
<video poster="URL">
Valores de atributo: contiene una URL de valor único que especifica el enlace de la imagen de origen. Hay dos tipos de enlaces URL que se enumeran a continuación:
- URL absoluta: Apunta a otra página web.
- URL relativa: Apunta a otros archivos de la misma página web.
Ejemplo:
html
<!DOCTYPE html> <html> <head> <title>HTML video poster Attribute</title> </head> <body> <center> <h1 style="color:green;">GeeksforGeeks</h1> <h3>HTML video poster Attribute</h3> <video width="400" height="200" controls poster= "https://media.geeksforgeeks.org/wp-content/uploads/20190627130930/a218.png"> <source src= "https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4" type="video/mp4"> <source src= "https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.ogg" type="video/ogg"> </video> </center> </body> </html>
Producción:
Nota: Siempre especifique el ancho y el alto del video, de lo contrario, la página web se confundirá con la cantidad de espacio que se requerirá para ese video debido a que la página web se ralentizará.
Navegadores compatibles: los navegadores compatibles con el atributo de póster HTML <video> se enumeran a continuación:
- Google Chrome 3.0 y superior
- Borde 12.0 y superior
- Firefox 3.6 y superior
- Internet Explorer 9.0 y superior
- Ópera 10.5 y superior
- Safari 3.1 y superior