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