Verificação HTML: Valor inválido "" para o atributo "src" no elemento "source": deve ser não vazio.

Sobre este problema HTML

O elemento <source> é usado dentro dos elementos <video>, <audio> e <picture> para especificar um ou mais recursos de media para o navegador escolher. O seu atributo src é definido como um URL válido e não vazio, o que significa que deve resolver para um caminho de ficheiro real ou endereço web. Uma string vazia não satisfaz este requisito e viola a especificação HTML.

Por que é um problema

Conformidade com padrões: O padrão WHATWG HTML living standard requer explicitamente que o atributo src em <source> seja um URL não vazio e válido. Um valor vazio torna o documento HTML inválido.

Comportamento inesperado do navegador: Quando um navegador encontra um src vazio, pode tentar resolvê-lo relativamente ao URL da página atual. Isto pode desencadear um pedido HTTP desnecessário de volta à página atual, resultando em desperdício de largura de banda, carga inesperada no servidor ou erros confusos nos seus logs de rede.

Reprodução de media interrompida: Um src vazio significa que o navegador não tem nenhum ficheiro de media para carregar. Se o elemento <source> for o único fornecido, o elemento de media falhará completamente na reprodução — frequentemente sem uma indicação clara ao utilizador do que correu mal.

Preocupações de acessibilidade: Leitores de ecrã e tecnologias assistivas dependem de HTML bem formado. Marcação inválida pode levar a comportamento imprevisível ou anúncios de conteúdo perdidos para utilizadores que dependem destas ferramentas.

Como corrigir

Forneça um URL válido — Defina o atributo src para o caminho ou URL correto do seu ficheiro de media.
Remova o elemento — Se a fonte de media ainda não estiver disponível ou estiver a ser definida dinamicamente via JavaScript, remova o elemento <source> do HTML completamente e adicione-o mais tarde através de script quando o URL for conhecido.
Verifique problemas de template ou CMS — Este erro aparece frequentemente quando um CMS ou motor de templates produz uma tag <source> com uma variável vazia. Certifique-se de que o seu template renderiza condicionalmente o elemento apenas quando existe um URL válido.

Exemplos

Incorreto: `src` vazio em `<source>` num vídeo

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

Correto: URL válido em `src`

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

Incorreto: `src` vazio em `<source>` num elemento picture

<picture>
  <source src="" type="image/webp">
  <img src="photo.jpg" alt="A sunset over the ocean">
</picture>

Note que <source> dentro de <picture> usa srcset, não src. Este exemplo está duplamente errado — o atributo está vazio e incorreto. Aqui está a correção:

Correto: usar `srcset` com um URL válido num elemento picture

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="A sunset over the ocean">
</picture>

Incorreto: múltiplas fontes com um `src` vazio

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="" type="audio/mpeg">
</audio>

Correto: remova a fonte se nenhum ficheiro estiver disponível

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
</audio>

Correto: adicionar fontes condicionalmente com JavaScript

Se o URL for determinado em tempo de execução, evite colocar um <source> vazio na sua marcação. Em vez disso, adicione-o dinamicamente:

<video id="player" controls>
  Your browser does not support the video tag.
</video>
<script>
  const videoUrl = getVideoUrl(); // your logic here
  if (videoUrl) {
    const source = document.createElement("source");
    source.src = videoUrl;
    source.type = "video/mp4";
    document.getElementById("player").appendChild(source);
  }
</script>

Esta abordagem mantém o seu HTML válido em todos os momentos e apenas insere um elemento <source> quando um URL real está disponível.