VideoJS es un reproductor de video HTML5 de código abierto gratuito que admite formatos modernos de transmisión de video en dispositivos de escritorio y móviles. Su popularidad ha asegurado actualizaciones continuas a través de una comunidad próspera.
Si bien la plataforma base marca las casillas para todos los aspectos básicos, como la compatibilidad con una amplia variedad de formatos y calidades de transmisión (MP4, WEBM, HLS, DASH), hay algunas funciones que solo están disponibles a través de complementos proporcionados por la comunidad, como Selección de calidad de Video. Afortunadamente, esto es bastante simple gracias al complemento silvermine/videojs-quality-selector .
¿Qué es el streaming adaptativo?
El streaming de video adaptivo, en palabras simples lo que hace es detectar la velocidad de internet del televidente y elegir entre las calidades disponibles, la que mejor desempeño tenga para evitar cortes y tener una señal de video fluida.
¿Qué es el selector de calidad de VideoJS?
Un complemento para videojs versiones 6+ que agrega un botón a la barra de control que permitirá al usuario elegir entre las calidades de video disponibles o las resoluciones proporcionadas por una transmisión de video de tasa de bits adaptable.
Agregar el reproductor a tu sitio web
Si ya está utilizando nuestro servicio de video streaming , entonces el iframe incluido en el panel de control ya utiliza VideoJS con la selección de calidad. Solo necesita copiar el código de inserción y pegarlo en su sitio web.
Para aquellos que no usan utilizan nuestro servicio, solo deben seguir los pasos a continuación, asegurándose de reemplazar <source src=”https://streamingurl.com/live/playlist.m3u8″> con su URL HLS real.
¿No estás seguro de cuál es la URL de HLS? Entonces deberías preguntarle a tu proveedor de video streaming.
Paso 1: incluya lo siguiente en la sección <head> de su sitio web
<link href=”https://unpkg.com/video.js@7/dist/video-js.min.css” rel=”stylesheet”>
<link href=”https://unpkg.com/silvermine-videojs-quality-selector@1.1.2/dist/css/quality-selector.css” rel=”stylesheet”>
<script src=”https://unpkg.com/video.js@7/dist/video.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-quality-levels/2.0.9/videojs-contrib-quality-levels.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/videojs-hls-quality-selector@1.1.1/dist/videojs-hls-quality-selector.min.js”></script>
Paso 2: incluya el siguiente HTML donde desea que se reproduzca su video
Asegúrese de reemplazar https://streamingurl.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-centered” controls preload=”auto” autoplay muted fluid=”true” liveui=”true”>
<source src=”https://streamingurl.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”>supports HTML5 video</a>
</p>
</video>
<script type=”text/javascript”>
var player = videojs(‘videojs’);
player.hlsQualitySelector();
</script>
El resultado
El resultado es una detección automática de calidades a través de la lista de reproducción HLS/m3u8 provista.
*Importante: para que funcione debe tener la función de “transcoder” o “transcodificador” habilitada en su servidor de video streaming.
