VideoJS con selección automática de calidad desde ABR stream

VideoJS es un reproductor de video HTML5 gratuito de código abierto que admite formatos modernos de transmisión de video tanto en dispositivos de escritorio como móviles. Su popularidad ha asegurado actualizaciones continuas a través de una comunidad próspera. Estas son algunas de las muchas razones que hacen de VideoJS una gran opción para su sitio web.

Si bien la plataforma base marca las casillas para todos los conceptos básicos, como el soporte para una amplia variedad de formatos y calidades de transmisión (MP4, WEBM, HLS, DASH), hay algunas características que solo están disponibles a través de complementos proporcionados por la comunidad, como Quality Selection. Afortunadamente, esto es bastante simple gracias al complemento silvermine / videojs-quality-selector .

¿Qué es el selector de calidad VideoJS?

Un plugin para videojs versiones 6+ que añade un botón a la barra de control que permitirá al usuario elegir entre las calidades de vídeo disponibles o las resoluciones proporcionadas por un flujo de vídeo de velocidad de bits adaptativa.

Agregar el reproductor a su sitio web

Si ya está utilizando el panel de vídeo MediaCP , el reproductor iFrame incluido ya utiliza VideoJS con la selección Calidad. Solo necesita copiar el código de inserción y pegarlo en su sitio web.

Para aquellos que no usan MediaCP, solo necesita seguir los pasos a continuación, asegurándose de reemplazar el con su URL HLS real. ¿No está seguro de cuál es la URL HLS? Entonces debe preguntarle a su proveedor.

Paso 1 – Incluya lo siguiente en la <> sección principal de su sitio web

Paso 2 – Incluye el siguiente HTML donde quieres que se reproduzca tu video

Asegúrese de reemplazar https://yourdomain.com/live/playlist.m3u8 con su propia URL de transmisión.

<video id="videojs" class="video-js vjs-fluid vjs-default-skin vjs-big-play-cented" 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">
  Para ver este video, habilite JavaScript y considere actualizar a un navegador web que
        <a href="https://videojs.com/html5-video-support/" target="_blank">soporta vídeo< HTML5/a>
    </p>
</vídeo>

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

El resultado

El resultado es una detección automática de calidades a través de la lista de reproducción HLS/m3u8 proporcionada.