0

I'm trying to export a video in transparent that works in the browser (I'd like to use it in canva), I've already tried to export in some formats that I saw in some tutorials, and the video is transparent in the render view, however, when I open it in the browser or in canva, it has a black background, I've tried several combinations, but none of them maintain transparency, would this be an error in my blender or a missing codec?

I'm using Blender 3.0.1 on Ubuntu 22.04.2 LTS

Thanks!

Nathan
  • 95
  • 8
  • 3
    Video editors could show transparent backgrounds as black, once you drop anoth r object, you will see if it's transparent or not. This is more about a third party app than Blender, if it's transpar nt in Blender, you should your other app – Emir Jun 13 '23 at 01:48
  • Also see https://blender.stackexchange.com/questions/2050/any-video-formats-that-render-with-alpha-channel – Duarte Farrajota Ramos Jun 19 '23 at 22:32

1 Answers1

2

You can see which of Blender's video codecs support alpha transparency here:

Supported Video & Audio Formats — Blender Manual

In short, we have VP9, FFV1, Quicktime (PNG or Qt Animation). We also have HuffYUV not mentioned on this page, but it's meant for recording data more than lighweight broadcast like web.

To my knowledge, the safest video encoding settings for transparency for the web would be WebM/VP9 video codec in a WebM container. As it is the main standard for the web, it's even made for it to begin with.

But as of today, Blender's current VP9 implementation doesn't support Alpha. In addition, it seems that web browser officially do not support FFV1, and I haven't seen any mention of either HuffYUV nor QuickTime's PNG codecs in Web video codec guide - Web media technologies | MDN and couldn't manage to make it work myself. But QuickTime's Qt Animation seems to work. So you can try that. Don't forget to also chose RGBA colors:

enter image description here

You also need to make sure you enabled transparency in your render settings:

enter image description here

That being said, WebM VP9 remains the current standard (well, except for Safari browsers, that'd be QuickTime still). A way around Blender's faulty vp9 could be to render your animation into an image sequence, like TGA or DPX (I avoid PNG because of how long it takes to read/write files), then use ffmpeg to convert it into vp9 with transparency.

For that procedure, see:
ffmpeg - Convert PNGs to webm video with transparency - Stack Overflow

With these options, unless you covered your environments with opaque things in the 3D world or in compositing, you should have a video with transparency.

Now when it comes to how to use that on a website, compatibility issues with different hosts, frameworks, web browsers, .... These are problematics not suited for Blender Stack Exchange.

L0Lock
  • 15,965
  • 1
  • 20
  • 44
  • 1
    Couldn't get this to work, in any video player, browser, nor even Blender compositor or VSE. Are you sure this produces alpha video? Quick time as explained here does https://blender.stackexchange.com/questions/2050/any-video-formats-that-render-with-alpha-channel – Duarte Farrajota Ramos Jun 19 '23 at 22:53
  • 1
    Indeed, turns out Blender's current VP9 implementation doesn't support alpha, that's a bummer. Well then, QT Animation will do, though not the best option for the web it's better than nothing. – L0Lock Jun 20 '23 at 01:43
  • Too bad, another option besides proprietary quick time would have been nice. I removed my up vote. Might be worth making a note about in the answer – Duarte Farrajota Ramos Jun 20 '23 at 05:33
  • VP9 is the number one option but it doesn't work in Blender right now. Unless you want to make a website unreadable for Safari users, you'll still output a QuickTime anyway. And if you want a simple solution with Blender, might as well go with that. – L0Lock Jun 20 '23 at 14:13