javascriptbrowsersafari

How to deal with Safari on Macs not supporting alpha video?


I have a site with a video with an alpha layer. This works fine on every browser and platform except for Apple devices running Safari. This is because, for whatever reason, Apple has not deigned to implement support for video w/ alpha with the VP9 codec and WebM container, a combination which is supported ubiquitously otherwise.

I have found instructions online for using HEVC (H.265) with Alpha support to make the same approach work on Safari on an Apple device, but I haven't been able to get it to work. In my testing, no matter what I do, it ignores the MOV or MP4 video that specifies codec hvc1 and instead plays the WebM file. Without the alpha channel, the video covers a rectangular area instead of only affecting the desired pixels.

At this point in time, I want to temporarily make the site simply not try to do this on Safari on Macs, until I figure out how to make it work. How can I do this, though? Everywhere I go, everyone says "test for the feature, not the browser" -- that's all fine and good, except that the "feature" in this case is essentially a browser "bug" and I don't believe there is a way to test for it directly from JavaScript. User Agent strings are all but useless because anything based on Chrome seems to claim that it is Safari (and everything else) -- Google's deliberate attempt (mostly successful?) to kill the ability to detect which browser the page is running in, by the looks of it.

How can I detect specifically the combination of Safari on an Apple device and avoid enabling the visual composition that has disastrous results?

As an aside, if anybody wants to come at this from the other angle and try to just make the video with alpha work, I've got a separate question in the Video exchange:

https://video.stackexchange.com/questions/37745/how-to-encode-hevc-with-alpha-without-a-mac


Solution

  • The answer I have arrived at at this point is:

    Q: How to deal with Safari on Apple devices not supporting alpha video?

    A: People using Safari on Apple devices just don't get to see the alpha video.

    My initial searches must have used poor combinations of keywords, because initially all I found was people saying that of course whether WebM with Alpha was supported was too low-level to possibly be able to test for explicitly. But then, someone responding to this question pointed me to a question that was posed differently (kind of obviously in retrospect) and which had an answer doing exactly that. So, while I haven't yet figured out a way to bend to Safari's current weirdness, I do have a way to detect Safari's present shortcomings and alter the experience accordingly.

    The other question, which comes at it from the opposite direction, is here:

    How to (feature) detect if browser supports WebM alpha transparency?

    Based on @Tom Mettam's answer to it, I've created a JavaScript component that wraps up this detection into a nice reusable file. That's here, with some important (I think) enhancements (documented):

    https://github.com/logiclrd/DetectWebMAlphaSupport/

    And I'm now using that component on my page and not worrying about how to make an HEVC With Alpha MP4 or MOV file that works on Macs. :-)