1. Home
    2. ›
  2. Services
    3. ›
  3. Video Encoding
    4. ›
  4. Demos
    5. ›
  5. Implement HTTP Live Streaming (HLS)

Implement HTTP Live Streaming (HLS)

The demo below encodes a video into three high-quality versions, before pushing them into the /video/adaptive Robot, which cuts them into several segments and generates playlist files containing all the segments. The /video/adaptive Robot also generates an HLS master playlist file - a playlist of playlists, so to speak. Lastly, all the files are stored in your Amazon S3 bucket. The trick here is that all files are already stored in the proper location to make the playlist work. This is done using the special "${file.meta.relative_path}" variable.

Our /video/adaptive Robot also supports MPEG-Dash. For more information about that, please check the documentation.

Once the demo completes, right click on the Open link next to the my_playlist.m3u8 results and copy its link address. Then paste it in this player and see how it works!

Warning It seems your browser does not send the referer, which we need to stop people from (ab)using our demos in other websites. If you want to use the demos, please allow your browser to send its referer to us. Adding us to the whitelist of blockers usually helps.

This demo uses:

  • Our /video/encode Robot, which encodes, resizes, applies watermarks to videos and animated GIFs
  • Our /video/adaptive Robot, which encodes videos into HTTP Live Streaming (HLS) and MPEG-Dash supported formats and generates the necessary manifest and playlist files
  • Our /s3/store Robot, which exports encoding results to Amazon S3

This demo uses :original, which indicates a user upload that was received by Transloadit. If you'd initiate the encoding from your servers, you will likely want to add one of our import Robots to acquire the input files instead.



By using our jQuery SDK, you can bring the power of Transloadit directly to your HTML forms. It will even display a stylish upload progress bar.

Enjoy ample customization options for design and behavior and make use of the many event callbacks to tailor its behavior to your needs.

We have a great new JavaScript uploader in the works called Uppy and you are welcome to give that a shot, but for now, the following example uses our jQuery SDK and it is still the recommended way to integrate Transloadit into web browsers.

<body>
  <form action="/uploads" enctype="multipart/form-data" method="POST">
    <input type="file" name="my_file" multiple="multiple" />
  </form>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="//assets.transloadit.com/js/jquery.transloadit2-v3-latest.js"></script>
  <script type="text/javascript">
  $(function() {
    $('form').transloadit({
      wait: true,
      triggerUploadOnFileSelection: true,
      params: {
        auth: {
          // Secure via: https://transloadit.com/docs/api-docs/#authentication
          key: 'YOUR_TRANSLOADIT_KEY',
        },
        // It's often better to use a `template_id` than to
        // inline encoding instructions here:
        steps: {
          low: {
            robot: '/video/encode',
            use: ':original',
            ffmpeg_stack: 'v2.2.3',
            preset: 'hls_270p'
          },
          mid: {
            robot: '/video/encode',
            use: ':original',
            ffmpeg_stack: 'v2.2.3',
            preset: 'hls_360p'
          },
          high: {
            robot: '/video/encode',
            use: ':original',
            ffmpeg_stack: 'v2.2.3',
            preset: 'hls_540p'
          },
          adaptive: {
            robot: '/video/adaptive',
            use: {'steps':['low','mid','high'],'bundle_steps':true},
            technique: 'hls',
            playlist_name: 'my_playlist.m3u8'
          },
          store: {
            robot: '/s3/store',
            use: 'adaptive',
            path: 'hlstest/${file.meta.relative_path}/${file.name}',
            key: 'YOUR_AWS_KEY',
            secret: 'YOUR_AWS_SECRET',
            bucket: 'YOUR_S3_BUCKET'
          }
        }
      }
    });
  });
  </script>
</body>

Uppy is our take on perfecting file uploading in the browser. It's rather new and not stable yet, but if you'd like to play around with it, you can already!

<link href="https://unpkg.com/uppy/dist/uppy.min.css" rel="stylesheet">
<script src="https://unpkg.com/uppy/dist/uppy.min.js"></script>
<button id="uppy-open-modal">Select Files</button>
<script>
  const uppy = Uppy.Core({ debug: true, autoProceed: false })
    .use(Uppy.Tus10, { resume: false })
    .use(Uppy.Transloadit, {
      params: {
        auth: {
          key: 'YOUR_TRANSLOADIT_KEY',
        },
        steps: {
          low: {
            robot: '/video/encode',
            use: ':original',
            ffmpeg_stack: 'v2.2.3',
            preset: 'hls_270p'
          },
          mid: {
            robot: '/video/encode',
            use: ':original',
            ffmpeg_stack: 'v2.2.3',
            preset: 'hls_360p'
          },
          high: {
            robot: '/video/encode',
            use: ':original',
            ffmpeg_stack: 'v2.2.3',
            preset: 'hls_540p'
          },
          adaptive: {
            robot: '/video/adaptive',
            use: {'steps':['low','mid','high'],'bundle_steps':true},
            technique: 'hls',
            playlist_name: 'my_playlist.m3u8'
          },
          store: {
            robot: '/s3/store',
            use: 'adaptive',
            path: 'hlstest/${file.meta.relative_path}/${file.name}',
            key: 'YOUR_AWS_KEY',
            secret: 'YOUR_AWS_SECRET',
            bucket: 'YOUR_S3_BUCKET'
          }
        }
      },
      waitForEncoding: true,
    })
    .use(Uppy.Dashboard, {
      trigger: '#uppy-open-modal',
      target: 'body'
    })
    .use(Uppy.Webcam, { target: Dashboard })
    .on('transloadit:result', (stepName, result) => {
      // use transloadit encoding result here.
      console.log('Result here ====>', stepName, result)
    })
    .run()
</script>

We have a fully featured software development kit for Node.js, so you can easily integrate it into your node apps.

// npm install transloadit --save
const TransloaditClient = require('transloadit')

const transloadit = new TransloaditClient({
  authKey: 'YOUR_TRANSLOADIT_KEY',
  authSecret: 'YOUR_TRANSLOADIT_SECRET'
})

transloadit.addFile('myinput', './lolcat.jpg')
const options = {
  params: {
    steps: {
      low: {
        robot: '/video/encode',
        use: ':original',
        ffmpeg_stack: 'v2.2.3',
        preset: 'hls_270p'
      },
      mid: {
        robot: '/video/encode',
        use: ':original',
        ffmpeg_stack: 'v2.2.3',
        preset: 'hls_360p'
      },
      high: {
        robot: '/video/encode',
        use: ':original',
        ffmpeg_stack: 'v2.2.3',
        preset: 'hls_540p'
      },
      adaptive: {
        robot: '/video/adaptive',
        use: {'steps':['low','mid','high'],'bundle_steps':true},
        technique: 'hls',
        playlist_name: 'my_playlist.m3u8'
      },
      store: {
        robot: '/s3/store',
        use: 'adaptive',
        path: 'hlstest/${file.meta.relative_path}/${file.name}',
        key: 'YOUR_AWS_KEY',
        secret: 'YOUR_AWS_SECRET',
        bucket: 'YOUR_S3_BUCKET'
      }
    }
  }
}

transloadit.createAssembly(options, (err, result) => {
  if (err) {
    throw err
  }

  console.log({result})
})

Our PHP SDK allows you to automate the uploading of files through the Transloadit REST API using PHP.

It can be installed via composer.

// Install "transloadit/php-sdk"
// via Composer (https://getcomposer.org)
use transloadit\Transloadit;
$transloadit = new Transloadit(array(
  "key" => "YOUR_TRANSLOADIT_KEY",
  "secret" => "YOUR_TRANSLOADIT_SECRET",
));

$files = array();
array_push($files, "./lolcat.jpg");
$response = $transloadit->createAssembly(array(
  "files" => $files,
  "params" => array(
    "steps" => json_decode({
      "low": {
        "robot": "/video/encode",
        "use": ":original",
        "ffmpeg_stack": "v2.2.3",
        "preset": "hls_270p"
      },
      "mid": {
        "robot": "/video/encode",
        "use": ":original",
        "ffmpeg_stack": "v2.2.3",
        "preset": "hls_360p"
      },
      "high": {
        "robot": "/video/encode",
        "use": ":original",
        "ffmpeg_stack": "v2.2.3",
        "preset": "hls_540p"
      },
      "adaptive": {
        "robot": "/video/adaptive",
        "use": {
          "steps": [
            "low",
            "mid",
            "high"
          ],
          "bundle_steps": true
        },
        "technique": "hls",
        "playlist_name": "my_playlist.m3u8"
      },
      "store": {
        "robot": "/s3/store",
        "use": "adaptive",
        "path": "hlstest/${file.meta.relative_path}/${file.name}",
        "key": "YOUR_AWS_KEY",
        "secret": "YOUR_AWS_SECRET",
        "bucket": "YOUR_S3_BUCKET"
      }
    }, true),
  ),
));

