Cómo alojar e incrustar una transmisión en directo HLS en su sitio web

A medida que evolucionan las normas del sector para la reproducción de vídeo, también lo hace la tecnología de transmisión en directo. Las nuevas funciones, como la transmisión HLS, mejoran aún más la experiencia de los espectadores, ofreciéndoles una calidad de imagen uniforme y sin interrupciones, independientemente de dónde se encuentren en relación con el lugar de emisión.

Con la muerte de los reproductores Flash y el auge del vídeo HTML5 hemos asistido al desarrollo de nuevos protocolos de streaming incluyendo HTTP Live Streaming (HLS). Esta mejora ha mejorado la experiencia de visionado en línea de millones de personas que ven vídeos con frecuencia.

En este post, vamos a discutir todo lo que necesitas saber sobre la incrustación de secuencias HLS. Empezaremos empezaremos revisando los fundamentos del reproductor de vídeo incrustado tecnología antes de sumergirse en el protocolo de streaming HLS y la tecnología relacionada. Entonces, discutiremos cómo incrustar un flujo HLS.

Para terminar, vamos a la conexión entre HLS y M3U8 y proporcionar información adicional sobre cómo los dos trabajan juntos.

Índice

• Incrustación de reproductores de vídeo: Lo que hay que saber
• ¿Qué es un reproductor de vídeo HTML5?
• ¿Qué es HLS?
• Streaming HLS e Ingesta RTMP: La configuración óptima de streaming
• Cómo incrustar un flujo HLS
• Cómo incrustar varios reproductores de vídeo en una página
• Alojamiento de vídeo gratuito frente a alojamiento de vídeo de pago
• La conexión entre HLS y M3U8
• Alternativa HLS: MPEG-DASH
• Comience a alojar transmisiones en directo HLS en su sitio web

Incrustación de reproductores de vídeo: Lo que hay que saber

Un reproductor de vídeo es un programa informático de distribución multimedia orientado al usuario programa que permite a los espectadores acceder a contenidos de vídeo digital. A incrustar un reproductor de vídeo es añadir el software a a página de usuario, ya sea sea en una aplicación, sitio web o correo electrónico. La incrustación requiere alterar el código del correo electrónico o de la página web para incorporar el código del reproductor de vídeo.

En pocas palabrascuando ve un vídeo en su ordenador en Youtube, el icono rectangular La sección de la pantalla donde se ven los contenidos es el reproductor de vídeo. En navegador más grande espacio alrededor del reproductor de vídeo es la página web en la que se ha incrustado el reproductor.

Aprender a incrustar un reproductor de vídeo en una página web puede parecer complejo si careces de conocimientos técnicos. Pero un vídeo–plataforma de alojamiento de vídeo puede hacerlo fácil y rápido.

Un vídeo de terceros–sistema de alojamiento de vídeo de terceros almacenará los archivos de vídeo, entregará el contenido y le ayudará a personalizar el reproductor para que pueda incrustarlo en su sitio web sitio web y empezar a emitir hoy mismo.

¿Por qué incrustar un reproductor de vídeo?

Muchas emisoras profesionales optan por incrustar un reproductor de vídeo en su propio sitio en lugar de enviar a los espectadores a un sitio como YouTube. Hay muchas razones, entre ellas un mejor control de la marca y la estética.

Con una solución de streaming de marca blanca puede cambiar el logotipo de un tercero por el suyo propio. También puedes eliminar otros elementos de distracción, como los “Vídeos sugeridos” de otros creadores y emisoras. Esto le permite elevar sus propios vídeos y darles un aspecto más profesional.

Cuando aprenda a incrustar su reproductor de vídeo, podrá adaptar sus páginas y reproductores de vídeo para reflejar su marca y conseguir las conversiones deseadas. Esto puede incluir añadir logotipos u otros elementos de diseño que reflejen su marca. Algo tan sencillo como la combinación de colores o la elección del tipo de letra puede contribuir en gran medida a la imagen de marca.

Las soluciones de incrustación de vídeo de terceros también suelen incluir sus propias herramientas de marca, marketing y análisis. Esto puede ser muy limitante, y a veces incluso contraproducente, para sus objetivos de marketing.

