Optimización de la Transmisión de Video HTML5

Si es nuevo en el mundo de la transmisión adaptativa, se preguntará: ¿qué es todo este alboroto por la transmisión de video en HTML5?

En general, la transmisión de video en HTML5 permite manipular el contenido multimedia mediante las etiquetas HTML <audio> y <video>. El uso de la etiqueta <video> crea un reproductor de video nativo de HTML5 y permite opciones adicionales para personalizar y mostrar el contenido de video.

Esto puede parecer un poco técnico y confuso, pero por suerte, la transmisión de video en vivo es ahora más accesible que nunca para los profesionales que no son del todo expertos en tecnología.

Con el apoyo de la plataforma de video adecuada, las emisoras pueden cargar con éxito videos seguros y ofrecer contenidos de alta calidad a través de algo de JavaScript, CSS, código sencillo y un sólido conocimiento de la etiqueta <video> de HTML5.

En este artículo, cubriremos la transmisión de video en HTML5 y sus principales aplicaciones. A continuación, revisaremos brevemente los reproductores de video HTML5 y cubriremos tres formas de incrustar el contenido de video en un sitio web. Estos métodos incluyen la incrustación directa a través de una etiqueta de video HTML5, el desarrollo de su propio reproductor y el uso de un reproductor existente.

Para empezar, veamos algunos antecedentes sobre los orígenes de la transmisión de video en HTML5.

Tenga en cuenta que este post ha sido actualizado para reflejar la información más precisa a partir de 2021.

Tabla de Contenido

• ¿Qué es la Transmisión de Video HTML5 y Cómo Funciona?
• ¿Qué es un Reproductor de Video HTML5?
• Ventajas de la Transmisión de Video en HTML5
• Protocolo HLS para la Transmisión de Video en HTML5
• Cómo Incrustar un Reproductor para la Transmisión en HTML5
• Cómo Optimizar un Flujo de Video HTML5
• Etiquetas HTML5 Adicionales para Mejorar la Transmisión
• Conclusión

¿Qué es la Transmisión de Video y Cómo Funciona?

Desde la década de los 90, es posible acceder a contenidos multimedia de video desde nuestros navegadores de Internet.

Para refrescar la memoria, transmitir un video es reproducirlo en línea. Este proceso es único en el sentido de que los espectadores pueden empezar a ver el video antes de que se descargue completamente, y el resto del archivo se descarga en tiempo real.

Este proceso ofrece al espectador un flujo constante de contenidos, sin hacerle esperar a que se descargue todo el archivo localmente antes de verlo.

A lo largo de los años, la tecnología de software que hay detrás de este proceso ha evolucionado para mejorar la experiencia de los usuarios. Esto ha ayudado a mejorar la calidad del video, a reducir el buffering y a mejorar la funcionalidad general del reproductor de video.

Dicho esto, hay tres métodos para la transmisión de video en línea. Vamos a verlos.

1. Utilización de un Formato Propio

El primer método para la transmisión de video es el uso de un formato de propietario transmitido desde un sitio web particular que es exclusivo de ese sitio.

Este método se refiere a archivos como .mov, .rm o .wmv. Cuando los broadcasters presentaron por primera vez videos a través de Internet, la mayoría de los navegadores no tenían reproductores de video integrados. En la mayoría de los casos, los sitios web podían elegir el formato de video con el que trabajar.

A partir de ahí, se limitaban a proporcionar el reproductor y el video en la propia página web. Sin embargo, algunos formatos requerían un reproductor dedicado (como Apple QuickTime para los formatos .mov). Incluso los videos que funcionaban sin un reproductor dedicado no eran fáciles de compartir en aquellos primeros tiempos de la transmisión.

Este método está bastante obsoleto, pero es importante mencionarlo ya que forma parte de la historia de la transmisión en vivo.

2. Uso de un Reproductor Intermedio 

Otro método de transmisión en línea es el uso de un reproductor intermedio. YouTube es un ejemplo perfecto.

YouTube se lanzó por primera vez en 2005, y durante la década siguiente, la empresa ha contribuido a que el video en streaming se convierta en algo habitual. Quince años después, YouTube sigue siendo muy popular.

