# Streaming HTTP en vivo (HLS)

HTTP Live Streaming (también conocido como HLS) es un protocolo de comunicaciones de transmisión de medios basado en HTTP implementado por Apple Inc. como parte de su software QuickTime, Safari, OS X e iOS.

Esta definición tomada de la [página de Wikipedia de HLS](https://en.wikipedia.org/wiki/HTTP_Live_Streaming).

Funciona de manera similar a DASH al dividir el contenido en fragmentos y servirlo un segmento a la vez, potencialmente sin un fragmento final.

La transmisión en vivo se indicará mediante un indicador en vivo mostrado junto con la barra de control.

Fluid Player hace uso de [hls.js](https://github.com/video-dev/hls.js) para reproducir `.m3u8` archivos. Una vez que un `.m3u8` archivo se establece como fuente, Fluid Player lo reproducirá, como se puede ver en el ejemplo a continuación. Para los navegadores que tienen soporte nativo para HLS, Fluid Player no usará `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>
```

Si tu navegador admite HLS de forma nativa, Fluid Player no utilizará [hls.js](https://github.com/video-dev/hls.js). Sin embargo, si prefieres usar hls.js a pesar del soporte nativo, puedes anularlo habilitando la siguiente bandera.

```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 con VAST

Fluid Player admite HTTP Live Streaming con etiquetas VAST. Para `.m3u8` que se reproduzcan archivos, la `MediaFile` etiqueta debe tener los siguientes atributos:

* `delivery` debe establecerse como `streaming`
* `type` debe establecerse como `application/vnd.apple.mpegurl`

Por ejemplo:

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

## Personalización de HLS

Fluid Player tiene ganchos que admiten `hls.js` configuración. Se puede encontrar una lista completa de propiedades configurables en la [oficial `hsl.js` documentación de la API](https://github.com/video-dev/hls.js/blob/master/docs/API.md).

A continuación se muestra un ejemplo de configuración en la que puedes establecer la longitud máxima del búfer y la calidad de transmisión con la que se iniciará el video.

```javascript
fluidPlayer('fluid-player', {
    modules: {
        configureHls: (options) => {
            return {
                maxMaxBufferLength: 30, // Longitud máxima del video almacenado en búfer en segundos
                startLevel: 4, // Nivel de calidad inicial: 4 suele ser Full HD (1080p), pero esto puede cambiar según la fuente
                ...options,
            }
        },
        onBeforeInitHls: (hls) => {
            hls.startLevel = 4; // Establecer programáticamente el nivel de calidad inicial
        },
        onAfterInitHls: (hls) => {
            hls.nextLevel = 4 // Establecer programáticamente el nivel de calidad para el siguiente segmento
        },
    }
});
```

Para obtener más información sobre el uso de ganchos, consulta la [configuración avanzada](/es/configuracion/advanced-configuration.md) página.

## Selector de calidad de video integrado con opción automática

Fluid Player llena automáticamente el selector de calidad de video con los niveles disponibles del archivo y agrega una `auto` opción.

{% hint style="warning" %}
**Nota importante**: Para garantizar que el selector de calidad de video esté habilitado de forma consistente, debes anular el uso de HLS nativo. Para saber cómo hacerlo, puedes hacer clic [aquí](#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/es/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.