Acerca de este problema HTML
El atributo controlslist fue propuesto para dar a los desarrolladores una forma de indicar al navegador qué controles multimedia predeterminados mostrar u ocultar. Acepta valores como nodownload, nofullscreen y noremoteplayback, permitiéndote deshabilitar selectivamente botones específicos en la interfaz del reproductor multimedia integrado del navegador. Por ejemplo, controlslist="nodownload" oculta el botón de descarga en el reproductor de video.
Sin embargo, este atributo nunca fue adoptado en el WHATWG HTML Living Standard o en ninguna especificación del W3C. Sigue siendo una característica específica de Chromium, lo que significa que solo funciona en navegadores como Chrome y Edge. Firefox, Safari y otros navegadores que no son Chromium simplemente lo ignoran. Como no forma parte de ningún estándar, el Validador HTML del W3C correctamente lo reporta como un atributo inválido.
Aunque usar controlslist no romperá tu página —los navegadores que no lo reconocen simplemente lo ignorarán silenciosamente—, depender de atributos no estándar tiene desventajas:
- Cumplimiento de estándares: Tu HTML no se validará, lo que puede enmascarar otros problemas reales en los informes de validación.
- Compatibilidad del navegador: El comportamiento solo funciona en navegadores basados en Chromium, dando una experiencia inconsistente entre navegadores.
- Incertidumbre futura: Los atributos no estándar pueden ser eliminados o cambiados sin previo aviso.
Para solucionar esto, tienes varias opciones. La más simple es eliminar el atributo completamente si la personalización no es crítica. Si necesitas un control detallado sobre los botones del reproductor multimedia, el enfoque más robusto es construir controles multimedia personalizados usando JavaScript y la API HTMLMediaElement. Para el caso específico de deshabilitar la reproducción remota, hay un atributo estandarizado —disableremoteplayback— que puedes usar en su lugar.
Ejemplos
❌ Inválido: Usar el atributo no estándar controlslist
<video src="video.mp4" controls controlslist="nodownload nofullscreen"></video>El validador reportará: Atributo “controlslist” no permitido en el elemento “video” en este punto.
✅ Válido: Eliminar el atributo
<video src="video.mp4" controls></video>
La solución más simple es eliminar controlslist y aceptar los controles predeterminados del navegador.
✅ Válido: Usar controles personalizados con 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>
Al omitir el atributo controls y construir tu propia interfaz, tienes control total sobre qué botones aparecen —en todos los navegadores.
✅ Válido: Usar disableremoteplayback para esa necesidad específica
<video src="video.mp4" controls disableremoteplayback></video>
Si tu objetivo era específicamente controlslist="noremoteplayback", el atributo estandarizado disableremoteplayback logra el mismo resultado y es HTML válido.
Elemento audio
El mismo problema y soluciones aplican al elemento <audio>:
<!-- ❌ Inválido -->
<audio src="song.mp3" controls controlslist="nodownload"></audio>
<!-- ✅ Válido -->
<audio src="song.mp3" controls></audio>Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.