Cuando los usuarios suben un video a YouTube, los espectadores acceden al contenido a través del reproductor incrustado de YouTube. Asimismo, los espectadores pueden compartir el contenido del video a través de un código que proporciona YouTube.

Sin embargo, los navegadores modernos incluyen ahora sus propios reproductores de video integrados. Esto significa que no siempre es necesario que un sitio web proporcione el reproductor.

Aunque YouTube es gratuito, la plataforma plantea retos importantes para los broadcasters y empresas serias. Por citar solo algunos, estos inconvenientes incluyen la marca de terceros con su video, la pérdida de propiedad de su contenido y la falta de funciones de monetización.

Estas limitaciones plantean la necesidad de una solución alternativa para los organismos de radiodifusión que quieran transmitir en vivo en su propio sitio.

3. Uso de la Transmisión de Video HTML5

El método más moderno es la transmisión de video en HTML5. Es el método más innovador y permite transmitir en casi cualquier tipo de dispositivo.

Con la transmisión de video en HTML5, el sitio web que aloja el contenido utiliza HTTP nativo para transmitir directamente los medios a los espectadores. 

Las etiquetas de contenido (por ejemplo, la etiqueta <video>) forman parte del código HTML. Por lo tanto, el uso de la etiqueta <video> crea un reproductor de video HTML5 nativo dentro del navegador. Estas etiquetas proporcionan una dirección al protocolo HTTP sobre qué hacer con este contenido. HTTP muestra el texto y un reproductor de audio reproduce el contenido de audio.

Además, las etiquetas HTML tienen varios atributos, o parámetros, que proporcionan más detalles sobre cómo presentar el contenido. Por ejemplo, con la etiqueta <img> se puede especificar el tamaño de la imagen.

Más recientemente, HTML5 ha ampliado las capacidades multimedia del HTML básico. Por ejemplo, las mejoras en la etiqueta <img> y la nueva etiqueta <video> proporcionan a los creadores de contenidos más flexibilidad y facilidad para presentar contenidos multimedia.

Esta flexibilidad permite a los broadcasters ofrecer medios de comunicación sin preocuparse por el navegador que utiliza un determinado visitante.

¿Qué es un Reproductor de Video HTML5?

Hasta hace relativamente poco, el principal método de entrega de video a través de Internet era la tecnología de video Flash de Adobe.  Sin embargo, en los últimos años, este protocolo ha sido sustituido en gran medida por protocolos de entrega de video como el streaming HLS y la reproducción en reproductores de video HTML5.

Hoy en día, Flash se considera un protocolo de transmisión obsoleto. De hecho, Chrome eliminó por completo la compatibilidad con Flash a finales de 2020, y otros grandes navegadores están siguiendo su ejemplo.

Como se ha descrito anteriormente, la transmisión de video en HTML5 ofrece soluciones más modernas para transmitir videos directamente desde un sitio web. Antes de HTML5, los sitios dependían de reproductores flash incrustados para mostrar los videos a los usuarios.

Con el elemento de video HTML5, el proceso de transmisión se ha agilizado y mejorado tanto para los espectadores como para los broadcasters. Además, los videos HTML5 pueden transmitirse en todo tipo de dispositivos. En cambio, muchos dispositivos móviles de transmisión no pueden manejar los videos en flash.

En general, la transmisión de video en HTML5 ofrece una forma más sencilla de utilizar el video en las páginas web. Antes de su publicación como lenguaje de marcado en 2014, los videos solo podían reproducirse en un navegador con complementos como Flash. Al utilizar HTML5, los desarrolladores ya no se preocupan de qué navegador o qué extensión utilizan sus visitantes.

Además, HTML5 simplifica la entrega de video al proporcionar soporte para varios atributos, elementos y etiquetas para ayudar a la estructura de su página web. Estas características de soporte incluyen etiquetas de artículo, sección y multimedia que admiten la adición de formatos de video y audio a su contenido.

Ventajas de la Transmisión de Video en HTML5

