HTML | Atributo del cartel <video>

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

Publicación traducida automáticamente

Artículo escrito por jit_t y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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