# Convert and compress every Supabase video

[View original](https://ittybit.com/guides/convert-and-compress-video)

***

## title: Convert and compress every Supabase video

In this guide, you will:

* Upload a video to Supabase Storage
* Trigger an automation on ittybit using a POST request
* Use the signed URL from Supabase Storage in the request
* Create an automation in code for video processing
* Handle webhooks to download processed files to storage
* Display processed videos using the HTML `<video>` element

## 1. Upload to Supabase Storage

Ensure you have already created a Storage bucket in your Supabase project. If you haven't, you can follow the [Supabase guide on creating buckets](https://supabase.com/docs/guides/storage).

First, upload a file to your Storage bucket. This will generate a **signed URL** needed for the next step.

## 2. Trigger an automation on ittybit (via POST request)

Send a POST request to create a video compression task using the `fetch` API:

```ts
const body = {
  url: "https://your-supabase-storage-url/video.mp4",
  kind: "video",
  format: "mp4",
  quality: 75,
  ref: "video-compression"
};

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

const result = await task.json();
console.log('Task created:', result.id);
console.log('Task status:', result.status);
```

## 3. Create an automation in code for video processing

You can build automations visually in the ittybit dashboard or programmatically. This code creates a video automation that:

* Converts videos to MP4 format with 75% quality compression
* Optionally generates subtitles, thumbnails, and chapters
* Processes files automatically when triggered

```ts
const automation = await fetch("https://api.ittybit.com/automations", {
  method: "POST",
  headers: { 
    "Authorization": "Bearer ITTYBIT_API_KEY",
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    name: "Video Compression Pipeline",
    description: "Convert videos to MP4 with compression and additional features",
    trigger: {
      kind: "event",
      event: "media.created"
    },
    workflow: [
      {
        kind: "video",
        format: "mp4",
        quality: 75,
        ref: "compressed-video"
      },
      {
        kind: "subtitles",
        ref: "video-subtitles"
      },
      {
        kind: "thumbnails",
        count: 3,
        ref: "video-thumbnails"
      },
      {
        kind: "chapters",
        ref: "video-chapters"
      }
    ],
    status: "active"
  })
});

const automationResult = await automation.json();
console.log('Automation created:', automationResult.id);
```

Save the returned `automation_id` and use it in your POST request from **Step 2** instead of specifying individual task parameters.

## 4. Handle webhooks to download processed files to storage

When ittybit processes your video, it sends webhooks for each created file. Handle these to save files to Supabase Storage and update your database:

```ts
app.post("/video-webhook", async (req, res) => {
  const { output, kind, ref, id } = req.body;

  const fileResponse = await fetch(output.url);
  const fileBuffer = await fileResponse.arrayBuffer();
  
  const { data } = await supabase.storage
    .from('processed-videos')
    .upload(`${ref}-${id}.mp4`, fileBuffer);

  await supabase
    .from('videos')
    .insert([{
      task_id: id,
      storage_path: data.path,
      format: output.format,
      duration: output.duration,
      ref: ref
    }]);

  res.status(200).send("File saved");
});
```

## 5. Render video using the HTML `<video>` element

Display your processed video with all generated features:

```html
<video controls width="600">
  <source src="https://your-supabase-storage/processed-videos/compressed-video-123.mp4" type="video/mp4">
  <track kind="subtitles" src="https://your-supabase-storage/processed-videos/video-subtitles-123.vtt" srclang="en" label="English">
  <track kind="chapters" src="https://your-supabase-storage/processed-videos/video-chapters-123.vtt">
</video>
```

Use the thumbnails for preview images or custom video players.

## Optional: Use an S3 connection

Instead of handling file downloads manually, connect Supabase Storage to ittybit as S3‑compatible storage. This eliminates the need for webhook file downloads.

### Replace signed URL with connection

Update your POST request to use the S3 connection instead of a signed URL:

```ts
const body = {
  connection: "your_s3_connection_id",
  key: "uploads/original-video.mp4",
  kind: "video"
};

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

### Update automation with S3 uploads

Modify your automation to save processed files directly back to your storage:

```json
{
  "name": "S3 Video Processing",
  "trigger": {
    "kind": "event", 
    "event": "media.created"
  },
  "workflow": [
    {
      "kind": "video",
      "format": "mp4",
      "quality": 75,
      "upload": {
        "connection": "your_s3_connection_id",
        "key": "processed-videos/{original.name}.mp4"
      }
    },
    {
      "kind": "subtitles", 
      "upload": {
        "connection": "your_s3_connection_id",
        "key": "subtitles/{original.name}.vtt"
      }
    }
  ]
}
```

Now processed files are automatically saved to your Supabase Storage, removing the need for manual download steps in your webhook.