La transmisión a través de un reproductor de video HTML5 es la opción preferida por muchas razones, y tiene una serie de ventajas de difusión. Para empezar, es muy accesible. La mayoría de las plataformas modernas de video en línea están equipadas con reproductores de video HTML5. Es tan común que es prácticamente la opción por defecto.

La razón por la que HTML5 está tan extendido es que es altamente compatible. Esto ya es una ventaja importante. Los métodos de transmisión anteriores eran incompatibles con la transmisión en un dispositivo móvil. Dado que el uso de smartphones y tabletas se ha generalizado, la compatibilidad con todos los dispositivos es una necesidad.

Otra ventaja de la transmisión de video en HTML5 es que es altamente personalizable. Esto da a los broadcasters un mayor control sobre el resultado final.

Protocolo HLS para la Transmisión de Video en HTML5

En los últimos años, HLS se ha convertido en un protocolo común para la transmisión de video a través de reproductores HTML5.

Estos avances tecnológicos han sido ventajosos tanto para los broadcasters como para los espectadores. En particular, los broadcasters pueden modificar tanto HTML5 como HLS según sus especificaciones. Además, estos protocolos son más seguros, confiables y rápidos que las tecnologías anteriores.

Si no conoce el término, HLS es un acrónimo de HTTP Live Streaming. HLS es un protocolo de transmisión de medios que se utiliza para entregar medios visuales y de audio a los espectadores en línea.

Lanzado por primera vez por Apple en 2009, el streaming HLS es ahora a menudo preferido por los broadcasters por su amplia compatibilidad con múltiples navegadores y dispositivos.

Otros protocolos más antiguos son RTMP, HDS, MSS y MPEG-Dash. Puede leer más sobre HLS en general, y sobre la transmisión HLS con un reproductor de video HTML5, en nuestro post sobre protocolos de transmisión HLS.

Cómo Incrustar un Reproductor para la Transmisión en HTML5

Ahora que entiende la historia y el propósito de los reproductores de video HTML5, vamos a sumergirnos en algunos enfoques de la transmisión HTML5.

Para empezar, hablemos de las tres formas principales de incrustar videos en su sitio web:

• Utilice la etiqueta <video> de HTML5 directamente en su navegador
• Cree su propio reproductor
• Elija un reproductor HTML5 ya preparado

1. Inserte un Video con HTML5

Al configurar la transmisión de video HTML5 en su sitio web, debe declarar lo siguiente:

• Una etiqueta <video>
• La URL del video
• Cualquier requisito de estilo que desee personalizar (para un reproductor de video más atractivo que el estándar)

*Nota: Es importante tener en cuenta que la etiqueta <video> es un simple trozo de código que puede añadir a sus páginas web.

La etiqueta estándar <video> proporciona la siguiente funcionalidad:

• Especifica la anchura y la altura del reproductor
• Muestra u oculta los controles de video, incluyendo la reproducción/pausa, el volumen, la conmutación de pantalla completa y el deslizador de búsqueda
• Establece una imagen de póster para que se muestre mientras el video se está descargando o no se está reproduciendo
• Proporciona un conjunto de videos en diferentes formatos, para que cada navegador pueda reproducir un formato que soporte
• Incluye subtítulos caption o closed-caption en varios idiomas
• Indica al navegador si debe empezar a descargar el video cuando se cargue la página o sólo cuando el usuario pulse “Play”
• Controla la configuración de la reproducción automática
• Decide si el contenido se reproduce una vez o en bucle
• Indica si quiere reproducir el video sin sonido (silenciado). Por ejemplo, los videos automatizados en Facebook muestran la opción de silenciamiento superpuesta al video

Nota: Nos gustaría señalar que, aunque la etiqueta <video> de HTML5 se considera el elemento reproductor de video soportado más ampliamente, no todas las versiones de todos los navegadores lo soportan.

Si los usuarios visitan su sitio con versiones anteriores a los siguientes navegadores, no podrán ver los videos que se muestren con HTML5:

• Cromo: Versión 4.0
• MicrosoftExplorer (predecesor de Edge): Versión 9.0
• Mozilla Firefox: Versión 3.5
• Safari: Versión 4.0
• Opera: Versión 10.5

