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