A propriedade Cartaz do vídeo é usada para definir ou retornar o valor do atributo cartaz de um vídeo . O atributo poster é usado especificamente para exibir uma imagem enquanto o vídeo está sendo baixado ou até que o botão de reprodução seja pressionado pelo usuário.
O primeiro quadro do vídeo é exibido se a opção de pôster não estiver incluída.

Sintaxe:
Retorne a propriedade do pôster:

videoObject.poster

Defina a propriedade do pôster:

videoObject.poster = URL

Valores de propriedade

  • URL: é usado para especificar o URL do arquivo de imagem.

O programa abaixo ilustra a propriedade do pôster de vídeo:

Exemplo: Alterar a imagem do pôster de um vídeo.

<!DOCTYPE html>
<html>
  
<head>
  <title>DOM Video poster Property</title>
</head>
  
<body style="text-align:center">
  
    <h1 style="color:green">
      GeeksforGeeks
  </h1>
    <h2 style="font-family: Impact">
      Video Poster Property
  </h2>
    <br>
  
    <video id="Test_Video" 
           width="360" 
           height="240" 
           poster="gfg_200X200.png" 
           controls>
        
        <source src="samplevideo.mp4"
                type="video/mp4">
        <source src="movie.ogg" 
                type="video/ogg">
    </video>
  
    <p>To change the poster image,
      double click the "Change Poster" button.</p>
  
    <button ondblclick="My_Video()"
            type="button">Change Poster</button>
  
    <script>
        function My_Video() {
            document.getElementById(
              "Test_Video").poster = "Unknown.png";
        }
    </script>
  
</body>
  
</html>


Resultado: 
Antes de clicar no botão:


Depois de clicar no botão:


Navegadores Suportados:


  • Apple Safari
  • Internet Explorer
  • Raposa de fogo
  • Google Chrome
  • Ópera