I'm encountering an issue getting videos with alpha transparency to reliably load and play on a web page. After some thorough research, this is where I ended up as a means of video encoding to accomplish transparent video which isn't over a solid background color.
Hoping the general community has insight into why we're noticing weirdness with MacOS Monterey in Safari 15 ♂️
Note: We tried Lottie as an option for the animations, but what we found was that the DOM was excessively bloated; which would inevitably cause performance issues for the website. So we went back to video as an option.
Convert to HEVC with alpha
ffmpeg -i "source.mov" -c:v hevc_videotoolbox -allow_sw 1 -alpha_quality 1 -vtag hvc1 output.mov
Convert to VP9 with alpha
ffmpeg -i "source.mov" -c:v libvpx-vp9 output.webm
HTML5 method of serving these files to the browser
<video autoplay loop muted playsinline class="tmpl-front-page__transition-item tmpl-front-page__transition-item--0 tmpl-front-page__transition-item--banner-video">
<source src="path/to/video.mov" type='video/mp4; codecs="hvc1"'>
<source src="path/to/video.webm" type="video/webm">
</video>
How it works
Essentially, we've learned the following:
- Safari supports HEVC with alpha, Chrome does not
- Chrome supports VP9 with alpha, Safari does not
Now we let the browser choose which version it wants to use.
There are issues
There's inconsistency in how reliably this works in reality. For example, I'm currently running MacOS Catalina with Safari 14.0.2, and the videos started loading for me when using the above method.
While testing MacOS Monterey with Safari 15.1 inside a Parallels VM, the video doesn't load at all when I test that way. That said, another developer on our team did take the plunge and upgraded to Monterey and has Safari 15.1; and he can see the videos loading just fine.
This is getting a little silly, and I'm not sure what else to try. Thanks for any help!
