HTML5 video support with alpha transparency not working in Safari on Monterey

I've been trying to get HEVC videos with alpha to work in Safari 15.1 on MacOS Monterey, but so far haven't had any luck.


<video autoplay loop muted playsinline>
    <source src="path/to/video.mov" type='video/mp4; codecs="hvc1"'>
    <source src="path/to/video.webm" type="video/webm">
</video>


The technique above is pretty basic, and is the current standard. Essentially, we're trying to use HEVC for Safari and WebM for other browsers. What I'm doing to get the Apple side of this figured out is the following:


  • Beginning by working from an exported project from After Effects to .mov with transparency


  • Run that "source" video through ffmpeg with the following options to convert it to ProRes 4444


ffmpeg -i source.mov -c:v prores_ks -pix_fmt yuva444p10le -alpha_bits 16 -profile:v 4444 -f mov output_ProRes4444.mov


  • Then, according to this guide, I'm trying to use built-in tools in MacOS to convert it from ProRes 4444 over to HEVC with transparency preserved


  • The above method displays the videos correct in Safari on Catalina and Big Sur, but for some reason we can't get it working for Safari in Monterey


Is there a magic combination that just makes this work? I'm having a hard time even researching the issue, since Monterey released less than a month ago. Thanks for any help!

MacBook Pro (2020 and later)

Posted on Nov 22, 2021 3:00 PM

Reply

Similar questions

There are no replies.

This thread has been closed by the system or the community team. You may vote for any posts you find helpful, or search the Community for additional answers.

HTML5 video support with alpha transparency not working in Safari on Monterey

Welcome to Apple Support Community
A forum where Apple customers help each other with their products. Get started with your Apple Account.