I've been working on a client project that requires transparent videos, and I've hit a wall with browser compatibility issues, especially with Safari. It's frustrating because Apple seems to block standard support for VP9 and AV1, which nobody really uses HEVC (.265) anymore. Why would they do that?
I know that as a workaround, I can create fallback versions in HEVC for Safari, but I'm hoping for an easier solution that still allows for sound and doesn't involve so much hassle. Anyone have tips on how to get transparent videos to work seamlessly across browsers?
5 Answers
"No one uses HEVC?" Except for pretty much every iPhone video from the last 8 years. You're not alone in this frustration, but it seems Apple has their reasons for pushing their own codec.
Check out this blog post! It has a neat trick using a non-transparent video combined with some JavaScript that might help you achieve the effect you're looking for: jakearchibald.com/2024/video-with-transparency/
A straightforward approach is to decode your video into images on the server and then draw those onto a canvas element. The canvas supports transparency and should provide a decent workaround for older browsers too!
Are we not revisiting old issues with transparency? This feels reminiscent of that old IE problem where PNGs wouldn't render correctly and you had to rely on GIFs instead. Seems like browser compatibility never really improves...
Sounds like you're battling with Apple’s Safari strategy. They’ve been quite protective of their ecosystem, which definitely complicates things for web developers. But if you’re creating videos with alpha channels, exporting to .mov format is a valid option! Check out primaxlaunch.com for more details on how you can do it.
Related Questions
Cloudflare Origin SSL Certificate Setup Guide
How To Effectively Monetize A Site With Ads