This is fixed in iOS 17.5 beta, if you could try and confirm it would be great. A workaround for now is to set the blob URL in a <source> rather than the src attribute. Like so: <video> <source type="video/mp4" src="blob:http://localhost/a40b716c-c99e-495d-8fe4-f22bcbe82a89"> </video> in JS that would be: // Set up video const video = document.createElement("video"); // Show default video controls. video.controls = true; // Set child in source attribute const videoSource1 = document.createElement('source'); videoSource1.type = 'video/mp4' ; videoSource1.src = URL.createObjectURL(blob); video.appendChild(videoSource1) ;

Safari uses WebKit, and your issue is the same as the one described in https://bugs.webkit.org/show_bug.cgi?id=245428 which recently got fixed. Note that this will fix issues where the Blob was retrieved from either a URL that ends in ".webm" or served by a server that properly sets the Content-Type to "video/webm" or "audio/webm" If the content-type was not known at the time the original media file was retrieved (either it didn't have a .webm extension or the server provided something that wouldn't have allowed webkit to know it was a webm file) ; then this will be fixed https://bugs.webkit.org/show_bug.cgi?id=270975 Apple doesn't comment on future release of new features and functionality. It should be available in Safari Technology Preview soon as it has a roughly fortnightly release scheduled In the mean time, for your code to work with webm, you could try using you blob in a source element. something like: <video> <source src="blobURL" type="video/webm"/> </video> in code: // create video element var video = document.createElement("video"); // Show default video controls. video.controls = true; document.body.appendChild(video); // Set multiple child in source attibute const videoSource1 = document.createElement('source'); videoSource1.type = 'video/webm' ; videoSource1.src = URL.createObjectURL(blob); video.appendChild(videoSource1) ; I believe it should work. Note, that this is not compatible with AirPlay and the use of a unique webm source will provide a less than ideal experience to your users. To add an airplay alternative you would add to the above: // create second alternative const videoSource2 = document.createElement('source'); videoSource2. type = 'video/mp4' ; videoSource2.src = "https://link_to_another_alternative.mp4"; video.appendChild(videoSource2); For more information about adding multiple alternative for media selection https://developer.apple.com/videos/play/wwdc2023/10122 hope this help.