Los reproductores integrados de marca blanca o sin marca le ofrecen la mayor libertad para recopilar e interpretar sus datos de marketing de la forma que más le beneficie a usted y a su negocio.

¿Qué es un reproductor de vídeo HTML5?

La página reproductor de vídeo HTML5 es el reproductor de vídeo más popular para la transmisión de vídeo en línea. Es conocido por su amplia compatibilidad. Los reproductores de vídeo HTML5 son los más opción más extendida en la transmisión en línea.

Como ya hemos dicho, el reproductor Flash ha muerto. Aunque sirvió a un propósito importante durante mucho tiempo, este reproductor de vídeo no era compatible con la transmisión móvil. El rápido crecimiento de la popularidad de los iPhones y otros teléfonos inteligentes creó la necesidad de un reproductor de vídeo que fuera compatible con estos dispositivos. En reproductor de vídeo HTML5 se creó para satisfacer esa demanda.

Los reproductores de vídeo HTML5 son muy atractivos para los organismos de radiodifusión porque su compatibilidad universal les permite llegar a la mayor audiencia posible. No preocupación por dejar fuera a los espectadores que utilizan dispositivos específicos y quieran acceder a contenidos de vídeo HTML5.

La página reproductor de vídeo HTML5 es fácil de personalizar e incrustar en sitios web y aplicaciones. Esto hace que sea valioso para las empresas que quieren marcar su contenido de vídeo.

Aunque HTML5 ha ganado popularidad en la última década, se convirtió oficialmente en el único reproductor de vídeo ampliamente compatible cuando Chrome y otros navegadores web eliminaron definitivamente el reproductor Flash.

Los reproductores de vídeo HTML5 son compatibles con los principales navegadores, como Internet Explorer, Firefox, Safari y Chrome. También funcionan en dispositivos móviles, como iPhones, iPads, teléfonos Android y tabletas.

Asimismo, el reproductor de vídeo HTML5 es compatible con los principales sistemas operativos, incluidos Windows, Mac y Linux. También es compatible con los principales formatos de vídeo, como MP4, WebM y Ogg.

¿Qué es HLS?

El protocolo HTTP Live Streaming (HLS) fue desarrollado por Apple en 2009 para ofrecer contenidos de vídeo a reproductores de vídeo HTML5. Este protocolo sustituyó a RTMP for delivery, el estándar para streaming al reproductor Flash.

Uno de los principales problemas de utilizar Flash en un dispositivo móvil es que dispositivos móviles tienden a moverse. Flash se diseñó para funcionar con una conexión estable a Internet. Los dispositivos móviles requieren mucha más flexibilidad que un PC con conexión por cable a Internet.

HLS es un protocolo de streaming con bitrate adaptativo. Esto significa que permite transmisión de vídeo con capacidad de respuesta y puede ajustar automáticamente la calidad de un vídeo en función de la velocidad de Internet del espectador. Esto cambia las reglas del juego porque mejora la experiencia del usuario, ya que el streaming HLS adaptativo está diseñado para reducir el buffering y el lag.

HLS puede utilizarse tanto para la ingesta como para la entrega. Sin embargo no hay muchos codificadores HLS en el mercadopor lo que HLS ingesta no es todavía ampliamente adoptada.

Streaming HLS e Ingesta RTMP: La configuración óptima de streaming

Aunque Flash es cosa del pasado, el Protocolo de Mensajería en Tiempo Real (RTMP) sigue vivo y coleando. Desempeña un papel muy importante en el proceso de streaming HLS. La ingesta RTMP se utiliza ahora comúnmente como protocolo de ingestión de vídeo por defecto, lo que significa es responsable de transportar los vídeos al alojamiento de vídeo o a la red de distribución de contenidos (CDN).

La combinación de streaming HLS y entrega RTMP es actualmente la configuración de streaming más óptima configuración de streaming. El protocolo HLS permite a los organismos de radiodifusión acceder al ampliamente adaptable codificador HTML5 mientras que RTMP proporciona acceso a un streaming codificadores asequibles y mucho más. Este dúo es también el más segura más segura.

