Create video preview frames

“Rewind” (a video library app like Frame.io) shows a strip of preview frames so reviewers can scan a video without playing it.

Extract frames at specific times

API

ittybit image \
  -i https://rewind-app.com/projects/ad-cut-v2.mp4 \
  --start 0 \
  --width 320 \
  --format webp \
  --cloud

const task = {
  input: "https://rewind-app.com/projects/ad-cut-v2.mp4",
  kind: "image",
  options: {
    start: 0,
    width: 320,
    format: "webp",
  },
};

const res = await fetch("https://api.ittybit.com/tasks", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.ITTYBIT_API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify(task),
});
const data = await res.json();

import requests

task = {
    "input": "https://rewind-app.com/projects/ad-cut-v2.mp4",
    "kind": "image",
    "options": {
        "start": 0,
        "width": 320,
        "format": "webp",
    },
}

res = requests.post(
    "https://api.ittybit.com/tasks",
    headers={"Authorization": f"Bearer {api_key}"},
    json=task,
)
data = res.json()

TASK='{
  "input": "https://rewind-app.com/projects/ad-cut-v2.mp4",
  "kind": "image",
  "options": {
    "start": 0,
    "width": 320,
    "format": "webp"
  }
}'

curl -X POST https://api.ittybit.com/tasks \
  -H "Authorization: Bearer $ITTYBIT_API_KEY" \
  -H "Content-Type: application/json" \
  -d "$TASK"

Repeat with different start values to build a preview strip:

{"input": "https://...", "kind": "image", "options": {"start": 0, "width": 320, "format": "webp"}}
{"input": "https://...", "kind": "image", "options": {"start": 10, "width": 320, "format": "webp"}}
{"input": "https://...", "kind": "image", "options": {"start": 20, "width": 320, "format": "webp"}}
{"input": "https://...", "kind": "image", "options": {"start": 30, "width": 320, "format": "webp"}}

CLI

ittybit image \
  -i ad-cut-v2.mp4 \
  -o frame-00.webp \
  --start 0 \
  --width 320

ittybit image \
  -i ad-cut-v2.mp4 \
  -o frame-10.webp \
  --start 10 \
  --width 320

ittybit image \
  -i ad-cut-v2.mp4 \
  -o frame-20.webp \
  --start 20 \
  --width 320

ittybit image \
  -i ad-cut-v2.mp4 \
  -o frame-30.webp \
  --start 30 \
  --width 320

Tiny frames for scrub bar

For a hover-scrub thumbnail strip, use very small frames:

ittybit image \
  -i ad-cut-v2.mp4 \
  -o scrub-05.jpg \
  --start 5 \
  --width 160

ittybit image \
  -i ad-cut-v2.mp4 \
  -o scrub-10.jpg \
  --start 10 \
  --width 160

ittybit image \
  -i ad-cut-v2.mp4 \
  -o scrub-15.jpg \
  --start 15 \
  --width 160

At 160px wide, each frame is just a few KB.