Tengo una aplicación web React que obtiene la URL del video de un servidor, luego solicita el video como un blob e intenta reproducirlo en una etiqueta de video HTML. Estoy haciendo esto porque el cliente a veces tiene problemas con Internet y los videos pueden tartamudear mientras se reproducen, prefieren esperar más tiempo para que se cargue el video y luego reproducirlo sin problemas que tener un video entrecortado. (También estoy guardando el blob en IndexedDB como caché, pero eso no está relacionado con el problema que tengo ahora, solo estoy agregando esto como contexto, pero se ha desactivado mientras trato de resolver este problema de iOS)

Tengo una función para descargar el video, que luego devuelve el Blob y una URL creada a partir de ese objeto blob.

 async function downloadVideo(videoUrl) { return new Promise(function(resolve, reject) { var req = new XMLHttpRequest(); req.open('GET', videoUrl, true); req.responseType = 'blob'; req.onload = function() { // Onload is triggered even on 404 // so we need to check the status code if (this.status === 200) { var videoBlob = new Blob([this.response], { type: 'video/mp4' }); console.log('Video blob?', videoBlob); var vid = { objBlob: videoBlob, vidURL: URL.createObjectURL(videoBlob) }; // Video is now downloaded and converted into ObjectURL resolve(vid); } else { reject('Video download failed with status ', this.status); } }; req.onerror = function() { reject('Unable to Download Video'); }; req.send(); }); }

Y luego tengo el elemento que reproduce el video blob:

 <video muted={true} autoPlay={true} loop={false} onError={err => { alert('Video load error. ' + err.target.error.iosMessage); }} src={downloadedVideo.url} />

Ese downloadedVideo.url es la URL del objeto blob creado en la función DownloadVideo.

Todo esto funciona bien en el escritorio (Linux) y en Android, pero el video no se reproduce desde Blob en dispositivos iOS. He probado Safari, Chrome y Firefox y el problema es el mismo. en iOS puedo obtener el video Blob y crear una URL a partir de él, pero cuando lo paso como src no funciona, todo lo que puedo obtener del error (un objeto MediaError) es el código, 4, pero el mensaje es indefinido.

Si en lugar del blob paso la URL del video original como src, funciona en todos los dispositivos, pero no puedo almacenar el video en caché y esta característica tendrá que eliminarse.

Probé varios videos y me aseguré de que la codificación fuera compatible con iOS.

No pude encontrar nada que indique que iOS no es compatible con las URL de Blob para video, por lo que debería funcionar, pero no puedo entender por qué no es así.