También es importante tener en cuenta que la transmisión de video en HTML5 requiere conocimientos técnicos y recursos dedicados. Por lo tanto, es mejor optar por un reproductor HTML5 ya existente si se carece de los conocimientos necesarios para manipular el código HTML5, pero hablaremos de esta opción más adelante en este post.

2. Desarrolle su Propio Reproductor HTML5

Otra opción para incrustar contenido de video en su sitio web es a través de su propio reproductor de video HTML5. La construcción de un reproductor de video HTML5 personalizado requiere una combinación de codificación HTML y CSS. También requiere conocimientos de la Media API de HTML5.

Sin especificar ningún código que estilice el reproductor de video HTML5, la apariencia del reproductor es bastante básica. También depende del navegador desde el que se reproduce el video.

Proporcionar una interfaz coherente para la transmisión de video HTML5 en su sitio web también es útil para la marca y la presentación visual.

Una vez más, es importante tener en cuenta que la transmisión de video en HTML5 es una opción bastante técnica, más adecuada para personas con conocimientos de codificación. De lo contrario, un reproductor HTML5 existente construido por un equipo dedicado a través de una API de transmisión en vivo, por ejemplo, es una mejor opción si usted carece de los conocimientos técnicos.

3. Utilice un Reproductor HTML5 Existente

Si es la primera vez que transmite, le recomendamos encarecidamente que utilice un reproductor HTML5 existente.

Como hemos mencionado anteriormente, ya existen muchos reproductores HTML5 que pueden ser fácilmente personalizados por los broadcasters para representar mejor su marca. Esto permite a los usuarios que no tienen los conocimientos técnicos para la transmisión de video en HTML5 seguir transmitiendo el video elegido.

Estos son algunos de los reproductores de video viables disponibles en la actualidad:

• videoJS es un reproductor HTML5 de código abierto que utiliza Javascript y CSS. Más de 400.000 sitios web en toda la red utilizan este reproductor en particular.
• Algunos reproductores HTML5 utilizan videoJS como base y añaden más funcionalidad al reproductor básico. Un ejemplo es el reproductor de video para todos los dispositivos Dacast, que ofrece funcionalidad para transmitir video en vivo y una piel de reproductor personalizable.
• JW Player es un reproductor de video HTML5 de pago que admite la transmisión de video en 4K y la tasa de bits adaptativa.
• Otras soluciones son Flow Player, jPlayer y Mediaelement.js.

El video nativo de HTML5 no es compatible con la transmisión de aplicaciones RTMP ni con los protocolos HDS. Sin embargo, JW sí soporta estos dos protocolos. Así que, como se ha mencionado anteriormente, si piensa utilizar un reproductor de video exclusivamente HTML5, HLS es probablemente el mejor protocolo para usted.

También nos gustaría señalar que algunos reproductores de video HTML5 existentes, incluido el de Dacast, están construidos para la transmisión de baja latencia. Cualquier video que se transmita con un reproductor de video Dacast utiliza automáticamente la transmisión de baja latencia.

Cómo Optimizar una Etiqueta de Flujo de Video HTML5

Hay algunas formas de sacar el máximo partido a la etiqueta <video> de HTML5.

Lo primero a lo que hay que prestar atención es al formato. El uso de formatos estándar permite a los usuarios reproducir fácilmente los videos. MP4 (MPEG-4) es el formato más utilizado. Sin embargo, los formatos Ogg y WebM son cada vez más conocidos.

WebM es ahora compatible con las versiones recientes de Chrome, Firefox, Opera, Safari en OS/X y Microsoft Internet Explorer 9 y superiores (requiere componentes WebM MF). Con este desarrollo, la multiplicidad de formatos se traduce en una mayor facilidad de visualización.

Un importante truco de optimización en la distribución de video es reducir el tiempo de retraso o latencia. Hoy en día, el video es la forma más popular de consumo de contenidos. Los usuarios pasan apenas unos segundos esperando a que los videos empiecen a reproducirse.

Los broadcasters también querrán optimizar sus ajustes de control. A continuación, un rápido desglose de algunos ajustes comunes a los que hay que prestar atención:

