Video streaming adaptativo con el reproductor VideoJS
Configurar video streaming adaptativo con el reproductor VideoJS en simples pasos.
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.
