VideoJS com Seleção Automática de Qualidade do Stream ABR

VideoJS é um reprodutor de vídeo HTML5 de código aberto gratuito que suporta formatos modernos de streaming de vídeo em computadores e dispositivos móveis. Sua popularidade garantiu atualizações contínuas através de uma comunidade próspera. Estas são algumas das muitas razões que fazem do VideoJS uma ótima opção para o seu site.

Enquanto a plataforma base verifica as caixas para todos os conceitos básicos, como suporte para uma ampla variedade de formatos e qualidades de streaming (MP4, WEBM, HLS, DASH), existem alguns recursos que só estão disponíveis através de plugins fornecidos pela comunidade, como a Seleção de Qualidade. Felizmente, isso é realmente muito simples graças ao plugin silvermine / videojs-quality-selector .

O que é o VideoJS Quality Selector?

Um plugin para videojs versões 6+ que adiciona um botão à barra de controle que permitirá ao usuário escolher entre as qualidades de vídeo disponíveis ou resoluções fornecidas por um fluxo de vídeo de taxa de bits adaptável.

Adicionar o leitor ao seu Web site

Se já estiver a utilizar o Painel de Vídeo MediaCP , o iFrame Player incluído já utiliza o VideoJS com a seleção de Qualidade. Você só precisa copiar o código de incorporação e colá-lo em seu site.

Para quem não utiliza o MediaCP, basta seguir os passos abaixo, garantindo a substituição do com sua URL HLS real. Não tem certeza do que é a url do HLS? Então você deve perguntar ao seu provedor.

Passo 1 – Inclua o abaixo na <seção principal> do seu site

Passo 2 – Inclua o HTML abaixo onde você deseja que seu vídeo seja reproduzido

Certifique-se de substituir https://yourdomain.com/live/playlist.m3u8 pelo seu próprio URL de streaming.

<video id="videojs" class="video-js vjs-fluid vjs-default-skin vjs-big-play-centered" controles preload="auto" autoplay muted fluid="true" liveui="true">

    <source src="https://yourdomain.com/live/playlist.m3u8" type="application/x-mpegURL">
    <p class="vjs-no-js">
  Para ver este vídeo, ative o JavaScript e considere a atualização para um navegador da Web que
        <a href="https://videojs.com/html5-video-support/" target="_blank">suporta vídeo< HTML5/a>
    </p>
</vídeo>

<tipo de script = "texto/javascript">
var player = videojs('videojs');
player.hlsQualitySelector();
</roteiro>

O resultado

O resultado é uma detecção automática de qualidades através da lista de reprodução HLS/m3u8 fornecida.