Transparent Web Video | plus reducing .mov size *

h2 id=’transparent-web-video–‘>Transparent Web Video –

https://www.youtube.com/watch?v=C67S5x7QWzc

https://www.shutterencoder.com/documentation.html

Reducing .mov size

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.

Double check you have transparency enabled

Exporting HEVC from media encoder w/ alpha

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!

Lately I've been researching on this a lot, and achieved consistently working video files, by first exporting Apple ProRes 4444 in After effects and then using that file as input of hevc encoding.

I've written my full insights on this dedicated page: