Verificação HTML: Valor inválido "" para o atributo "poster" no elemento "video": Deve ser não vazio.

Sobre este problema HTML

O atributo poster indica ao navegador qual imagem exibir como frame de pré-visualização antes do utilizador reproduzir o vídeo. De acordo com o WHATWG HTML Living Standard, o valor do atributo poster deve ser um URL válido não vazio potencialmente rodeado por espaços. Quando você inclui poster="", o atributo está presente mas o seu valor é uma string vazia, que não é um URL válido — desencadeando o erro do validador W3C: Valor inválido “” para o atributo “poster” no elemento “video”: Deve ser não vazio.

Esta questão ocorre comumente em alguns cenários:

Saída de template ou CMS onde o URL do poster é gerado dinamicamente mas a variável resolve para uma string vazia (por exemplo, poster="<?= $posterUrl ?>" quando $posterUrl está vazio).
Frameworks JavaScript que vinculam um valor ao atributo poster, mas a variável vinculada é null, undefined, ou uma string vazia.
Edição manual onde um programador adiciona o atributo como placeholder com intenção de o preencher mais tarde.

Porque isto importa

Embora a maioria dos navegadores lidem graciosamente com um atributo poster vazio simplesmente não exibindo uma imagem de poster, existem boas razões para corrigir isto:

Conformidade com padrões: Um valor poster vazio viola a especificação HTML. Markup válido garante comportamento previsível em todos os navegadores e dispositivos.
Pedidos de rede desnecessários: Alguns navegadores podem tentar resolver a string vazia como um URL relativo, potencialmente desencadeando um pedido HTTP falhado para o URL da página atual. Isto desperdiça largura de banda e confunde as ferramentas de programador e logs do servidor com erros espúrios.
Acessibilidade: Leitores de ecrã e tecnologias assistivas podem interpretar o atributo vazio de forma inconsistente, levando a anúncios confusos para utilizadores.

Como corrigir

Você tem duas opções diretas:

Fornecer um URL de imagem válido — Se quer um frame de poster, defina o valor para um caminho de imagem real.
Remover o atributo completamente — Se não precisa de uma imagem de poster, simplesmente omita poster. O navegador irá mostrar nada ou exibir o primeiro frame do vídeo uma vez que dados suficientes tenham carregado, dependendo da configuração do atributo preload.

Se o valor vazio vem de código dinâmico, adicione uma verificação condicional para que o atributo poster seja apenas renderizado quando um URL está realmente disponível.

Exemplos

❌ Inválido: Atributo `poster` vazio

<video controls poster="">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Isto desencadeia o erro de validação porque poster está presente mas não tem valor.

✅ Corrigido: Atributo poster com um URL válido

<video controls poster="thumbnail.jpg">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

O atributo poster agora aponta para um ficheiro de imagem válido que o navegador irá exibir antes da reprodução começar.

✅ Corrigido: Atributo poster removido completamente

<video controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Quando não é necessária uma imagem de poster, omitir o atributo é a solução mais limpa.

✅ Corrigido: Renderização condicional num template

Se está a usar uma linguagem de templates ou framework, inclua condicionalmente o atributo apenas quando existe um valor. Aqui está um exemplo conceptual usando um template server-side:

<!-- Sintaxe pseudo-template: apenas renderizar poster quando posterUrl não está vazio -->

<video controls {{#if posterUrl}}poster="{{posterUrl}}"{{/if}}>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Este padrão impede que o poster="" vazio chegue ao HTML renderizado, mantendo a sua saída válida independentemente de um URL de poster estar disponível ou não.