Use frame of video clip as first frame of project

Shotstack API
1

Since my understanding is that social networks default to using the first frame of a video to set the cover, I want to be able to use a specific timecode of a video included in a shotstack project as the cover. Is the easiest way to do this, is to create another video track that is a fraction of a second long, trimming it at the right time?

Im using clips hosted at external url (not uploaded to shotstack), so if I use multiple instances of the same video inside a project, will it be smart enough to not download the same video multiple times?

Thanks in advance for your help.

Ps. Please add my vote to text outline and text shadow, helps with readability. The workaround to duplicate the text and offset the x and y is a bit clunky :sweat_smile:

2

Enhancing Text Legibility in Design with Simple Workarounds

I recently came across a discussion about duplicating text and offsetting it for better legibility, and it sparked an idea I hadn’t considered before. In my designs, especially when dealing with text, I typically use a different method for clarity.

  1. Using a Solid Black Layer: I often incorporate a solid black layer (created in Photoshop) and adjust its opacity between 20% to 60%. This depends on whether the design needs to emphasize a lot of text or just a title.

  2. Pre-Made Asset for Convenience: I’ve created a design asset that’s already set to 50% opacity, covering only the bottom third of the video. This is particularly useful for ensuring white title text stands out clearly. You can see an example of this here: Adobe Shared Asset.

  3. Not a Fan of Drop Shadows or Strokes: I’ve been designing for a long time and have never been fond of using drop shadows or stroke options for text. I find this approach much cleaner and more aesthetically pleasing.

  4. Creating Gradients with Transparency: For those interested in gradients, here’s a great resource for making new gradients that end in complete transparency: YouTube Tutorial.

I hope this insight is helpful and not too confusing! I’d love to hear if others have similar tricks or different approaches to enhancing text legibility in their designs.

1 Like
3

I used 80% on this website. https://www.august.style/

And 50% on the images with text at that link.

1 Like
4

Hi @joel,
Not sure if you have tried this but in the output settings you can create a thumbnail and poster image to be exported along with the video. These would be separate images though and you’d need a way to upload them. Here’s the API reference: Shotstack v1 API Reference Documentation.

I know that with some social networks, when you share the URL of the web page that hosts the video they use opengraph tags, full spec here: https://ogp.me/, and you can specify an image.

Finally, if you can only upload the video and you have to use the first frame from the video as the image, you should be able to do something like this:

{
    "timeline": {
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/footage/cat.hd.mp4",
                            "trim": 2.5
                        },
                        "start": 0,
                        "length": 0.04
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://s3-ap-southeast-2.amazonaws.com/shotstack-assets/footage/cat.hd.mp4"
                        },
                        "start": 0.05,
                        "length": 5
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "resolution": "sd"
    }
}

Here there are two video clips that use the same video file. The first one plays for 0.04 seconds (i.e. one frame at 25fps), it is also trimmed to 2.5 seconds, so the frame will actually be a few seconds in to the video.

The second clip starts after the first trimmed frame and plays normally.

You can see the effect here, it doesn’t look too bad:

5

Thanks for your help! I needed to overlay text and graphics on the cover, so I decided to render it as a separate project, then use that resulting png as the first frame of the video