Aunque la alojamiento RTMP es actualmente el método preferido, no no se sabe por cuánto tiempo. Los protocolos de transmisión de vídeo en directo evolucionan constantemente y a un ritmo acelerado.

Cómo incrustar un flujo HLS

Insertar un flujo HLS en su sitio web no es demasiado difícil. Este proceso es bastante sencillo si se reproductor de vídeo en línea (OVP) y editor de sitios web.

Por el bien de este tutorial, estamos asumiendo que ya ha producido contenido de vídeo y tienen un sitio web construido.

Veamos los 5 pasos que deben seguir las emisoras para incrustar un flujo HLS en sus sitios web.

1. Elija una plataforma de vídeo en línea (OVP)

Para incrustar un flujo HLS, tendrá que invertir en una plataforma de vídeo en línea que admita el software HLS. También debe ofrecer un reproductor de vídeo incrustable.

Las empresas y otras organizaciones profesionales deberían invertir en una solución de pago en lugar de confiar en plataformas gratuitas como YouTube y DailyMotion. Ya hemos hablado de algunas razones, como la posibilidad de añadir tu marca y evitar distraer a los espectadores con contenidos de otros creadores.

Sin entrar en demasiados detalles, algunos aspectos que deben tenerse en cuenta al elegir la plataforma de vídeo en línea incluyen las siguientes:

• Soporte de monetización: A diferencia de Dacast (que admite vídeo bajo demanda por suscripcióno SVOD), vídeo a la carta basado en publicidad (AVOD) y transaccional vídeo a la carta (TVOD), algunas plataformas no admiten la monetización o sólo admiten una o dos opciones. Hay muchas formas de monetizar los contenidos, y las oportunidades son cada vez mayores. No deje que las plataformas restrictivas le priven de ganancias monetarias potencialmente lucrativas por sus contenidos.
• Relaciones con las CDN: Si quieres asegurarte de que tus contenidos llegan siempre con la máxima calidad posible a todas las partes del mundo, ten en cuenta el enorme papel que desempeñan las CDN en la entrega fiable de contenidos. Estas redes pueden almacenar en caché grandes secciones de flujos de contenidos de vídeo en varias ubicaciones de servidores. Esto permite que los contenidos se distribuyan a los usuarios de forma óptima y eficaz siempre que los soliciten.
• Funciones de protección de vídeo: Hoy en día es muy común que los vídeos sean robados y distribuidos sin la debida protección. consentimiento. Busque funciones como DRM, marcas de agua, control de dominios o restricciones geográficas.y la seguridad general de la plataforma.
• Asistencia al cliente: Algunas plataformas ofrecen una asistencia mínima en los planes más baratos, mientras que otras ofrecen una asistencia de primer nivel en todos los planes. Irónicamente, muchas de las mejores marcas sólo ofrecen un servicio de atención al cliente mediocre. Esto suele deberse a que su base de clientes ha superado sus recursos de atención al cliente. O simplemente pueden permitirse (por desgracia) perder algunos clientes insatisfechos aquí y allá.
• Reseñas en línea: Investiga reseñas online en sitios como G2 y Capterra sobre diferentes plataformas. Asegúrate de buscar reseñas fiables de empresas bien establecidas. Hay muchas empresas jóvenes que, por desgracia, recurren a reseñas falsas para impulsar su producto. Desconfíe de las nuevas empresas con críticas aparentemente perfectas pero una reputación poco desarrollada.

Algunas de las plataformas de vídeo en línea más populares son Dacast, Kaltura, Brightcove y Livestream. Consulte nuestra comparación de las mejores plataformas de vídeo en línea para obtener más información sobre algunas de las mejores opciones del mercado.

Una de las principales razones para que una empresa u organización profesional utilice una plataforma de vídeo en línea es que ofrecen soluciones plug-and-play para la mayoría de los retos a los que se enfrentan las emisoras.

2. Sube tu vídeo o conecta las fuentes

