# Create video preview frames

Extract multiple frames from a video for preview galleries

"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

<CodeGroup labels={["CLI", "TypeScript", "Python", "curl"]}>
```bash
ittybit image \
  -i https://rewind-app.com/projects/ad-cut-v2.mp4 \
  --start 0 \
  --width 320 \
  --format webp
```

```typescript
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/jobs', {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${process.env.ITTYBIT_API_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(task),
});
const data = await res.json();
```

```python

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/jobs",
    headers={"Authorization": f"Bearer {api_key}"},
    json=task,
)
data = res.json()
```

```bash
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/jobs \
  -H "Authorization: Bearer $ITTYBIT_API_KEY" \
  -H "Content-Type: application/json" \
  -d "$TASK"
```

</CodeGroup>

Repeat with different `start` values to build a preview strip:

```json
{"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

```bash
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:

```bash
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.