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.