Our Ruby Gem allows you to automate the uploading of files through the Transloadit REST API.

If you run Ruby on Rails and are instead looking to integrate with the browser to handle file uploads, then we also have a Ruby on Rails SDK ready for you to use.

# gem install transloadit
transloadit = Transloadit.new(
  :key => "YOUR_TRANSLOADIT_KEY",
  :secret => "YOUR_TRANSLOADIT_SECRET"
)

low = transloadit.step "low", "/video/encode",
  :use => ":original",
  :ffmpeg_stack => "v2.2.3",
  :preset => "hls_270p"
)
mid = transloadit.step "mid", "/video/encode",
  :use => ":original",
  :ffmpeg_stack => "v2.2.3",
  :preset => "hls_360p"
)
high = transloadit.step "high", "/video/encode",
  :use => ":original",
  :ffmpeg_stack => "v2.2.3",
  :preset => "hls_540p"
)
adaptive = transloadit.step "adaptive", "/video/adaptive",
  :use => {"steps":["low","mid","high"],"bundle_steps":true},
  :technique => "hls",
  :playlist_name => "my_playlist.m3u8"
)
store = transloadit.step "store", "/s3/store",
  :use => "adaptive",
  :path => "hlstest/${file.meta.relative_path}/${file.name}",
  :key => "YOUR_AWS_KEY",
  :secret => "YOUR_AWS_SECRET",
  :bucket => "YOUR_S3_BUCKET"
)

assembly = transloadit.assembly(
  :steps => [ low, mid, high, adaptive, store ]
)

files = []
files.push('./lolcat.jpg')
response = assembly.create! *files

until response.finished?
  sleep 1; response.reload!
end

if !response.error?
  # handle success
end
from transloadit import client

tl = client.Transloadit('YOUR_TRANSLOADIT_KEY', 'YOUR_TRANSLOADIT_SECRET')
assembly = tl.new_assembly()

assembly.add_file(open('./lolcat.jpg', 'rb'))
assembly.add_step('low', '/video/encode', {'robot':'/video/encode','use':':original','ffmpeg_stack':'v2.2.3','preset':'hls_270p'})
assembly.add_step('mid', '/video/encode', {'robot':'/video/encode','use':':original','ffmpeg_stack':'v2.2.3','preset':'hls_360p'})
assembly.add_step('high', '/video/encode', {'robot':'/video/encode','use':':original','ffmpeg_stack':'v2.2.3','preset':'hls_540p'})
assembly.add_step('adaptive', '/video/adaptive', {'robot':'/video/adaptive','use':{'steps':['low','mid','high'],'bundle_steps':true},'technique':'hls','playlist_name':'my_playlist.m3u8'})
assembly.add_step('store', '/s3/store', {'robot':'/s3/store','use':'adaptive','path':'hlstest/${file.meta.relative_path}/${file.name}','key':'YOUR_AWS_KEY','secret':'YOUR_AWS_SECRET','bucket':'YOUR_S3_BUCKET'})

assembly_response = assembly.create(retries=5, wait=True)

print assembly_response.data.get('assembly_id')

# or
print assembly_response.data['assembly_id']

We have a powerful Go client that makes using Transloadit easy.

// go get gopkg.in/transloadit/go-sdk.v1
options := transloadit.DefaultConfig
options.AuthKey = "YOUR_TRANSLOADIT_KEY"
options.AuthSecret = "YOUR_TRANSLOADIT_SECRET"
client := transloadit.NewClient(options)

// Initialize new assembly
assembly := transloadit.NewAssembly()

