Multi-codec encoding pipeline

View Markdown

Your users have different browsers and devices. A single codec cannot serve everyone optimally. Encode multiple formats from one source and let the browser pick the best one.

“Showreel” (a video portfolio platform like Vimeo) wants to serve the smallest file each viewer’s browser supports.

API

Create three tasks from the same input — h264 for universal fallback, AV1 for modern browsers, and VP9/WebM for Chrome/Firefox users on older versions.

h264 (universal fallback)

ittybit video \
  -i https://showreel-app.com/uploads/demo.mov \
  --codec h264 \
  --format mp4 \
  --quality high

const task = {
  input: 'https://showreel-app.com/uploads/demo.mov',
  kind: 'video',
  options: {
    codec: 'h264',
    format: 'mp4',
    quality: 'high',
  },
};

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://showreel-app.com/uploads/demo.mov",
    "kind": "video",
    "options": {
        "codec": "h264",
        "format": "mp4",
        "quality": "high",
    },
}

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

TASK='{
  "input": "https://showreel-app.com/uploads/demo.mov",
  "kind": "video",
  "options": {
    "codec": "h264",
    "format": "mp4",
    "quality": "high"
  }
}'

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

AV1 (smallest files, modern browsers)

ittybit video \
  -i https://showreel-app.com/uploads/demo.mov \
  --codec av1 \
  --format mp4 \
  --quality high

const task = {
  input: 'https://showreel-app.com/uploads/demo.mov',
  kind: 'video',
  options: {
    codec: 'av1',
    format: 'mp4',
    quality: 'high',
  },
};

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://showreel-app.com/uploads/demo.mov",
    "kind": "video",
    "options": {
        "codec": "av1",
        "format": "mp4",
        "quality": "high",
    },
}

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

TASK='{
  "input": "https://showreel-app.com/uploads/demo.mov",
  "kind": "video",
  "options": {
    "codec": "av1",
    "format": "mp4",
    "quality": "high"
  }
}'

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

VP9 WebM (royalty-free alternative)

ittybit video \
  -i https://showreel-app.com/uploads/demo.mov \
  --codec vp9 \
  --format webm \
  --quality high

const task = {
  input: 'https://showreel-app.com/uploads/demo.mov',
  kind: 'video',
  options: {
    codec: 'vp9',
    format: 'webm',
    quality: 'high',
  },
};

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://showreel-app.com/uploads/demo.mov",
    "kind": "video",
    "options": {
        "codec": "vp9",
        "format": "webm",
        "quality": "high",
    },
}

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

TASK='{
  "input": "https://showreel-app.com/uploads/demo.mov",
  "kind": "video",
  "options": {
    "codec": "vp9",
    "format": "webm",
    "quality": "high"
  }
}'

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

CLI

Encode all three locally:

ittybit video \
  -i demo.mov \
  -o demo-h264.mp4 \
  --codec h264 \
  --quality high

ittybit video \
  -i demo.mov \
  -o demo-av1.mp4 \
  --codec av1 \
  --quality high

ittybit video \
  -i demo.mov \
  -o demo-vp9.webm \
  --codec vp9 \
  --quality high

Serve with codec fallback

Use <source> tags. The browser picks the first format it supports:

<video controls>
  <source src="demo-av1.mp4" type='video/mp4; codecs="av01.0.08M.08"' />
  <source src="demo-vp9.webm" type="video/webm" />
  <source src="demo-h264.mp4" type="video/mp4" />
</video>

Order matters — put the smallest/newest codec first, universal fallback last.

Which codecs to include

Strategy	Codecs	Coverage	Storage overhead
Safe minimum	h264	100%	1x
Good balance	h264 + AV1	100% (optimized for ~85%)	1.6x
Full coverage	h264 + AV1 + WebM	100% (optimized for ~95%)	2.3x

The “good balance” approach covers most users. Add VP9/WebM only if you have significant traffic from older Chrome/Firefox versions that lack AV1 support.