Is there a way to create a progress bar?

andri · September 8, 2022, 4:16pm

I’ve tried to set transition “in” to reveal on a clip that contains an image asset but I can’t seem to time it correctly as the “in” movement finishes before the clip finishes.

Is there no way to move an asset from one place to another and have an exact timing on start and stop points?

dazzatron · September 10, 2022, 2:33am

Moving an asset with more control than the transitions allow for would require keyframing. This is on our roadmap but not yet supported.

There are other ways to add animated assets to your video such as discussed in this topic:

lucas.spielberg · September 11, 2022, 3:50am

There are a few different ways you can create a progress bar depending on how you want it to look.

If you just want a solid bar overlayed on to your video then you can use the HTML asset and animate it’s width. I created an example here:

github.com

shotstack/node-demos/blob/main/examples/progress.js

const Shotstack = require('shotstack-sdk');

const defaultClient = Shotstack.ApiClient.instance;
const DeveloperKey = defaultClient.authentications['DeveloperKey'];
const api = new Shotstack.EditApi();

let apiUrl = 'https://api.shotstack.io/stage';

if (!process.env.SHOTSTACK_KEY) {
    console.log('API Key is required. Set using: export SHOTSTACK_KEY=your_key_here');
    process.exit(1);
}

if (process.env.SHOTSTACK_HOST) {
    apiUrl = process.env.SHOTSTACK_HOST;
}

defaultClient.basePath = apiUrl;
DeveloperKey.apiKey = process.env.SHOTSTACK_KEY;

This file has been truncated. show original

You can set the video width and duration and it will animate a bar. The example is in Node.js but should be easy to port to other languages if needed.

Here is an example output:

You could probably adapt this to set the position of a graphic using offsets if you wanted to move something across the screen.

Another way would be to pre-render an animation in After Effects (or similar tool), export the video at the width and height you need and then you can import that video in to your edit. This will only work if the length of your video is always the same however and you know this in advance.

andri · September 20, 2022, 1:50am

Thanks @dazzatron, that’s very helpful. I’m looking forward to the keyframes though.
It’s a bit tricky for us because the timing isn’t always the same

andri · September 20, 2022, 1:58am

Thanks @lucas.spielberg The code is helpful, seems to be working, although the progress bar isn’t quite smooth. This is the best solution so far though, didn’t think of this being a possibility before, and might solve some other problems as well.
I wonder, though, what impact this sort of solution has on credits (cost) and rendering time, as it looks like it produces 256 extra clips just to create the process bar.
To clarify, in our videos we might need 5-10 progress bars per video, which would mean 1280 - 2560 extra clips.

dazzatron · September 20, 2022, 3:04am

Credits are only consumed based on the total length of the generated video. It doesn’t matter if the video only has 1 clip or 1,000.