VideoJS con selezione automatica della qualità dal flusso ABR

VideoJS è un lettore video HTML5 open source gratuito che supporta moderni formati di streaming video su dispositivi desktop e mobili. La sua popolarità ha assicurato aggiornamenti continui attraverso una fiorente comunità. Questi sono alcuni dei tanti motivi che rendono VideoJS un’ottima scelta per il tuo sito web.

Mentre la piattaforma di base controlla le caselle per tutte le basi come il supporto per un’ampia varietà di formati e qualità di streaming (MP4, WEBM, HLS, DASH), ci sono alcune funzionalità che sono disponibili solo attraverso plugin forniti dalla comunità come Quality Selection. Per fortuna questo è in realtà piuttosto semplice grazie al plugin silvermine / videojs-quality-selector .

Cos’è VideoJS Quality Selector?

Un plugin per videojs versioni 6+ che aggiunge un pulsante alla barra di controllo che permetterà all’utente di scegliere tra le qualità video disponibili o le risoluzioni fornite da un flusso video Adaptive Bit-rate.

Aggiunta del player al sito Web

Se stai già utilizzando il pannello video MediaCP , iFrame Player incluso utilizza già VideoJS con la selezione Qualità. Devi solo copiare il codice di incorporamento e incollarlo sul tuo sito web.

Per coloro che non utilizzano MediaCP, è sufficiente seguire i passaggi seguenti, assicurandosi di sostituire il con il tuo URL HLS effettivo. Non sei sicuro di cosa sia l’url HLS? Quindi dovresti chiedere al tuo fornitore.

Passo 1 – Includi quanto segue nella <sezione principale> del tuo sito web

Passo 2 – Includi il codice HTML sottostante dove vuoi che il tuo video venga riprodotto

Assicurati di sostituire https://yourdomain.com/live/playlist.m3u8 con il tuo URL di streaming.

<video id="videojs" class="video-js vjs-fluid vjs-default-skin vjs-big-play-centered" controls 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">
  To view this video please enable JavaScript, and consider upgrading to a web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">supporta video HTML5</a>
    </p>
</video>

<script type="text/javascript">
var player = videojs('videojs');
player.hlsQualitySelector();
</copione>

Il risultato

Il risultato è un rilevamento automatico delle qualità attraverso la playlist HLS/m3u8 fornita.