Inquiry Regarding WebM Video Format Support in Safari

Question

uk8566 OP

Created Mar ’24

Replies 1

Boosts 0

Views 3.1k

Participants 2

Dear Apple Community,

I am writing to seek assistance with a challenge I've encountered regarding the playback of WebM video format in Safari.

Despite various attempts and troubleshooting, I've been unable to successfully play WebM videos in Safari using the HTML5 video tag with provided Blob URLs. The videos, which are recorded in WebM format using browsers such as Chrome, fail to play in Safari, causing inconvenience for users who rely on this browser for their browsing needs.

I understand that Safari may have certain limitations and compatibility issues with certain multimedia formats, but as WebM gains popularity as a widely used format for web-based videos, its support in Safari would greatly enhance the browsing experience for many users.

I'm reaching out to inquire if there are any known solutions, workarounds, or plans to address this issue. Specifically, I've attempted to utilize the HTML5 video tag with Blob URLs to play WebM videos in Safari, but to no avail. If there are alternative methods or techniques that I may have overlooked, I would greatly appreciate any guidance or assistance in enabling playback of WebM videos in Safari.

Ensuring cross-browser compatibility and seamless playback of multimedia content is crucial for providing a consistent and enjoyable user experience across different platforms and environments. Any insights or recommendations from the Apple community would be immensely helpful in resolving this issue.

Thank you for your attention to this matter, and I look forward to your response.

Sincerely, Umair Khan

Boost

Answer 1

jyavenard OP

Mar ’24

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.

0