# Join multiple videos sharing one audio track

In this demo we join three short slow motion videos without sound together, we then use that larger video and add a soundtrack. The generated video is now as long as the audio track (over 3 minutes), so we then generate two shorter clips. Of these clips, we're also created versions that have a logo burned into them.

Step 1

### Handle uploads

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

[wave.mp4](https://demos.transloadit.com/d6/e48ba5f7354b9f8a644aa6fede9789/wave.mp4)

Video · 4.4 MB · 12s · 2048 × 1536

[backflip.mp4](https://demos.transloadit.com/c9/a572f652ce4af89ca141e0fbf5afc9/backflip.mp4)

Video · 4.0 MB · 11s · 2048 × 1536

[360.mp4](https://demos.transloadit.com/32/865514da9240a089f4ea1315c5db65/360.mp4)

Video · 9.4 MB · 26s · 2048 × 1536

[joakim\_karud-rock\_angel.mp3](https://demos.transloadit.com/40/81a698ab5d4edbbf3bb16fd6ecf6f3/joakim%5Fkarud-rock%5Fangel.mp3)

Audio · 8.9 MB · 233s

```
":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)

[wave.mp4](https://demos.transloadit.com/83/1f59ee229e458fb3686e05db353009/wave.mp4)

Video · 1.8 MB · 12s · 1024 × 768

[backflip.mp4](https://demos.transloadit.com/89/1e0f97c61645cda6c3bdfd04d3f3d2/backflip.mp4)

Video · 1.6 MB · 11s · 1024 × 768

[360.mp4](https://demos.transloadit.com/d3/3973d6ac6e4f2f94f06b1d0778b93f/360.mp4)

Video · 3.8 MB · 26s · 1024 × 768

```
"resized": {
  "use": ":original",
  "robot": "/video/encode",
  "result": true,
  "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

### Concatenate 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)

[360\_wave\_backflip.mp4](https://demos.transloadit.com/b5/d8a021ae474cf3b6e95bc263a03bd2/360%5Fwave%5Fbackflip.mp4)

Video · 7.0 MB · 49s · 1024 × 768

```
"joined": {
  "use": {
    "steps": [
      {
        "name": "resized",
        "fields": "myfile_0",
        "as": "video_1"
      },
      {
        "name": "resized",
        "fields": "myfile_1",
        "as": "video_2"
      },
      {
        "name": "resized",
        "fields": "myfile_2",
        "as": "video_3"
      }
    ],
    "bundle_steps": true
  },
  "robot": "/video/concat",
  "result": true,
  "ffmpeg_stack": "v7",
  "preset": "ipad-high"
}
```

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

This bot concatenates several videos together

Step 4

### Merge video, audio, images into one video

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)

[wave.mp4](https://demos.transloadit.com/69/25f7b003084ce0b547bd71a67d4299/wave.mp4)

Video · 11 MB · 49s · 1024 × 768

```
"merged": {
  "use": {
    "steps": [
      {
        "name": ":original",
        "as": "audio"
      },
      {
        "name": "joined",
        "as": "video"
      }
    ]
  },
  "robot": "/video/merge",
  "result": true,
  "ffmpeg_stack": "v7",
  "preset": "ipad-high"
}
```

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

This bot composes a new video by adding an audio track to existing still image(s) or video

Step 5

### 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)

[wave.mp4](https://demos.transloadit.com/5b/ef0ae7b4f44ecc91b9b4c96b37f013/wave.mp4)

Video · 2.1 MB · 13s · 1024 × 768

```
"shortened10": {
  "use": "merged",
  "robot": "/video/encode",
  "result": true,
  "ffmpeg": {
    "ss": "00:00:0.0",
    "t": 13
  },
  "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 6

### 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)

[wave.mp4](https://demos.transloadit.com/d5/c54f7a5afd4828a8c79b2d4d73d892/wave.mp4)

Video · 2.0 MB · 13s · 1024 × 768

```
"shortened10_watermarked": {
  "use": "shortened10",
  "robot": "/video/encode",
  "result": true,
  "ffmpeg_stack": "v7",
  "preset": "ipad-high",
  "turbo": true,
  "watermark_position": "bottom-right",
  "watermark_size": "25%",
  "watermark_url": "https://demos.transloadit.com/inputs/transloadit-padded.png"
}
```

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

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

Step 7

### 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)

[wave.mp4](https://demos.transloadit.com/e4/822139c5c145a69b59ff2dc55db554/wave.mp4)

Video · 4.3 MB · 27s · 1024 × 768

```
"shortened25": {
  "use": "merged",
  "robot": "/video/encode",
  "result": true,
  "ffmpeg": {
    "ss": "00:00:0.0",
    "t": 27
  },
  "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 8

### 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)

[wave.mp4](https://demos.transloadit.com/7e/409517805041508ade36668ec6c5eb/wave.mp4)

Video · 4.3 MB · 27s · 1024 × 768

```
"shortened25_watermarked": {
  "use": "shortened25",
  "robot": "/video/encode",
  "result": true,
  "ffmpeg_stack": "v7",
  "preset": "ipad-high",
  "turbo": true,
  "watermark_position": "bottom-right",
  "watermark_size": "25%",
  "watermark_url": "https://demos.transloadit.com/inputs/transloadit-padded.png"
}
```

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

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

Step 9

### 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)

[wave.mp4](https://demos.transloadit.com/78/c66c1d68af4fd69dd9c0f52227c518/wave.mp4)

Video · 7.8 MB · 49s · 1024 × 768

```
"shortened50": {
  "use": "merged",
  "robot": "/video/encode",
  "result": true,
  "ffmpeg": {
    "ss": "00:00:0.0",
    "t": 49
  },
  "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 10

### 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)

[wave.mp4](https://demos.transloadit.com/53/ca23d97f1f42cdbcda800380f591e8/wave.mp4)

Video · 7.8 MB · 49s · 1024 × 768

```
"shortened50_watermarked": {
  "use": "shortened50",
  "robot": "/video/encode",
  "result": true,
  "ffmpeg_stack": "v7",
  "preset": "ipad-high",
  "turbo": true,
  "watermark_position": "bottom-right",
  "watermark_size": "25%",
  "watermark_url": "https://demos.transloadit.com/inputs/transloadit-padded.png"
}
```

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

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

Step 11

### 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/d6/e48ba5f7354b9f8a644aa6fede9789/wave.mp4⁠](https://demos.transloadit.com/d6/e48ba5f7354b9f8a644aa6fede9789/wave.mp4)
* [https://demos.transloadit.com/c9/a572f652ce4af89ca141e0fbf5afc9/backflip.mp4⁠](https://demos.transloadit.com/c9/a572f652ce4af89ca141e0fbf5afc9/backflip.mp4)
* [https://demos.transloadit.com/32/865514da9240a089f4ea1315c5db65/360.mp4⁠](https://demos.transloadit.com/32/865514da9240a089f4ea1315c5db65/360.mp4)
* [https://demos.transloadit.com/40/81a698ab5d4edbbf3bb16fd6ecf6f3/joakim\_karud-rock\_angel.mp3⁠](https://demos.transloadit.com/40/81a698ab5d4edbbf3bb16fd6ecf6f3/joakim%5Fkarud-rock%5Fangel.mp3)

`resized`

* [https://demos.transloadit.com/83/1f59ee229e458fb3686e05db353009/wave.mp4⁠](https://demos.transloadit.com/83/1f59ee229e458fb3686e05db353009/wave.mp4)
* [https://demos.transloadit.com/89/1e0f97c61645cda6c3bdfd04d3f3d2/backflip.mp4⁠](https://demos.transloadit.com/89/1e0f97c61645cda6c3bdfd04d3f3d2/backflip.mp4)
* [https://demos.transloadit.com/d3/3973d6ac6e4f2f94f06b1d0778b93f/360.mp4⁠](https://demos.transloadit.com/d3/3973d6ac6e4f2f94f06b1d0778b93f/360.mp4)

`joined`

* [https://demos.transloadit.com/b5/d8a021ae474cf3b6e95bc263a03bd2/360\_wave\_backflip.mp4⁠](https://demos.transloadit.com/b5/d8a021ae474cf3b6e95bc263a03bd2/360%5Fwave%5Fbackflip.mp4)

`merged`

* [https://demos.transloadit.com/69/25f7b003084ce0b547bd71a67d4299/wave.mp4⁠](https://demos.transloadit.com/69/25f7b003084ce0b547bd71a67d4299/wave.mp4)

`shortened10`

* [https://demos.transloadit.com/5b/ef0ae7b4f44ecc91b9b4c96b37f013/wave.mp4⁠](https://demos.transloadit.com/5b/ef0ae7b4f44ecc91b9b4c96b37f013/wave.mp4)

`shortened10_watermarked`

* [https://demos.transloadit.com/d5/c54f7a5afd4828a8c79b2d4d73d892/wave.mp4⁠](https://demos.transloadit.com/d5/c54f7a5afd4828a8c79b2d4d73d892/wave.mp4)

`shortened25`

* [https://demos.transloadit.com/e4/822139c5c145a69b59ff2dc55db554/wave.mp4⁠](https://demos.transloadit.com/e4/822139c5c145a69b59ff2dc55db554/wave.mp4)

`shortened25_watermarked`

* [https://demos.transloadit.com/7e/409517805041508ade36668ec6c5eb/wave.mp4⁠](https://demos.transloadit.com/7e/409517805041508ade36668ec6c5eb/wave.mp4)

`shortened50`

* [https://demos.transloadit.com/78/c66c1d68af4fd69dd9c0f52227c518/wave.mp4⁠](https://demos.transloadit.com/78/c66c1d68af4fd69dd9c0f52227c518/wave.mp4)

`shortened50_watermarked`

* [https://demos.transloadit.com/53/ca23d97f1f42cdbcda800380f591e8/wave.mp4⁠](https://demos.transloadit.com/53/ca23d97f1f42cdbcda800380f591e8/wave.mp4)

```
"exported": {
  "use": [
    "resized",
    "joined",
    "merged",
    "shortened10",
    "shortened25",
    "shortened50",
    "shortened10_watermarked",
    "shortened25_watermarked",
    "shortened50_watermarked",
    ":original"
  ],
  "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',
            },
            resized: {
              use: ':original',
              robot: '/video/encode',
              result: true,
              ffmpeg_stack: 'v7',
              preset: 'ipad-high',
              turbo: true,
            },
            joined: {
              use: {
                steps: [
                  {
                    name: 'resized',
                    fields: 'myfile_0',
                    as: 'video_1',
                  }, 
,                  {
                    name: 'resized',
                    fields: 'myfile_1',
                    as: 'video_2',
                  }, 
,                  {
                    name: 'resized',
                    fields: 'myfile_2',
                    as: 'video_3',
                  }, 
                ],
                bundle_steps: true,
              },
              robot: '/video/concat',
              result: true,
              ffmpeg_stack: 'v7',
              preset: 'ipad-high',
            },
            merged: {
              use: {
                steps: [
                  {
                    name: ':original',
                    as: 'audio',
                  }, 
,                  {
                    name: 'joined',
                    as: 'video',
                  }, 
                ],
              },
              robot: '/video/merge',
              result: true,
              ffmpeg_stack: 'v7',
              preset: 'ipad-high',
            },
            shortened10: {
              use: 'merged',
              robot: '/video/encode',
              result: true,
              ffmpeg: {
                ss: '00:00:0.0',
                t: 13,
              },
              ffmpeg_stack: 'v7',
              preset: 'ipad-high',
              turbo: true,
            },
            shortened10_watermarked: {
              use: 'shortened10',
              robot: '/video/encode',
              result: true,
              ffmpeg_stack: 'v7',
              preset: 'ipad-high',
              turbo: true,
              watermark_position: 'bottom-right',
              watermark_size: '25%',
              watermark_url: 'https://demos.transloadit.com/inputs/transloadit-padded.png',
            },
            shortened25: {
              use: 'merged',
              robot: '/video/encode',
              result: true,
              ffmpeg: {
                ss: '00:00:0.0',
                t: 27,
              },
              ffmpeg_stack: 'v7',
              preset: 'ipad-high',
              turbo: true,
            },
            shortened25_watermarked: {
              use: 'shortened25',
              robot: '/video/encode',
              result: true,
              ffmpeg_stack: 'v7',
              preset: 'ipad-high',
              turbo: true,
              watermark_position: 'bottom-right',
              watermark_size: '25%',
              watermark_url: 'https://demos.transloadit.com/inputs/transloadit-padded.png',
            },
            shortened50: {
              use: 'merged',
              robot: '/video/encode',
              result: true,
              ffmpeg: {
                ss: '00:00:0.0',
                t: 49,
              },
              ffmpeg_stack: 'v7',
              preset: 'ipad-high',
              turbo: true,
            },
            shortened50_watermarked: {
              use: 'shortened50',
              robot: '/video/encode',
              result: true,
              ffmpeg_stack: 'v7',
              preset: 'ipad-high',
              turbo: true,
              watermark_position: 'bottom-right',
              watermark_size: '25%',
              watermark_url: 'https://demos.transloadit.com/inputs/transloadit-padded.png',
            },
            exported: {
              use: [
                'resized', 
,                'joined', 
,                'merged', 
,                'shortened10', 
,                'shortened25', 
,                'shortened50', 
,                'shortened10_watermarked', 
,                'shortened25_watermarked', 
,                'shortened50_watermarked', 
,                ':original', 
              ],
              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→Video EncodingAdd an audio track to video footage](/demos/video-encoding/add-audio-track-to-video-footage.md)
* [View demo→Video EncodingAdd an empty audio track to still video](/demos/video-encoding/add-empty-audio-track-to-still-video.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

Unpredictable costs

Transparent pricing

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 · 5 GB included in the free plan · Cancel anytime