Programmable Media

HLS and MPEG-DASH adaptive streaming

Last updated: Apr-19-2024

The built-in video players available with many desktop and mobile browsers do not support HLS and/or MPEG-DASH adaptive bitrate streaming formats. By embedding the Cloudinary video player in your application, you can deliver any HLS or MPEG-DASH video. By using this capability in conjunction with Cloudinary's automatic transcoding from standard video formats to HLS or MPEG-DASH, including generation of all related files and video representations, you can stream any video from Cloudinary to your users according to the bandwidth and CPU capacity that the video player detects in real-time.

When streaming with HLS and DASH, the video player will automatically adjust the quality depending on the available bandwidth. The player also includes a quality selector for the representations generated, which enables users to select a specific quality instead of automatic selection. Delivering HLS or MPEG-DASH videos differs depending on how you select a streaming profile.

  • If you plan to deliver your videos with MPEG-DASH or HLS, use the standard package.
  • If you're importing the player as a module and using DASH, you need to import the DASH module also. For example:
  • For Safari users on mobile and desktop, the native Safari player will takeover playback. As a result, the quality selector will not be available.
  • Supports tokens for delivering videos.

Automatic streaming profile selection

Automatic streaming profile selection is the simplest way to deliver adaptive bitrate streaming (HLS or DASH) using the video player.

Define either hls or dash as part of your sourceTypes and the player will automatically add sp_auto to your URLs for automatic streaming profile selection. This uses the CMAF format and your video will be processed for streaming using the specified protocols on first request.

For example:


Currently, a limited set of video transformations are supported for use together with sp_auto. See examples of transformations that you can apply in Combining transformations with automatic streaming profile selection.

Manual streaming profile selection

Manually selecting a streaming profile allows you to fine tune the exact renditions that are delivered to your users when streaming. Here are the steps to enable adaptive streaming using manual streaming profile selection:

1. Eagerly transcode your video to HLS or MPEG-DASH

When you upload your video to Cloudinary, or using the explicit method, include an eager transformation with your desired streaming profile and adaptive streaming format. This ensures that all required files and video representations are generated and ready to be delivered upon request.

For detailed information and instructions on transcoding to HLS or MPEG-DASH and the options for streaming profiles, see Adaptive bitrate streaming - HLS and MPEG-DASH.

2. Specify the streaming format and streaming profile

When you specify the video source file to play, use the sourceTypes method (or data-cld-source-types) to specify hls or dash, and in the transformation, include the streaming profile you want to use. Make sure the complete transformation is identical to the one you provided in your eager transformation (as per the URL that was returned in the upload response). You can also specify a codec to use with the streaming format by separating it with a '/', for example hls/h265. You need to use a supported streaming profile to use a more advanced codec.

For example:


Specify multiple streaming formats

If you want to fallback to an alternative streaming format, you can specify both hls and dash as part of the sourceTypes method (or data-cld-source-types). You will then need to set the streaming profile for each format in the sourceTransformation, making sure the complete transformation for each is identical to the one you provided in your eager transformation (as per the URL that was returned in the upload response). The player will attempt to use the first format specified, before falling back to the next format, and finally to mp4 if neither is supported by the browser.

For example:


✔️ Feedback sent!

Rate this page: