Add poster and preview images to video uploads

The Workflow

Overview

I've been making videos for the internet for a realllly long time (like, way before YouTube was a thing).

And pretty much every video in that time has needed a poster image (to show in the player before the video loads) and a preview image (a smaller thumbnail to show when listing videos).

This workflow will generate both for you.

Build Workflow

Our workflow will:

1. Checks the input file is a video
2. Generate a 1280x720 poster image
3. Generate a 320x180 preview image
4. Send the output file data to a webhook URL on your server

Create Task

We create a new task with the kind: "workflow".

The workflow property contains our workflow steps as defined above.

const task = await ittybit.tasks.create({
  url: "https://example.com/your-video.mp4",
  kind: "workflow",
  workflow: workflow
})

Handle Webhook

Your webhook handler should parse the File Object payload and save the data in your database.

Optionally, you might want to pull the file itself into your object storage.

Use the Output

Your database should now have 3x files associated with the input video:

• The original video file
• The poster image file
• The preview image file

You can use them in your frontend to give a nicer user experience.

<video poster="https://example.com/your-video-poster.png">
  <source src="https://example.com/your-video.mp4" type="video/mp4" />
</video>

Responsive Workflow

The current workflow assumes input videos are landscape.

It'll still work with portrait or square videos, but the output images will be too big.

We can update our workflow to work with portrait and square videos responsively.

We do this by updating our conditions to check the orientation property of the input file, and adding a second branch for portrait and square videos.

Next Steps

You can extend these workflow examples with your own task ideas and build something unique for your app.

Check out the Tasks documentation for more information on what you can do.