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 in your Cloudinary account to your users according to the bandwidth and CPU capacity that the video player detects in real-time.

Note
If you plan to deliver in MPEG-DASH format, make sure you reference the required MPEG-DASH files in addition to the video player files. For details, see Enabling MPEG-DASH support for your video player.

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

1. Transcode your video to HLS or MPEG-DASH ahead of time

When you upload your video to your Cloudinary account, 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 for the video player source file

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).

For example:

player.source('oceans', { sourceTypes: ['hls'], transformation: {
 streaming_profile: 'hd' } })

Or

data-cld-source='{"publicId": "oceans", "transformation": {"streaming_profile": "hd"}}'
data-cld-source-types='["hls"]'