VideoJS met automatische kwaliteitsselectie van ABR-stream

VideoJS is een gratis open-source HTML5-videospeler die moderne videostreamingformaten ondersteunt op zowel desktop- als mobiele apparaten. De populariteit ervan heeft gezorgd voor voortdurende updates via een bloeiende community. Dit zijn enkele van de vele redenen die VideoJS een geweldige keuze maken voor uw website.

Hoewel het basisplatform de vakjes aanvinkt voor alle basisprincipes, zoals ondersteuning voor een breed scala aan formaten en streamingkwaliteiten (MP4, WEBM, HLS, DASH), zijn er enkele functies die alleen beschikbaar zijn via door de community geleverde plug-ins zoals Kwaliteitsselectie. Gelukkig is dit eigenlijk vrij eenvoudig dankzij de silvermine / videojs-quality-selector plugin.

Wat is VideoJS Quality Selector?

Een plug-in voor videojsversies 6+ die een knop aan de bedieningsbalk toevoegt waarmee de gebruiker kan kiezen uit beschikbare videokwaliteiten of resoluties die worden geleverd door een adaptive bit-rate videostream.

De speler toevoegen aan uw website

Als u het MediaCP-videopaneel al gebruikt, gebruikt de meegeleverde iFrame-speler VideoJS met de kwaliteitsselectie al. U hoeft alleen maar de insluitcode te kopiëren en op uw website te plakken.

Voor degenen die de MediaCP niet gebruiken, hoeft u alleen maar de onderstaande stappen te volgen en ervoor te zorgen dat u de met uw werkelijke HLS url. Weet u niet zeker wat de HLS url is? Dan moet je het aan je provider vragen.

Stap 1 – Neem het onderstaande op in het <hoofdgedeelte> van uw website

Stap 2 – Voeg de onderstaande HTML toe waar u uw video wilt afspelen

Zorg ervoor dat u https://yourdomain.com/live/playlist.m3u8 vervangt door uw eigen streaming-URL.

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

    <source src="https://yourdomain.com/live/playlist.m3u8" type="application/x-mpegURL">
    <p class="vjs-no-js">
  Als u deze video wilt bekijken, schakelt u JavaScript in en overweegt u een upgrade naar een webbrowser die
        <a href="https://videojs.com/html5-video-support/" target="_blank">ondersteunt HTML5 video</a>
    </p>
</video>

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

Het resultaat

Het resultaat is een automatische detectie van kwaliteiten via de meegeleverde HLS/m3u8 playlist.