HLS and MPEG-DASH adaptive streaming
Last updated: Oct-31-2023
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.
- If you plan to deliver your videos with MPEG-DASH or HLS, use the standard package.
- 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.
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