# Encode a video, extract 8 thumbnails and store everything in an S3 bucket

The demo below encodes a video, extracts 8 thumbnails from it, and stores both the encoded video and the thumbnails in your S3 bucket.

Step 1

### Handle uploads

We can handle uploads of your users directly. [Learn more ›](/services/handling-uploads.md)

[surf.mp4](https://demos.transloadit.com/d4/e512c56b84435da62fdee4e8450933/surf.mp4)

Video · 32 MB · 22s · 1280 × 720

```
":original": {
  "robot": "/upload/handle"
}
```

🤖 [/upload/handle](/docs/robots/upload-handle.md)

This bot receives uploads that your users throw at you from browser or apps, or that you throw at us programmatically

Step 2

### Transcode, resize, or watermark videos

We offer a variety of video encoding features like optimizing for different devices, merging, injecting ads, changing audio tracks, or adding company logos. [Learn more ›](/services/video-encoding.md)

[surf.mp4](https://demos.transloadit.com/62/7a750f388e400784acfa16b2aa6e57/surf.mp4)

Video · 3.6 MB · 22s · 1024 × 768

```
"ipad_encoded": {
  "use": ":original",
  "robot": "/video/encode",
  "ffmpeg_stack": "v7",
  "preset": "ipad-high",
  "turbo": true
}
```

🤖 [/video/encode](/docs/robots/video-encode.md)

This bot encodes, resizes, applies watermarks to videos and animated GIFs

Step 3

### Extract thumbnails from videos

We offer a variety of video encoding features like optimizing for different devices, merging, injecting ads, changing audio tracks, or adding company logos. [Learn more ›](/services/video-encoding.md)

![surf\_0.jpg](https://demos.transloadit.com/49/48af4114e74efc978a6b3a4c7d47f5/surf_0.jpg)

[surf\_0.jpg](https://demos.transloadit.com/49/48af4114e74efc978a6b3a4c7d47f5/surf%5F0.jpg)

Image · 34 KB · 1024 × 768

![surf\_1.jpg](https://demos.transloadit.com/39/49fbea52104683923ad7f805b9e433/surf_1.jpg)

[surf\_1.jpg](https://demos.transloadit.com/39/49fbea52104683923ad7f805b9e433/surf%5F1.jpg)

Image · 33 KB · 1024 × 768

![surf\_2.jpg](https://demos.transloadit.com/09/ff5fc4437a4f40a4beb55035e1122e/surf_2.jpg)

[surf\_2.jpg](https://demos.transloadit.com/09/ff5fc4437a4f40a4beb55035e1122e/surf%5F2.jpg)

Image · 30 KB · 1024 × 768

![surf\_3.jpg](https://demos.transloadit.com/30/bbdab4700648e5ad93a2fa385e90e2/surf_3.jpg)

[surf\_3.jpg](https://demos.transloadit.com/30/bbdab4700648e5ad93a2fa385e90e2/surf%5F3.jpg)

Image · 29 KB · 1024 × 768

![surf\_4.jpg](https://demos.transloadit.com/73/3b3f372bc942d8888e657c14c78d0f/surf_4.jpg)

[surf\_4.jpg](https://demos.transloadit.com/73/3b3f372bc942d8888e657c14c78d0f/surf%5F4.jpg)

Image · 30 KB · 1024 × 768

![surf\_5.jpg](https://demos.transloadit.com/5d/1ea6b73f174cef81d11c830abec3c5/surf_5.jpg)

[surf\_5.jpg](https://demos.transloadit.com/5d/1ea6b73f174cef81d11c830abec3c5/surf%5F5.jpg)

Image · 32 KB · 1024 × 768

![surf\_6.jpg](https://demos.transloadit.com/25/404f58e9384a1fbec98346d40def0d/surf_6.jpg)

[surf\_6.jpg](https://demos.transloadit.com/25/404f58e9384a1fbec98346d40def0d/surf%5F6.jpg)

Image · 32 KB · 1024 × 768

![surf\_7.jpg](https://demos.transloadit.com/4b/423cb23acb4341b22b48ecc63b2216/surf_7.jpg)

[surf\_7.jpg](https://demos.transloadit.com/4b/423cb23acb4341b22b48ecc63b2216/surf%5F7.jpg)

Image · 27 KB · 1024 × 768

```
"thumbnailed": {
  "use": "ipad_encoded",
  "robot": "/video/thumbs",
  "result": true,
  "ffmpeg_stack": "v7"
}
```

🤖 [/video/thumbs](/docs/robots/video-thumbs.md)

This bot extracts any number of images from videos for use as previews

Step 4

### Export files to Amazon S3

We export to the storage platform of your choice. [Learn more ›](/services/file-exporting.md)

`:original`

* [https://demos.transloadit.com/d4/e512c56b84435da62fdee4e8450933/surf.mp4⁠](https://demos.transloadit.com/d4/e512c56b84435da62fdee4e8450933/surf.mp4)

`ipad_encoded`

* [https://demos.transloadit.com/62/7a750f388e400784acfa16b2aa6e57/surf.mp4⁠](https://demos.transloadit.com/62/7a750f388e400784acfa16b2aa6e57/surf.mp4)

`thumbnailed`

* [https://demos.transloadit.com/49/48af4114e74efc978a6b3a4c7d47f5/surf\_0.jpg⁠](https://demos.transloadit.com/49/48af4114e74efc978a6b3a4c7d47f5/surf%5F0.jpg)
* [https://demos.transloadit.com/39/49fbea52104683923ad7f805b9e433/surf\_1.jpg⁠](https://demos.transloadit.com/39/49fbea52104683923ad7f805b9e433/surf%5F1.jpg)
* [https://demos.transloadit.com/09/ff5fc4437a4f40a4beb55035e1122e/surf\_2.jpg⁠](https://demos.transloadit.com/09/ff5fc4437a4f40a4beb55035e1122e/surf%5F2.jpg)
* [https://demos.transloadit.com/30/bbdab4700648e5ad93a2fa385e90e2/surf\_3.jpg⁠](https://demos.transloadit.com/30/bbdab4700648e5ad93a2fa385e90e2/surf%5F3.jpg)
* [https://demos.transloadit.com/73/3b3f372bc942d8888e657c14c78d0f/surf\_4.jpg⁠](https://demos.transloadit.com/73/3b3f372bc942d8888e657c14c78d0f/surf%5F4.jpg)
* [https://demos.transloadit.com/5d/1ea6b73f174cef81d11c830abec3c5/surf\_5.jpg⁠](https://demos.transloadit.com/5d/1ea6b73f174cef81d11c830abec3c5/surf%5F5.jpg)
* [https://demos.transloadit.com/25/404f58e9384a1fbec98346d40def0d/surf\_6.jpg⁠](https://demos.transloadit.com/25/404f58e9384a1fbec98346d40def0d/surf%5F6.jpg)
* [https://demos.transloadit.com/4b/423cb23acb4341b22b48ecc63b2216/surf\_7.jpg⁠](https://demos.transloadit.com/4b/423cb23acb4341b22b48ecc63b2216/surf%5F7.jpg)

```
"exported": {
  "use": [
    ":original",
    "ipad_encoded",
    "thumbnailed"
  ],
  "robot": "/s3/store",
  "credentials": "demo_s3_credentials",
  "url_prefix": "https://demos.transloadit.com/"
}
```

🤖 [/s3/store](/docs/robots/s3-store.md)

This bot exports encoding results to Amazon S3

## Live Demo. See for yourself

Loading Uppy demo…

This live demo is powered by [Uppy⁠](https://uppy.io/docs/guides/uppy-transloadit/), our open source file uploader that you can also use without Transloadit, and [tus⁠](https://tus.io), our open protocol for resumable file uploads that is making uploading more reliable across the world.

## Build this in your own language

```
<!-- This pulls Uppy from our CDN -->
<!-- For smaller self-hosted bundles, install Uppy and plugins manually: -->
<!-- npm i --save @uppy/core @uppy/dashboard @uppy/remote-sources @uppy/transloadit ... -->
<link
  href="https://releases.transloadit.com/uppy/v3.10.0/uppy.min.css"
  rel="stylesheet"
/>
<button id="browse">Select Files</button>
<script type="module">
  import {
    Uppy,
    Dashboard,
    ImageEditor,
    RemoteSources,
    Transloadit,
  } from 'https://releases.transloadit.com/uppy/v3.10.0/uppy.min.mjs'
  const uppy = new Uppy()
    .use(Transloadit, {
      waitForEncoding: true,
      alwaysRunAssembly: true,
      assemblyOptions: {
        params: {
          // It's often better store encoding instructions in your account
          // and use a `template_id` instead of adding these steps inline
          steps: {
            ':original': {
              robot: '/upload/handle',
            },
            ipad_encoded: {
              use: ':original',
              robot: '/video/encode',
              ffmpeg_stack: 'v7',
              preset: 'ipad-high',
              turbo: true,
            },
            thumbnailed: {
              use: 'ipad_encoded',
              robot: '/video/thumbs',
              result: true,
              ffmpeg_stack: 'v7',
            },
            exported: {
              use: [':original', 'ipad_encoded', 'thumbnailed'],
              robot: '/s3/store',
              credentials: 'demo_s3_credentials',
              url_prefix: 'https://demos.transloadit.com/',
            },
          },
        },
      },
    })
    .use(Dashboard, { trigger: '#browse' })
    .use(ImageEditor, { target: Dashboard })
    .use(RemoteSources, {
      companionUrl: 'https://api2.transloadit.com/companion',
    })
    .on('complete', ({ transloadit }) => {
      // Due to `waitForEncoding:true` this is fired after encoding is done.
      // Alternatively, set `waitForEncoding` to `false` and provide a `notify_url`
      console.log(transloadit) // Array of Assembly Statuses
      for (const assembly of transloadit) {
        console.log(assembly.results) // Array of all encoding results
      }
    })
    .on('error', (error) => {
      console.error(error)
    })
</script>

```

[Read docs: Browsers](/docs/sdks/uppy.md)

## So many ways to integrate

Transloadit is a service for companies with developers. And there are many ways developers can put Transloadit to good use inside your company to automate media processing.

#### Bulk imports

Add one of our [import Robots](/services/file-importing.md) to acquire and transcode massive media libraries.

#### Handling uploads

We are *the* experts at reliably [handling uploads](/services/handling-uploads.md). We wrote the [protocol⁠](https://tus.io/) for it.

#### Front-end integration

We integrate with web browsers via our next-gen file uploader [Uppy⁠](https://uppy.io/docs/guides/uppy-transloadit/) and SDKs for Android and iOS.

#### Back-end integration

Send us batch jobs in any server language using one of our [SDKs](/docs/sdks.md) or directly interfacing with our [REST API](/docs/api.md).

#### Pingbacks

Configure a [notify\_url](/services/content-delivery.md) to let your server receive transcoding results JSON in the `transloadit` POST field.

#### On-demand

Use our [Smart CDN](/services/file-importing.md) to adapt files on-demand and stream them directly to your users.

[Browsers](/docs/sdks/uppy.md)[TransloaditKit](/docs/sdks/transloaditkit.md)[Ruby SDK](/docs/sdks/ruby-sdk.md)[HTTP REST API](/docs/api.md)[Python SDK](/docs/sdks/python-sdk.md)[PHP SDK](/docs/sdks/php-sdk.md)[Node.js SDK](/docs/sdks/node-sdk.md)[Java SDK](/docs/sdks/java-sdk.md)[Go SDK](/docs/sdks/go-sdk.md)[cURL](/docs/sdks/curl.md)[Convex](/docs/sdks/convex.md)

[Browsers](/docs/sdks/uppy.md)[TransloaditKit](/docs/sdks/transloaditkit.md)[Ruby SDK](/docs/sdks/ruby-sdk.md)[HTTP REST API](/docs/api.md)[Python SDK](/docs/sdks/python-sdk.md)[PHP SDK](/docs/sdks/php-sdk.md)[Node.js SDK](/docs/sdks/node-sdk.md)[Java SDK](/docs/sdks/java-sdk.md)[Go SDK](/docs/sdks/go-sdk.md)[cURL](/docs/sdks/curl.md)[Convex](/docs/sdks/convex.md)

[Browsers](/docs/sdks/uppy.md)[TransloaditKit](/docs/sdks/transloaditkit.md)[Ruby SDK](/docs/sdks/ruby-sdk.md)[HTTP REST API](/docs/api.md)[Python SDK](/docs/sdks/python-sdk.md)[PHP SDK](/docs/sdks/php-sdk.md)[Node.js SDK](/docs/sdks/node-sdk.md)[Java SDK](/docs/sdks/java-sdk.md)[Go SDK](/docs/sdks/go-sdk.md)[cURL](/docs/sdks/curl.md)[Convex](/docs/sdks/convex.md)

## Other cool demos

* [View demo→File ExportingApply a watermark to an image and store everything over SFTP](/demos/file-exporting/watermark-an-image-and-store-it-over-sftp.md)
* [View demo→File ExportingCopy files from Amazon S3 to Tigris](/demos/file-exporting/transfer-files-from-amazon-s3-to-tigris.md)
* [View demo→Document ProcessingAdd a header or footer to a PDF](/demos/document-processing/add-header-or-footer-to-pdf.md)

Try Transloadit

## Ready to get started?

Join thousands of developers who trust Transloadit for their file processing needs.

Building file processing from scratch

Ready-to-use API & SDKs

Scaling infrastructure headaches

Auto-scaling global infrastructure

Managing codec updates

Always up-to-date processing

Handling file security

Enterprise-grade security

Supporting all file formats

1000+ formats & codecs supported

Fragmented media tooling

One API for file workflows

GDPR

GDPR

HIPAA

HIPAA

ISO 27001ISO27001

ISO 27001

AES-256

AES-256

SOC 2 Type II

SOC 2 Type II

[Try Transloadit for Free](/c/signup/)

[Try Transloadit for Free](/c/signup/)

No credit card needed · Cancel anytime