Validación HTML: Valor incorrecto "" para el atributo "src" en el elemento "source": debe ser no vacío.

Acerca de este problema HTML

El elemento <source> se usa dentro de elementos <video>, <audio> y <picture> para especificar uno o más recursos multimedia de los cuales el navegador puede elegir. Su atributo src se define como una URL válida y no vacía, lo que significa que debe resolver a una ruta de archivo real o una dirección web. Una cadena vacía no satisface este requisito y viola la especificación HTML.

Por qué es un problema

Cumplimiento de estándares: El estándar vivo de HTML de WHATWG requiere explícitamente que el atributo src en <source> sea una URL válida y no vacía. Un valor vacío hace que el documento sea HTML inválido.

Comportamiento inesperado del navegador: Cuando un navegador encuentra un src vacío, puede intentar resolverlo relativo a la URL de la página actual. Esto puede desencadenar una petición HTTP innecesaria de vuelta a la página actual, resultando en desperdicio de ancho de banda, carga inesperada del servidor, o errores confusos en tus registros de red.

Reproducción multimedia defectuosa: Un src vacío significa que el navegador no tiene ningún archivo multimedia para cargar. Si el elemento <source> es el único proporcionado, el elemento multimedia fallará al reproducirse completamente — a menudo sin una indicación clara al usuario de qué fue lo que salió mal.

Preocupaciones de accesibilidad: Los lectores de pantalla y las tecnologías asistivas dependen de HTML bien formado. El marcado inválido puede llevar a comportamiento impredecible o anuncios de contenido perdidos para usuarios que dependen de estas herramientas.

Cómo solucionarlo

Proporciona una URL válida — Establece el atributo src a la ruta o URL correcta de tu archivo multimedia.
Elimina el elemento — Si la fuente multimedia aún no está disponible o se está estableciendo dinámicamente vía JavaScript, elimina completamente el elemento <source> del HTML y agrégalo más tarde a través de script cuando la URL sea conocida.
Revisa problemas de plantilla o CMS — Este error aparece a menudo cuando un CMS o motor de plantillas genera una etiqueta <source> con una variable vacía. Asegúrate de que tu plantilla renderice condicionalmente el elemento solo cuando exista una URL válida.

Ejemplos

Incorrecto: `src` vacío en `<source>` en un video

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

Correcto: URL válida en `src`

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

Incorrecto: `src` vacío en `<source>` en un elemento picture

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

Ten en cuenta que <source> dentro de <picture> usa srcset, no src. Este ejemplo está doblemente mal — el atributo está tanto vacío como es incorrecto. Aquí está la solución:

Correcto: usando `srcset` con una URL válida en un elemento picture

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

Incorrecto: múltiples fuentes con un `src` vacío

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

Correcto: elimina la fuente si no hay archivo disponible

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

Correcto: agregar fuentes condicionalmente con JavaScript

Si la URL se determina en tiempo de ejecución, evita colocar un <source> vacío en tu marcado. En su lugar, agrégalo dinámicamente:

<video id="player" controls>
  Your browser does not support the video tag.
</video>
<script>
  const videoUrl = getVideoUrl(); // tu lógica aquí
  if (videoUrl) {
    const source = document.createElement("source");
    source.src = videoUrl;
    source.type = "video/mp4";
    document.getElementById("player").appendChild(source);
  }
</script>

Este enfoque mantiene tu HTML válido en todo momento y solo inserta un elemento <source> cuando una URL real esté disponible.