> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# HLS and MPEG-DASH adaptive streaming


[//]: # (PageTitle: 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, 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.

> **NOTES**:
>
> * Adaptive streaming functionality (HLS and DASH) is now lazily loaded by default, improving initial load times. When using the player via CDN, the required modules are automatically loaded when needed.

> * When [importing the player as a module](cloudinary_video_player#option_1_install_the_video_player_and_import_as_a_module):

>   * For HLS only: import the `adaptive-streaming` module

>   * For DASH: import both the `adaptive-streaming` and `dash` modules
>   ```js
  // For HLS only
  import 'cloudinary-video-player/adaptive-streaming';

  // For DASH (includes HLS support)
  import 'cloudinary-video-player/adaptive-streaming';
  import 'cloudinary-video-player/dash';
  ```

## Automatic streaming profile selection

[Automatic streaming profile selection](adaptive_bitrate_streaming#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](video_player_api_reference#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:

```js
player.source('oceans', { sourceTypes: ['hls']})
```
Or

```js
data-cld-source='{"publicId": "oceans"}'
data-cld-source-types='["hls"]'
```

> **NOTE**: 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](adaptive_bitrate_streaming#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](adaptive_bitrate_streaming).

### 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](adaptive_bitrate_streaming#step_1_select_a_streaming_profile) to use a more advanced codec.

For example:

```js
player.source('oceans', { sourceTypes: ['hls'], transformation: {
 streaming_profile: 'hd',
 effect: 'vignette:50' } })
```
Or

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

#### 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:

```js
player.source('oceans', { sourceTypes: ['hls', 'dash'], sourceTransformation: { 
    'hls': [{ streaming_profile: 'hd_hls' }], 
    'dash': [{ streaming_profile: 'hd_dash' }],
    'effect': "vignette:50" } })
```
Or

```js
data-cld-source='{"publicId": "oceans"}'
data-cld-source-types='["hls","dash"]'
data-cld-source-transformation='{ "hls": { "streaming_profile": "hd_hls" }, "dash": { "streaming_profile: "hd_dash" }, "effect": "vignette:50" }'       
```

## Adaptive streaming options

You can configure how HLS adaptive streaming videos start playing using the `adaptiveStreaming` option in your source configuration. This allows you to balance between playback start time and initial quality. See the example below for how to use the `fastStart` strategy:

  ```js
  player.source('my-video', {
    sourceTypes: ['hls'],
    adaptiveStreaming: {
      strategy: 'fastStart' // Options: 'fastStart', 'balanced', 'highQuality'
    }
  });
  ```

  The available strategies are:
  
  * `fastStart`: Prioritizes starting playback quickly with a lower initial quality, then adapts to higher quality as conditions are assessed
  * `balanced`: Provides a balance between start time and initial quality. **Default**.
  * `highQuality`: Prioritizes higher initial quality, which may result in a slower playback start

> **What's Next?**:
>
> * [Learn more about delivering adaptive bitrate streaming videos](adaptive_bitrate_streaming)

> * [Learn how to create and manage custom streaming profiles with the Admin API](admin_api#streaming_profiles)

> * [Learn more about the video effects and transformations you can apply to your videos](video_manipulation_and_delivery)

> * [Check out all the video player options in the Video Player API Reference](video_player_api_reference)