# HTTP Live Streaming (HLS)

HTTP Live Streaming (also known as HLS) is an HTTP-based media streaming communications protocol implemented by Apple Inc. as part of its QuickTime, Safari, OS X, and iOS software.

This definition taken from the [HLS wikipedia page](https://en.wikipedia.org/wiki/HTTP_Live_Streaming).

It works similarly to DASH by breaking the content into chunks and serving it one segment at a time, potentially with no final chunk.

Live Streaming will be signaled by a Live Indicator displayed along with the Control bar.

Fluid Player makes use of [hls.js](https://github.com/video-dev/hls.js) to play `.m3u8` files. Once an `.m3u8` file is set as the source, Fluid Player will play it, as can be seen in the example below. For browsers that have native support for HLS, Fluid Player will not use `hls.js`.

```html
<video id='hls-video'>
    <source src='stream_hls.m3u8' type='application/x-mpegURL'/>
</video>

<script>
fluidPlayer(
    'hls-video',
    {
        layoutControls: {
            fillToContainer: true
        }
    }
);
</script>
```

If your browser natively supports HLS, Fluid Player will not utilize [hls.js](https://github.com/video-dev/hls.js). However, if you prefer to use hls.js despite native support, you can override it by enabling the following flag.

```html
<video id='hls-video'>
    <source src='stream_hls.m3u8' type='application/x-mpegURL'/>
</video>

<script>
fluidPlayer(
    'hls-video',
    {
        hls: {
            overrideNative: true
        }
    }
);
</script>
```

## HTTP Live Streaming with VAST

Fluid Player supports HTTP Live Streaming with VAST tags. For `.m3u8` files to be played, the VAST `MediaFile` tag must have the following attributes:

* `delivery` should be set as `streaming`
* `type` should be set as `application/vnd.apple.mpegurl`

For example:

```xml
<MediaFile id="1" delivery="streaming" type="application/vnd.apple.mpegurl" width="480" height="640">
    <![CDATA[ https://example.com/stream_hls.m3u8 ]]>
</MediaFile>
```

## Customizing HLS

Fluid Player has hooks that support `hls.js` configuration. A full list of configurable properties can be found in the [official `hsl.js` API docs](https://github.com/video-dev/hls.js/blob/master/docs/API.md).

Below is an example of a configuration where you can set the maximum buffer length and streaming quality with which the video will be started.

```javascript
fluidPlayer('fluid-player', {
    modules: {
        configureHls: (options) => {
            return {
                maxMaxBufferLength: 30, // Max length of buffered video in seconds
                startLevel: 4, // Starting quality level - 4 is usually Full HD (1080p), but this can change by source
                ...options,
            }
        },
        onBeforeInitHls: (hls) => {
            hls.startLevel = 4; // Programatically set start quality level
        },
        onAfterInitHls: (hls) => {
            hls.nextLevel = 4 // Programatically set quality level for next segment
        },
    }
});
```

For more information on using hooks see the [Advanced configuration](/configuration/advanced-configuration.md) page.

## Built in video quality switcher with auto option

Fluid Player automatically populates the video quality switcher with the available levels from the file and adds an `auto` option.

{% hint style="warning" %}
**Important note**: To ensure the video quality switcher is consistently enabled, you must override the use of native HLS. To find out how to do this, you can click [here](#override-native)
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.fluidplayer.com/streaming/http-live-streaming-hls.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.