Una vez que haya configurado su plataforma de vídeo en línea, es tiempo para subir su contenido de vídeo. Cada plataforma es único en cuanto al funcionamiento del proceso de carga de vídeos a la carta. En Dacast, por ejemplo, puedes subir vídeos individuales o de forma masiva.

Por otro lado, si quieres transmitir en directo, tendrás que crear un canal en directo antes de poder pasar en al paso 3. He aquí cómo puede hacerlo con Dacast:

1. En el menú de la izquierda, busque y haga clic en el botón “Añadir +”.
2. Seleccione “Transmisión en directo” en el menú.
3. Aparecerá una ventana. Cuando lo haga, añade un título y selecciona “Estándar” como tipo de flujo.
4. Haga clic en “Crear”.

Siga los pasos anteriores para crear un canal en vivo para alojar su transmisión en vivo con éxito. Ahora estás listo para el paso 3.

En esta fase, querrás configurar tus fuentes. Esto requerirá probablemente configuración del codificador y conectando fuentes a través de ahí. Si aún no dispone de un codificador, le recomendamos encarecidamente que descargue una versión gratuita de OBS para Dacast. Es fácil de configurar y poner en marcha.

De nuevo, hemos utilizado Dacast como ejemplo en este paso, pero el proceso puede variar de una plataforma a otra.

3. Elija un código de incrustación

Ahora es momento de elegir un código de incrustación. Existen varios tipos de códigos de incrustación que se adaptan a diferentes casos de uso.

Dacast ofrece dos opciones de código incrustado para la retransmisión en directo: JS e iframe. Ambos trabajan para reproducción en su sitio web o aplicación a través de ordenadores de sobremesa y dispositivos móviles, siempre que el archivo de vídeo lo admita.

El código de incrustación JS es el código de incrustación predeterminado de Dacast y es compatible con la mayoría de las funciones. Esto incluye la capacidad de respuesta si los elementos están diseñados en diferentes tamaños y trabajar con la función de restricción de referencias.

El iFrame es el código de incrustación más compatible universalmente. La advertencia es que algunas funciones no trabajen con él.

Este código incrustado no es responsivo, lo que significa que tiene un tamaño fijo. A veces también se elimina la función de pantalla completa. Esto suele ocurrir sólo si estás usando iframes dentro de iframes.

La función de restricción de referencias basada en URL no trabajar con la incrustación iframe. Por eso Dacast opta por utilizar el código JS por defecto.

4. Acceda al código de su sitio web

A continuación, tendrá que localizar el punto en su constructor de sitios web que le da acceso al código del sitio.

Generalmente, hay un modo de edición de bloques que permite arrastrar y soltar elementos, y un modo de editor de texto le da acceso al HTML del sitio. Para este paso, necesitas encontrar el editor HTML.

Para que veas lo fácil que puede ser, te guiaremos a través de este paso utilizando WordPress, uno de los constructores de sitios web más populares.

Esto es lo que el proceso de acceso al código de su sitio web en WordPress en WordPress:

1. Abra la página o la entrada en la que desea añadir el vídeo
2. Aparecerá habrá un signo más en la esquina superior izquierda; haga clic en él
3. Buscar la palabra “Vídeo” en el menú de elementos
4. Arrastra y suelta el elemento de vídeo en la parte de la página o entrada donde quieras que aparezca el vídeo.
5. Haz clic en los tres puntos (…) en la parte superior del elemento de vídeo y haz clic en “Editar como HTML”.

Si por alguna razón, todavía tiene una versión antigua de WordPress, es posible que tenga que cambiar de “Editor Visual” a “HTML Editor”. Es poco probable que este sea el caso.

Si utiliza una plataforma distinta de WordPress, consulte nuestra guía dedicada a la incrustación de un reproductor de vídeo en diferentes constructores de sitios web. Proporciona instrucciones específicas para abrir el editor HTML en Weebly, Wix, Sitios Google, Shopify, Squarespace, GoDaddy, Zyro, y Yola.

5. Inserte el código de incrustación

¿Recuerdas el código que copiaste en el paso 3? Péguelo en el HTML de su sitio web a través del editor de texto.

