Cómo incrustar un reproductor de video HTML5 en su sitio web mediante HLS y DASH Adaptive Streaming

Flash Player de Adobe se ha utilizado durante mucho tiempo como el reproductor de video principal para Internet. Reinó durante mucho tiempo, pero está siendo reemplazado por protocolos que son más rápidos, eficientes y facilitan la gestión de archivos. Google Chrome también ha comenzado a bloquear Flash y pronto dejará de ser compatible con Adobe Flash por completo. Puede que sea necesario algún tiempo para reemplazar completamente este protocolo heredado, pero ciertamente trae consigo sus beneficios. Algunos de los navegadores más nuevos tienen soporte nativo para HLS (HTTP Live Streaming).



HTML5 y HLS son protocolos de código abierto, lo que significa que cualquier persona puede modificar su código y utilizarlo en su sitio web, de forma totalmente gratuita. La codificación de un video en varios estándares diferentes de calidad de reproducción, los subtítulos adjuntos y la optimización de la calidad del video de acuerdo con el ancho de banda se hacen sin problemas con la transmisión de video HLS. Debido a HTML nativo etiqueta, la transmisión HTML5 viene en el código, lo que facilita la transmisión a través de HLS y DASH. DASH y HLS dividen una transmisión de video en pequeños segmentos que se pueden usar para un reproductor de video HTML5. Reducen el tiempo que tiene que almacenar en búfer un video antes de que comience a reproducirse y los problemas de tartamudeo que pueda encontrar al ver una transmisión. Los beneficios no solo se limitan al espectador, sino que también se extienden al proveedor de contenido.

Inserte un reproductor de video HTML5 en su sitio web con JWPlayer

Antes de comenzar, sugerimos obtener el JWPlayer de aquí . Con el aumento de HLS y DASH que se utilizan para fines de transmisión adaptativa, han surgido muchos reproductores de video que ciertamente brindan a los usuarios una parte justa de los beneficios. Uno de esos jugadores que ha resistido los desafíos una y otra vez y ha sido utilizado por ESPN y Sony Pictures es JWPlayer. Cargar contenido, incrustar el reproductor de video en HTML5, iOS, Android y Fire OS se simplifica con el código nativo de JWPlayer, que usted puede adaptar para una mejor experiencia de usuario. Pero hoy nos enfocamos en los reproductores de video HTML5 y cómo puede usar HLS y DASH para una mejor transmisión adaptativa.



¿Qué ofrece JW Player?

Además de proporcionarle una plataforma para cargar sus videos y convertirlos en una lista de reproducción, JWPlayer también le permite ver estadísticas en tiempo real de sus videos cargados al brindarle informes de sus programas de anuncios e informes personalizados.



Informes personalizados



JWPlayer facilita la administración de contenido para su sitio web con CMS al permitirle administrar fácilmente subtítulos, miniaturas, metadatos, etc. Por lo tanto, el uso y los beneficios de JWPlayer se extienden más allá de ser un reproductor de video para incrustar sus videos HTML5.

Subiendo videos en JWPlayer

Subir videos

Antes de comenzar a incorporar JWPlayer en su sitio web HTML5, es importante que primero cargue los videos respectivos en la plataforma JWPlayer. Afortunadamente, esa no es una tarea muy compleja, ya que todo lo que necesita hacer es seleccionar el archivo que desea cargar.



Una vez que se carga el video, puede comenzar a editar la sección de metadatos de dicho video, ver los análisis y monitorear el tráfico, etc. u obtener fuentes para HLS y cargar subtítulos desde la pestaña de activos.

Personalización del reproductor de video HLS y DASH

Antes de incrustar un reproductor de video, primero debe agregar una biblioteca de reproductores a su sitio. Hay tres formas de lograr esta hazaña. Autohospedado, alojado en la nube y alojado en la nube con llamadas API. La diferencia entre el alojamiento en la nube y el alojamiento en la nube con llamadas a la API se basa simplemente en las llamadas a la API. Se recomienda a los desarrolladores que quieran administrar la implementación de su reproductor de video a través de llamadas a la API que lo utilicen. En el caso de los anfitriones propios, usted controla completamente la versión del reproductor. Es importante tener en cuenta que la licencia del reproductor no se rota automáticamente y debe hacerse manualmente cuando se utiliza el autohospedaje.

Personalización del reproductor alojado en la nube

Como puede ver aquí, el reproductor alojado en la nube se puede personalizar y pulir a su gusto. Por ejemplo, el reproductor puede tener un tamaño de respuesta o fijo. La reproducción se puede configurar en bucle, silenciar al inicio, etc. Además, también puede cambiar el color predeterminado del reproductor, las recomendaciones de los videos y mucho más.

Una vez que tenga todo esto abajo, debe cargar el código de la biblioteca de reproductores alojados en la nube en el etiqueta para permitir que JWPlayer se cargue en su sitio web.

Insertar el reproductor de video

De forma predeterminada, JWPlayer prefiere automáticamente los motores multimedia HTML5 para que no tenga que preocuparse por establecer una preferencia principal. Sin embargo, algunos casos pueden requerir que cambie eso. Cuando eso suceda, puede personalizar el reproductor y configurarlo a su manera.

Una vez que haya subido la biblioteca de reproductores alojada en la nube en la etiqueta de su página web, el siguiente paso es cargar el código incrustado. Primero, crea un etiqueta en el   donde debe aparecer el JWPlayer. Llama a preparar() con la propiedad de lista de reproducción para llamar al jugador en el objetivo

A continuación se muestra un ejemplo de una muestra preparar() código proporcionado por los propios desarrolladores de JWPlayer:

jwplayer ('myElement'). setup ({'playlist': 'https://example.com/myVideo.mp4