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.

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

<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. Sin embargo, si prefieres usar hls.js a pesar del soporte nativo, puedes anularlo habilitando la siguiente bandera.

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

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

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.

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

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í