Sobre este problema HTML
O atributo controlslist foi proposto para dar aos programadores uma forma de sugerir ao navegador quais controlos de média padrão mostrar ou esconder. Aceita valores como nodownload, nofullscreen e noremoteplayback, permitindo desativar seletivamente botões específicos na interface do reprodutor de média incorporado no navegador. Por exemplo, controlslist="nodownload" esconde o botão de descarregamento no reprodutor de vídeo.
No entanto, este atributo nunca foi adotado no WHATWG HTML Living Standard ou em qualquer especificação W3C. Permanece uma funcionalidade específica do Chromium, o que significa que só funciona em navegadores como Chrome e Edge. Firefox, Safari e outros navegadores não-Chromium simplesmente ignoram-no. Porque não faz parte de qualquer padrão, o Validador HTML W3C corretamente reporta-o como um atributo inválido.
Embora usar controlslist não vá quebrar a sua página — navegadores que não o reconhecem vão ignorá-lo silenciosamente — depender de atributos não padronizados tem desvantagens:
- Conformidade com padrões: O seu HTML não vai validar, o que pode mascarar outros problemas reais nos relatórios de validação.
- Compatibilidade do navegador: O comportamento só funciona em navegadores baseados no Chromium, dando uma experiência inconsistente entre navegadores.
- Incerteza futura: Atributos não padronizados podem ser removidos ou alterados sem aviso.
Para corrigir isto, tem algumas opções. A mais simples é remover completamente o atributo se a personalização não for crítica. Se precisa de controlo detalhado sobre os botões do reprodutor de média, a abordagem mais robusta é construir controlos de média personalizados usando JavaScript e a API HTMLMediaElement. Para o caso específico de desativar a reprodução remota, existe um atributo padronizado — disableremoteplayback — que pode usar em vez disso.
Exemplos
❌ Inválido: Usar o atributo não padronizado controlslist
<video src="video.mp4" controls controlslist="nodownload nofullscreen"></video>O validador reportará: Atributo “controlslist” não permitido no elemento “video” neste ponto.
✅ Válido: Remover o atributo
<video src="video.mp4" controls></video>
A correção mais simples é remover controlslist e aceitar os controlos padrão do navegador.
✅ Válido: Usar controlos personalizados com JavaScript
<video id="my-video" src="video.mp4"></video>
<div class="custom-controls">
<button id="play-btn">Play</button>
<input id="seek-bar" type="range" min="0" max="100" value="0">
<button id="fullscreen-btn">Fullscreen</button>
</div>
<script>
const video = document.getElementById("my-video");
document.getElementById("play-btn").addEventListener("click", () => {
video.paused ? video.play() : video.pause();
});
</script>
Ao omitir o atributo controls e construir a sua própria interface, tem controlo total sobre quais botões aparecem — em todos os navegadores.
✅ Válido: Usar disableremoteplayback para essa necessidade específica
<video src="video.mp4" controls disableremoteplayback></video>
Se o seu objetivo era especificamente controlslist="noremoteplayback", o atributo padronizado disableremoteplayback alcança o mesmo resultado e é HTML válido.
Elemento audio
O mesmo problema e soluções aplicam-se ao elemento <audio>:
<!-- ❌ Inválido -->
<audio src="song.mp3" controls controlslist="nodownload"></audio>
<!-- ✅ Válido -->
<audio src="song.mp3" controls></audio>Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.