Create preview clips from streams

View Markdown

Browse pages convert better when users can preview content before clicking. “Streamline” (a streaming service like Netflix) shows a short muted loop on hover — enough to hook viewers without buffering a full stream.

API

ittybit video \
  -i https://streamline-app.com/content/doc-ocean-deep.mp4 \
  --start 45 \
  --end 52 \
  --width 480 \
  --mute \
  --format mp4

const task = {
  input: 'https://streamline-app.com/content/doc-ocean-deep.mp4',
  kind: 'video',
  options: {
    start: 45,
    end: 52,
    width: 480,
    mute: true,
    format: 'mp4',
  },
};

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();

import requests

task = {
    "input": "https://streamline-app.com/content/doc-ocean-deep.mp4",
    "kind": "video",
    "options": {
        "start": 45,
        "end": 52,
        "width": 480,
        "mute": True,
        "format": "mp4",
    },
}

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

TASK='{
  "input": "https://streamline-app.com/content/doc-ocean-deep.mp4",
  "kind": "video",
  "options": {
    "start": 45,
    "end": 52,
    "width": 480,
    "mute": true,
    "format": "mp4"
  }
}'

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

This extracts a 7-second clip starting at 45s, scales to 480px wide, and strips the audio track. The result is a small MP4 suitable for inline autoplay with the loop attribute.

CLI

ittybit video \
  -i doc-ocean-deep.mp4 \
  -o preview.mp4 \
  --start 45 \
  --end 52 \
  --width 480 \
  --mute

Picking the right segment

Choose a visually interesting segment with motion. Avoid static frames or dialogue-heavy moments — without audio, talking heads don’t convey much.

# Extract a poster frame first to check the segment
ittybit image \
  -i doc-ocean-deep.mp4 \
  -o check-45s.webp \
  --start 45 \
  --width 480

Preview size guidelines

Use case	Width	Duration	Expected size
Card hover (grid)	480	5-7s	~200-400 KB
Hero banner	1280	3-5s	~500 KB-1 MB
Thumbnail GIF replacement	320	3s	~100-200 KB

Using the preview in HTML

<video
  src="/previews/doc-ocean-deep.mp4"
  muted
  loop
  playsinline
  width="480"
  onmouseenter="this.play()"
  onmouseleave="this.pause(); this.currentTime = 0;"
></video>

The muted and playsinline attributes are required for autoplay on mobile browsers.