• Tamaño físico: Establezca el tamaño físico máximo para proporcionar control sobre las subidas y reducir el tiempo de retraso. Utilizar un tamaño de fotograma de 1280×720, por ejemplo, suele ser suficiente para la mayoría de los videos.
• Longitud: Recorte los videos para capturar los fotogramas más atractivos.
• Calidad y Tasa de Bits: Ajuste estos parámetros para reducir el tamaño del archivo sin que ello afecte significativamente a la calidad de video percibida.
• video-Codec: Por lo general, puede utilizar la configuración predeterminada para normalizar y optimizar el video para la web. Sin embargo, en algunos casos, se desea configurar manualmente el códec para reducir aún más el tamaño del archivo.
• Compresión: Comprima siempre los archivos de video antes de utilizarlos en su sitio web.

Etiquetas HTML5 Adicionales para Mejorar la Transmisión

La etiqueta <video> no es la única herramienta de su caja de herramientas de HTML5 para optimizar los videos. Por ejemplo, listar las etiquetas <source> junto con sus correspondientes etiquetas <type> en un orden optimizado puede mejorar el rendimiento de su video.

This is demonstrated in this sample HTML5 code for live video streaming:

Esto se demuestra en este ejemplo de código HTML5 para la transmisión de video en directo:

<video width=”480” controls>

    <source scr=”https://myweb.org/webm/video1.webm” type=”video/webm”>

    <source scr=”https://myweb.org/mp4/video1.mg4” type=”video/mp4”>

    <source scr=”https://myweb.org/ogg/video1.ogv” type=”video/ogv”>

    <track kind=”captions” src=”sampleCaption_he.vtt” scrlang=”he”>

</video>

Tenga en cuenta que un navegador reproducirá el primer tipo de formato soportado. En otras palabras, la primera entrada de la lista es la predeterminada. Chrome y Firefox reproducirán el video WebM, mientras que los predecesores de Microsoft Edge saltarán al video MP4.

Se recomienda listar primero el video más compatible y más pequeño para garantizar que el archivo se reproduzca por defecto.

El uso de algunas etiquetas adicionales le ayudará a personalizar su reproductor de video. Aquí tiene algunas opciones:

• La etiqueta <width> controla el ancho del video que se reproduce.
• La etiqueta <controls> es un atributo Booleano que permite a los usuarios acceder a los controles de reproducción.
• La etiqueta <track> crea una transcripción para aumentar la accesibilidad del contenido.
• La etiqueta <embed> crea un contenedor para medios externos.

Por último, si quiere que el video se inicie automáticamente, utilice el elemento de video <autoplay>.

Conclusión

En resumen, la transmisión de video en HTML5 mejora las páginas web y atrae a los visitantes mejor que el texto solo. Para retener a los espectadores, los broadcasters deben optimizar la transmisión en directo por HTTP para garantizar una entrega de video rápida, fluida y compatible con los espectadores. El uso adecuado de las etiquetas multimedia HTML5 garantiza la accesibilidad del contenido y hace que los visitantes regresen.

En este artículo, hemos definido la transmisión de video HTML5 y los reproductores de video. También hemos hablado de las diferentes formas de transmitir video en vivo en su sitio web a través de la incrustación. Además, hemos destacado algunas ventajas y desventajas comunes de cada método.

¿Todavía no ha transmitido con Dacast y está listo para probar nuestra plataforma de transmisión en vivo? Ofrecemos una serie de funciones nuevas y avanzadas, como el alojamiento de videos en China y opciones de monetización, a precios asequibles.

Regístrese en nuestra prueba gratuita de 14 días para empezar a transmitir hoy mismo. Le ayudaremos a empezar a transmitir en cuestión de minutos. No se requiere tarjeta de crédito.

Empiece de Manera Gratuita

Después de leerlo, ¿cuál es su opinión sobre la incrustación de video con HTML5? ¿Todavía tiene preguntas que le gustaría que contestáramos, aquí o en futuros artículos? Háganoslo saber a través de la sección de chat.

Para obtener ofertas exclusivas y consejos periódicos sobre la transmisión en vivo, también puede unirse a nuestro grupo de LinkedIn.