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) ;
jyavenard
Users receive reputation points by contributing quality content to the forums.
Posts include post and replies published on the forums.
Post authors can mark replies as Accepted to indicate successful solutions.
Apple Developer Forums admins can mark replies as Apple Recommended to indicate an approved solution
Last seen
User for
Post
Replies
Boosts
Views
Activity
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.