Así que, continuando con el ejemplo de WordPress que introdujimos en el paso anterior (Paso 4): Después de hacer clic en los puntos de la parte superior del elemento de vídeo y hacer clic en “Editar como HTML”. entonces:

1. Pegue el código de inserción
2. Vista previa
3. Haga clic en “Actualizar”.

Así de fácil.

Es importante destacar que una vez que pegues el fragmento de código incrustado en el código de tu sitio, debe previsualizarlo para asegurarte de que el aspecto que deseas.

Cuando estés satisfecho con la vista previa, haz clic en “Guardar,” “Publicar,” o “Actualizar” para guardar los cambios. Revise los cambios en el sitio activo para asegurarse de que todo ha salido como usted quería. necesita que lo haga.

Consejo: Asegúrese de revisarlo en diferentes dispositivos como móvil, tableta y portátil. A veces puede parecer perfecto en un dispositivo y tosco en otro.

Cómo incrustar varios reproductores de vídeo en una página

La incrustación de varios reproductores de vídeo en una sola página difiere ligeramente de incrustar sólo un flujo HLS.

Este proceso es relativamente fácil, pero requiere cierta codificación. A continuación se muestra un ejemplo de código para incluir varios reproductores en una sola página.

Para utilizar este código, copie y pegue en en HTML o en el editor de código de la página web a la que desea añadir el reproductor de vídeo. A continuación, sustituye los segmentos de código “XXXXX_f_XXXXX” por el ID de tus canales en directo.

El código correcto puede encontrarse consultando el código de compartición de Facebook de los canales en cuestión:

<!DOCTYPE html>
 <!--
 
To change this license header, choose License Headers in Project 
Properties.
To change this template file, choose Tools | Templates and open 
the template in the editor.
 -->
 <html>
 <head>
 <title>Test Player</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, 
initial-scale=1.0">
 <script src="//player.dacast.com/js/player.js"></script>
 </head>
 <body>
 <div id='test1'></div>
 <div id='test2'></div>
 <div id='test3'></div>
 <div id='test4'></div>
 <div id='test5'></div>

<script>
 var myPlayer1 = dacast('XXXXX_f_XXXXX','test1',
{player:'vjs5', width:600,height:400});
 myPlayer1.onReady(function(){
 myPlayer1.play();
 });
 var myPlayer2 = dacast('XXXXX_f_XXXXX','test2',{
player:'vjs5', width:600,height:400});
 myPlayer2.onReady(function(){
 myPlayer2.play();
 });
 var myPlayer3 = dacast('XXXXX_f_XXXXX','test3',
{player:'vjs5', width:600,height:400});
 myPlayer3.onReady(function(){
 myPlayer3.play();
 });
 var myPlayer4 = dacast('XXXXX_f_XXXXX','test4',
{player:'vjs5', width:600,height:400});
 myPlayer4.onReady(function(){
 myPlayer4.play();
 });
 var myPlayer5 = dacast('XXXXX_f_XXXXX','test5',
{player:'vjs5', width:600,height:400});
 myPlayer5.onReady(function(){
 myPlayer5.play();
 });
 </script>
 </body>
 </html>

Alojamiento de vídeo gratuito frente a alojamiento de vídeo de pago

Ya hemos discutido en detalle por qué debe incrustar un vídeo en su sitio web en lugar de utilizar plataformas gratuitas. Pero aún puede utilizar plataformas gratuitas como Youtube para alojar tus vídeos e incrustar esos vídeos en tu sitio web si esa es tu única opción.

Aun así, hay desventajas a tener en cuenta. Para empezar, la marca (como un logotipo de YouTube, por ejemplo) se probablemente permanecerá en los vídeos. Además, los espectadores pueden hacer clic en el vídeo y salir de su sitio web. Una vez que hacen clic en el vídeo, volvemos al principio. Ahora podrían estar en algo como YouTube, donde probablemente les recomienden vídeos de otros creadores.

Otros desventajas son:

