HTTP Live Streaming (HLS)

HTTP Live Streaming (também conhecido como HLS) é um protocolo de comunicação de streaming de mídia baseado em HTTP implementado pela Apple Inc. como parte do seu software QuickTime, Safari, OS X e iOS.

Esta definição retirada da página da Wikipedia sobre HLS.

Funciona de forma semelhante ao DASH, dividindo o conteúdo em blocos e servindo-o um segmento de cada vez, potencialmente sem um bloco final.

O Live Streaming será sinalizado por um Indicador Ao Vivo exibido junto com a barra de controlo.

O Fluid Player faz uso de hls.js para reproduzir .m3u8 ficheiros. Assim que um .m3u8 ficheiro é definido como origem, o Fluid Player irá reproduzi-lo, como pode ser visto no exemplo abaixo. Para navegadores que têm suporte nativo para HLS, o Fluid Player não utilizará hls.js.

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

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

Se o seu navegador suportar HLS nativamente, o Fluid Player não utilizará hls.js. No entanto, se preferir usar o hls.js apesar do suporte nativo, pode substituí-lo ativando a seguinte flag.

<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 com VAST

O Fluid Player suporta HTTP Live Streaming com tags VAST. Para .m3u8 ficheiros serem reproduzidos, o VAST MediaFile tag deve ter os seguintes atributos:

• delivery deve ser definido como streaming
• type deve ser definido como application/vnd.apple.mpegurl

Por exemplo:

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

Personalização do HLS

O Fluid Player tem hooks que suportam hls.js configuração. Uma lista completa das propriedades configuráveis pode ser encontrada na oficial hsl.js documentação da API.

Abaixo está um exemplo de configuração em que pode definir o comprimento máximo do buffer e a qualidade de streaming com que o vídeo será iniciado.

fluidPlayer('fluid-player', {
    modules: {
        configureHls: (options) => {
            return {
                maxMaxBufferLength: 30, // Comprimento máximo do vídeo em buffer, em segundos
                startLevel: 4, // Nível de qualidade inicial - 4 é normalmente Full HD (1080p), mas isto pode mudar conforme a origem
                ...options,
            }
        },
        onBeforeInitHls: (hls) => {
            hls.startLevel = 4; // Definir programaticamente o nível de qualidade inicial
        },
        onAfterInitHls: (hls) => {
            hls.nextLevel = 4 // Definir programaticamente o nível de qualidade para o próximo segmento
        },
    }
});

Para mais informações sobre a utilização de hooks, consulte a Configuração avançada página.

Seletor de qualidade de vídeo incorporado com opção automática

O Fluid Player preenche automaticamente o seletor de qualidade de vídeo com os níveis disponíveis do ficheiro e adiciona uma auto opção.

Nota importante: Para garantir que o seletor de qualidade de vídeo está sempre ativado, deve substituir o uso do HLS nativo. Para saber como fazer isso, pode clicar aqui