Video with transparent background

Shotstack API
1

Hey!

I’m trying to create a video that contains a gif. From a previous answer, I saw that the best way to do it is convert the gif to a video like webm and add that to my result.

Here’s the video I’m using with transparent background: https://res.cloudinary.com/dev-stagger/image/upload/v1681925500/assets/giphy_(2)_1681925499607.webm

And here’s the result I’m getting: https://res.cloudinary.com/dev-stagger/video/upload/v1681927019/assets/New_Stagger_18_1_1681927017580.mp4

As you can see, there is a black background :frowning:

Do I have to specify something more for this to work?

Thanks!

2

Reference to the prev answer: What formats does Shotstack support? - #4 by lucas.spielberg

3

Hi StaggerDev!

Would you mind sharing a link to the original gif?

Could you please also outline how you converted the gif to video?

4

Sure! The original gif is: https://res.cloudinary.com/dev-stagger/image/upload/v1681925500/assets/giphy_(2)_1681925499607.gif but I’m not using this, I’m using the webm.

I use the node sdk.

Something like:

    const api = new Shotstack.EditApi();
    const tracks = [];
    const duration = 10;

    // This is the webm video
    const overlayAsset = new Shotstack.VideoAsset();
    const newUrl = convertGifToVideo(url);
    overlayAsset.setSrc(newUrl);
    const overlayClip = new Shotstack.Clip();
    overlayClip
      .setAsset(overlayAsset)
      .setStart(0)
      .setLength(10)
      .setPosition('topLeft')
      .setScale(scaleTrack)
      .setOffset(offsetPosition);

    const overlayTrack = new Shotstack.Track();
    overlayTrack.setClips([overlayClip]);

    tracks.push(overlayTrack);

    // This is just a background image
    const backgroundAsset = new Shotstack.ImageAsset();
    backgroundAsset.setSrc(backgroundUrl);
    const backgroundClip = new Shotstack.Clip();
    backgroundClip.setAsset(backgroundAsset).setStart(0).setLength(10);
    const backgroundTrack = new Shotstack.Track();
    backgroundTrack.setClips([backgroundClip]);
    tracks.push(backgroundTrack);

    const timeline = new Shotstack.Timeline();
    timeline.setBackground('#000000').setTracks(tracks);

    const size = new Shotstack.Size();
    size.setWidth(1080).setHeight(1080);

    const output = new Shotstack.Output();
    output.setFormat('mp4').setSize(size);

    const edit = new Shotstack.Edit();
    edit.setTimeline(timeline).setOutput(output);

    edit.setCallback(SHOTSTACK_NOTIFICATION_URL);

    await api.postRender(edit);
5

I’m using Cloudinary to serve the assets and they take care of conversions. You just change the extension in the url. Animated GIF? Convert to WebM or MP4

6

I had a look at the webm video but it has the black background in the video. It looks like when you convert gif to webm in Cloudinary it does not retain the transparency. The ideal conversion would be gif to mov with alpha channel if that is possible. Do you need to dynamically convert the file or can it be manually converted and exported in software like Adobe Premiere?

7

Oh ok thanks! I’ll chat with them to see if I can keep the transparency of the video. I need it to be dynamic yes

8

Would love to see .webm with alpha channel also supported.

The main benefits of using .webm are smaller file size.
For example, I have 7 seconds video where it is around 40MB on .mov where it is only 445KB on .webm

9

We support webm as an input/source, so you can use that for overlays, lower thirds, etc… in your edit and they will be much smaller than mov. We don’t currently support webm or mov as an output though.

11

Hi Lucas.

I just rendered one at sandbox environment.
render id: 3cb86c1e-efa6-41f7-822a-c24db4b44c33
It doesn’t seem to support though, can you help double check again? Thanks!

12

Hi @lucas.spielberg, is there any updates on this? was it a bug or issue with my input data?

13

is there any other channel that we can report this issue or another staff perhaps can help reply?

14

Hi, I tried jut now with a webm with transparent background and you are correct, it did not work. It looks like we do not support alpha channels/transparency with webm files.

The only option is to either use a mov file with alpha channel. I have been able to reduce the file size using the GoPro CineForm codec: https://cineform.com/technology so you might have some luck with that.

Another option is to use a luma matte which would work like the alpha channel when combined with the asset without the alpha channel. The luma matte can be an mp4 video which will be much smaller in file size. This is a different use case but it will show you how to apply a mask to a video file. You’d need to export the RGB video and the alpha channel separately as a luma mask/matte: Create a luma matte transition using After Effects — Shotstack