• Piratería: La piratería de vídeos es bastante fácil hoy en día en las plataformas libres. Esto ocurre cuando la gente roba y distribuye tu vídeo sin permiso y sin darte crédito.
• Pérdida de beneficios SEO: El tiempo que los usuarios pasan en su sitio web (llamado “tiempo de permanencia”) se dice que es un factor que contribuye al SEO. Eso significa que si alguien hace clic en el vídeo desde su sitio web, podrá puede llevarse a YouTube y obtener los beneficios de SEO (¡no es que lo necesiten!)
• No hay atención al cliente: Ponerse en contacto con el servicio de atención al cliente de YouTube es casi imposible. Tienen sobre todo muchos documentos de autoayuda. Así que si la transmisión en directo falla o deja de funcionar, no tendrás más remedio que solucionar el problema.
• Falta de control: YouTube es comúnmente conocido por detener bruscamente los vídeos si escucha alguna canción popular sonando de fondo. Incluso Si un desconocido pasa con su coche poniendo a todo volumen una canción popular, tu transmisión en directo puede estar en peligro. También hay numerosas historias de canales enteros cerrados por razones arbitrarias.

La conexión entre HLS y M3U8

M3U8 es un formato de archivo que se utilizado en streaming de vídeo. Es la la versión Unicode del M3U formato de archivo informático. La extensión de este tipo de archivo es “.m3u8”.

HLS se basa en el formato de archivo M3U8, por lo que a veces “streaming HLS” se denomina “streaming M3U8.” Así un reproductor HLS es por definición, un reproductor HLS M3U8.

Algunas plataformas de streaming, como Dacast, utilizan enlaces M3U8 para transmitir a aplicaciones de smart TV. Esto es un poco más técnico que la configuración estándar de muchas plataformas de streaming. Pero para los creadores de contenidos que necesiten unas especificaciones HLS / M3U8 un poco más exactas, Dacast dispone de una serie de opciones de personalización.

Alternativa HLS: MPEG-DASH

MPEG-DASH (abreviado DASH) es otra forma de aprovechar el streaming con tasa de bits adaptativa. Puedealternativamente, incrustar un reproductor HTML5 en su sitio web utilizando DASH Adaptive Streaming en lugar de HLS. Sin embargo, creemos que HLS es el camino a seguir porque DASH tiene un inconveniente importante a tener en cuenta.

El mayor inconveniente de DASH en comparación con HLS es compatibilidad de dispositivos. Los dispositivos Apple sólo admiten HLS. En otras palabras, DASH no se reproducirá en dispositivos Apple, como iPhones y MacBooks. Teniendo en cuenta la popularidad de los dispositivos Apple, se trata de una gran consideración.

En el pasado, DASH tenía la ventaja sobre HLS en la entrega de una mejor calidad a tasas de bits más bajas, pero ya no hay tanto de una distinción entre ambos. Asimismo, anteriormente DASH admitía vídeos de mayor resolución en comparación con HLS, pero a partir de 2017 ya no es así.

Por estas razones, HLS es el camino a seguir.

Conclusión

HLS es posiblemente el protocolo de streaming más innovador de la retransmisión en directo. Cubrió una gran necesidad a medida que el reproductor Flash tomaba su salida y HTML5 saltó a la fama, permitiendo al mundo el acceso al vídeo en streaming en dispositivos móviles. Sería difícil imaginar el mundo actual sin él.

La posibilidad de incrustar un flujo HLS en cualquier lugar con unos pocos clics ofrece a las cadenas de televisión más control que nunca sobre la experiencia del espectador. que nunca.

Dacast ofrece soluciones sólidas para configurar un reproductor de vídeo o una transmisión en directo de forma inmediata y sencilla.

Regístrate para una prueba gratuita de 14 días sin necesidad de tarjeta de crédito, y compruebe lo fácil que es aprender a incrustar o crear un flujo HLS hoy mismo.

Si desea más información sobre el software de transmisión de vídeo HLS o sobre la incorporación de una transmisión HLS, no dude en ponerse en contacto con nuestro equipo de asistencia. Estaremos estaremos encantados de responder a cualquier pregunta que pueda tener.

Empiece gratis

Para obtener en directo y ofertas exclusivas, puede unirse a nuestro grupo de LinkedIn.