// Add files to upload
assembly.AddFile("myinput", "./lolcat.jpg")
// Add instructions, e.g. resize image, or encode video
assembly.AddStep("low", map[string]interface{}{
  "robot": "/video/encode",
  "use": ":original",
  "ffmpeg_stack": "v2.2.3",
  "preset": "hls_270p"
})
assembly.AddStep("mid", map[string]interface{}{
  "robot": "/video/encode",
  "use": ":original",
  "ffmpeg_stack": "v2.2.3",
  "preset": "hls_360p"
})
assembly.AddStep("high", map[string]interface{}{
  "robot": "/video/encode",
  "use": ":original",
  "ffmpeg_stack": "v2.2.3",
  "preset": "hls_540p"
})
assembly.AddStep("adaptive", map[string]interface{}{
  "robot": "/video/adaptive",
  "use": {"steps":["low","mid","high"],"bundle_steps":true},
  "technique": "hls",
  "playlist_name": "my_playlist.m3u8"
})
assembly.AddStep("store", map[string]interface{}{
  "robot": "/s3/store",
  "use": "adaptive",
  "path": "hlstest/${file.meta.relative_path}/${file.name}",
  "key": "YOUR_AWS_KEY",
  "secret": "YOUR_AWS_SECRET",
  "bucket": "YOUR_S3_BUCKET"
})


// Start the upload
info, err := client.StartAssembly(context.Background(), assembly)
if err != nil {
  panic(err)
}

// All files have now been uploaded and the assembly has started but no
// results are available yet since the conversion has not finished.
// WaitForAssembly provides functionality for polling until the assembly
// has ended.
info, err = client.WaitForAssembly(context.Background(), info)
if err != nil {
  panic(err)
}

fmt.Printf("You can view the result at: %s\n", info.Results["resize"][0].SSLURL)
// compile 'com.transloadit.sdk:transloadit:0.0.3'
import com.transloadit.sdk.Assembly;
import com.transloadit.sdk.Transloadit;
import com.transloadit.sdk.exceptions.LocalOperationException;
import com.transloadit.sdk.exceptions.RequestException;
import com.transloadit.sdk.response.AssemblyResponse;

import java.io.File;
import java.util.HashMap;
import java.util.Map;

public class Main {
    public static void main(String[] args) {
        Transloadit transloadit = new Transloadit("YOUR_TRANSLOADIT_KEY", "YOUR_TRANSLOADIT_SECRET");
        Assembly assembly = transloadit.newAssembly();
        
        Map<String, Object> lowStepOptions = new HashMap<>();
        lowStepOptions.put("use", ":original");
        lowStepOptions.put("ffmpeg_stack", "v2.2.3");
        lowStepOptions.put("preset", "hls_270p");
        assembly.addStep("low", "/video/encode", lowStepOptions);
        
        Map<String, Object> midStepOptions = new HashMap<>();
        midStepOptions.put("use", ":original");
        midStepOptions.put("ffmpeg_stack", "v2.2.3");
        midStepOptions.put("preset", "hls_360p");
        assembly.addStep("mid", "/video/encode", midStepOptions);
        
        Map<String, Object> highStepOptions = new HashMap<>();
        highStepOptions.put("use", ":original");
        highStepOptions.put("ffmpeg_stack", "v2.2.3");
        highStepOptions.put("preset", "hls_540p");
        assembly.addStep("high", "/video/encode", highStepOptions);
        
        Map<String, Object> adaptiveStepOptions = new HashMap<>();
        adaptiveStepOptions.put("use", new String[]{ "stepslowmidhigh", "bundle_stepstrue" });
        adaptiveStepOptions.put("technique", "hls");
        adaptiveStepOptions.put("playlist_name", "my_playlist.m3u8");
        assembly.addStep("adaptive", "/video/adaptive", adaptiveStepOptions);
        
        Map<String, Object> storeStepOptions = new HashMap<>();
        storeStepOptions.put("use", "adaptive");
        storeStepOptions.put("path", "hlstest/${file.meta.relative_path}/${file.name}");
        storeStepOptions.put("key", "YOUR_AWS_KEY");
        storeStepOptions.put("secret", "YOUR_AWS_SECRET");
        storeStepOptions.put("bucket", "YOUR_S3_BUCKET");
        assembly.addStep("store", "/s3/store", storeStepOptions);
        
        assembly.addFile(new File("./lolcat.jpg"));
        try {
            AssemblyResponse response = assembly.save();

            // wait for assembly to finish executing.
            while (!response.isFinished()) {
                response = transloadit.getAssemblyByUrl(response.getSslUrl());
            }

            System.out.println(response.getId());
            System.out.println(response.getUrl());
            System.out.println(response.json());
        } catch (RequestException | LocalOperationException e) {
            // handle exception here
        }
    }
}

Don't feel like coding? Use our command line tool to watch an ./input/ directory for incoming files and automatically convert them through instructions that you saved locally in: ./steps.json.

