Last updated: Jul-15-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:
Or
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:
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