HLS and MPEG-DASH adaptive streaming

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, this enables users to select a specific quality instead of automatic selection.

Delivering HLS or MPEG-DASH videos involves the following steps:

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.

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:

Or

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:

Or