The results will be saved in the ./output/ directory.

You can optionally automatically remove successfully processed input files.

npm install transloadify -g

echo '{
  "low": {
    "robot": "/video/encode",
    "use": ":original",
    "ffmpeg_stack": "v2.2.3",
    "preset": "hls_270p"
  },
  "mid": {
    "robot": "/video/encode",
    "use": ":original",
    "ffmpeg_stack": "v2.2.3",
    "preset": "hls_360p"
  },
  "high": {
    "robot": "/video/encode",
    "use": ":original",
    "ffmpeg_stack": "v2.2.3",
    "preset": "hls_540p"
  },
  "adaptive": {
    "robot": "/video/adaptive",
    "use": {
      "steps": [
        "low",
        "mid",
        "high"
      ],
      "bundle_steps": true
    },
    "technique": "hls",
    "playlist_name": "my_playlist.m3u8"
  },
  "store": {
    "robot": "/s3/store",
    "use": "adaptive",
    "path": "hlstest/${file.meta.relative_path}/${file.name}",
    "key": "YOUR_AWS_KEY",
    "secret": "YOUR_AWS_SECRET",
    "bucket": "YOUR_S3_BUCKET"
  }
}' > ./steps.json

export TRANSLOADIT_KEY="YOUR_TRANSLOADIT_KEY"
export TRANSLOADIT_SECRET="YOUR_TRANSLOADIT_SECRET"

transloadify \
  --input ./lolcat.jpg \
  --output ./resized-lolcat.jpg \
  --steps ./steps.json

Instead of sending Assembly Instructions directly to Transloadit, you can also save them in a secured way as a Template. You can then refer to the template_id in your requests, making sure that secrets and Instructions no longer have to be transmitted, which is a security risk in many cases.

Here is the 'raw' Template, in case you would like to save these Instructions safely in your account, or use these Instructions to talk directly to our REST API without using any SDK.

{
  "steps": {
    "low": {
      "robot": "/video/encode",
      "use": ":original",
      "ffmpeg_stack": "v2.2.3",
      "preset": "hls_270p"
    },
    "mid": {
      "robot": "/video/encode",
      "use": ":original",
      "ffmpeg_stack": "v2.2.3",
      "preset": "hls_360p"
    },
    "high": {
      "robot": "/video/encode",
      "use": ":original",
      "ffmpeg_stack": "v2.2.3",
      "preset": "hls_540p"
    },
    "adaptive": {
      "robot": "/video/adaptive",
      "use": {
        "steps": [
          "low",
          "mid",
          "high"
        ],
        "bundle_steps": true
      },
      "technique": "hls",
      "playlist_name": "my_playlist.m3u8"
    },
    "store": {
      "robot": "/s3/store",
      "use": "adaptive",
      "path": "hlstest/${file.meta.relative_path}/${file.name}",
      "key": "YOUR_AWS_KEY",
      "secret": "YOUR_AWS_SECRET",
      "bucket": "YOUR_S3_BUCKET"
    }
  }
}

So many ways to integrate

Transloadit's versatility not only shines through in our diverse encoding features, but also in the ways that you can integrate with those. Would you like to handle your own file uploads? Or do you have a big library of files ready to be encoded? You leverage Transloadit's highly scalable encoding platform by letting us import from your source or post files directly from your server using a backend language. We have kits available for most platforms.

If there's no kit available for your platform, you can integrate with our REST API.

Perhaps you want Transloadit to also handle uploads? In this case take a look at our HTML integrations.

Notifying your server

Transloadit will then accept the upload on behalf of your site, process all the files according to your Assembly Instructions and export to your storage platform of choice. Your visitor will now in reality be uploading links to the encoding results (example) to your website's /uploads URL.

This takes the pressure off your platform, and ensures the user will have a smooth experience.

Typically, it is advisable to save a record of the result in your database, so you will need to inspect the transloadit POST payload that was sent to your /uploads, or Notification URL. In PHP, that would look like this: 

print_r(json_decode($_POST['transloadit'], true));

Try it out

Maximum size for all demos is 100MB.

Transloadit is a service for companies with developers. Visitors are welcome to do one-off media conversions but unfortunately we cannot provide support for that, sorry!


Try it in your account

Try out this demo in your own account by pasting it into one of your Templates.

Get started for free

Sign up with GitHub or

Need help? Talk to a human