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.
Topic:
Safari & Web
SubTopic:
General
Tags: