DOMException: no se pudo cargar porque no se encontró una fuente compatible

No dejes de divulgar nuestro espacio y códigos en tus redes sociales, necesitamos de tu ayuda para ampliar nuestra comunidad.

Solución:

Este problema ocurre en los navegadores Chrome/Chromium más nuevos a partir de v50

De HTMLMediaElement.play() devuelve una promesa de los desarrolladores de Google:

La reproducción automática de audio y video en la web es una capacidad poderosa y está sujeta a diferentes restricciones en diferentes plataformas. Hoy en día, la mayoría de los navegadores de escritorio siempre permitirán que las páginas web comiencen o reproducción a través de JavaScript sin interacción del usuario. Sin embargo, la mayoría de los navegadores móviles requieren un gesto explícito del usuario antes de que pueda ocurrir la reproducción iniciada por JavaScript. Esto ayuda a garantizar que los usuarios móviles, muchos de los cuales pagan por el ancho de banda o que pueden estar en un entorno público, no comiencen accidentalmente a descargar y reproducir medios sin interactuar explícitamente con la página.

Históricamente, ha sido difícil determinar si se requiere la interacción del usuario para iniciar la reproducción y detectar las fallas que ocurren cuando se intenta la reproducción (automática) y falla. Existen varias soluciones alternativas, pero son menos que ideales. Una mejora del subyacente play() Hace mucho tiempo que se necesitaba un método para abordar esta incertidumbre, y ahora ha llegado a la plataforma web, con una implementación inicial en Chrome 50.

A play() llamar a un o El elemento ahora devuelve una Promesa. Si la reproducción tiene éxito, la Promesa se cumple y si la reproducción falla, la Promesa se rechaza junto con un mensaje de error que explica la falla. Esto le permite escribir código intuitivo como el siguiente:

var playPromise = document.querySelector('video').play();

// In browsers that don’t yet support this functionality,
// playPromise won’t be defined.
if (playPromise !== undefined) 
  playPromise.then(function() 
    // Automatic playback started!
  ).catch(function(error) 
    // Automatic playback failed.
    // Show a UI element to let the user manually start playback.
  );

Además de detectar si el método play() tuvo éxito, la nueva interfaz basada en Promise le permite determinar cuándo play() método tuvo éxito. Hay contextos en los que un navegador web puede decidir retrasar el inicio de la reproducción; por ejemplo, Chrome de escritorio no comenzará la reproducción de un hasta que la pestaña sea visible. La Promesa no se cumplirá hasta que la reproducción realmente haya comenzado, lo que significa que el código dentro de la then() no se ejecutará hasta que se esté reproduciendo el medio. Métodos anteriores para determinar si play() tiene éxito, como esperar una cantidad determinada de tiempo para un evento de reproducción y asumir el fracaso si no se activa, son susceptibles de false negativos en escenarios de reproducción retrasada.

Créditos: no se pudo cargar porque no se encontró una fuente compatible. al reproducir un elemento de audio HTML5

Tuve el mismo error y resultó ser un CORS asunto.

En lugar de

video.setAttribute('crossorigin', 'anonymous');  

prueba de la manera más explícita:

video.crossOrigin = 'anonymous';

Y asegúrese de que la respuesta del servidor tenga el encabezado Access-Control-Allow-Origin: *. O en lugar del comodín asterisco, especifique el dominio del sitio web al que se le permite acceder al video desde el servidor.

Tuve el mismo problema con un archivo mp3. Mi solución fue agregar contenido al html a través de javascript.

Ejemplo de HTML donde voy a poner el archivo a reproducir.

Y en javascript:

$('#audio').html('');

Esto reproducirá el audio, asumiendo que es lo mismo para el video.

Espero eso ayude

Calificaciones y comentarios

---

---

Utiliza Nuestro Buscador