This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.
Spanish (Español) translation by Juan Pablo Diaz Cuartas (you can also view the original English article)
¿Alguna vez has querido crear tu propia aplicación Twitch.tv para transmitir tu trabajo en vivo? ¿Qué hay de tu propio programa de YouTube para reproducir tu video previamente grabado? Es posible que haya utilizado Flash, Java o Silverlight para medios sofisticados en el pasado, pero con Chrome 42 anunciando que esos complementos ya no son compatibles, ahora es el mejor momento para ir a HTML5 como siempre.
Antes de trabajar en Microsoft, fui Ingeniero Senior en el equipo de Desarrollo de Producto de Comcast, donde trabajé en reproductores de video para varias plataformas, incluidas la web, Xbox One, Xbox 360 y SmartGlass. Fue una educación sobresaliente en tecnología de video de vanguardia, y estoy contento de poder llevar mi experiencia conmigo en este rol y enseñar a otros mucho de lo que aprendí allí.
Este es el primero de una serie de artículos sobre el uso de Azure Media Services para crear y consumir video HTML5. En este tutorial, explicaré cómo usar esta solución de medios en la nube para configurar y comenzar a experimentar con la entrega de videos en vivo o bajo demanda.
1. Una guía sobre formatos de video
Hay varios formatos para elegir, así que veamos algunos de los que puedes usar hoy. En primer lugar, debemos comprender cómo funciona el tratamiento de vapor adaptativo, teniendo en cuenta que muchas de estas tecnologías que están por venir dependen de esto.
La transmisión adaptable segmenta el video en trozos pequeños. La parte 'adaptativa' de esto es el hecho de que el video está codificado en múltiples velocidades de bits y resoluciones, creando fragmentos de varios tamaños. A partir de ahí, el jugador puede elegir entre diferentes velocidades de bits / resoluciones y adaptarse a trozos más grandes o más pequeños automáticamente a medida que cambien las condiciones de la red.
Scott Hanselman lo describe (bueno, Smooth Streaming al menos) también.
"Tienes que verlo para conseguirlo, pero en realidad es inteligente en su simplicidad. Algunas personas se asustan cuando toman un archivo de video de 200 megas y lo codifican para Smooth Streaming y el directorio resultante es, digamos, 500 megas. ¡Podrían decir que es más grande! ¡No tengo ese ancho de banda! De hecho, se envía menos por el cable que existe en el disco. La idea es que Smooth Streaming cree "pasos" de bitrates. Codifica y almacena su archivo múltiples velocidades de bits en el disco.
MP4 progresivo
Descripción general de Adobe.com
Esto descarga y almacena en caché el video en la computadora del espectador. Se requiere un corto período de tiempo para almacenar y almacenar en caché el comienzo del archivo multimedia antes de que comience a reproducirse. Una vez que el video ha sido almacenado en la memoria caché, la visualización posterior no requiere ningún almacenamiento en búfer. Usando el protocolo HTTP estándar, los archivos descargados progresivamente generalmente se entregan a través de una red de entrega de contenido (CDN). Por lo tanto, su reproductor de video crea una conexión HTTP directa con los servidores de CDN (Azure) para recuperar el contenido.
La caída de usar algo como esto es el ancho de banda desperdiciado. El reproductor comenzará la reproducción de video tan pronto como tenga suficientes datos para hacerlo, pero continuará descargándose hasta que haya recibido todo el archivo, independientemente de cuánto vea el usuario. ¿Qué sucede cuando el espectador se va después de un minuto? Ancho de banda desaprovechado
Además, esto no permite que la calidad del video cambie a mitad de la descarga, a diferencia de los formatos que se enumeran a continuación.
HLS
Descripción de Streamingmedia.com
HTTP Live Streaming (HLS) es propiedad de Apple y su trabajo se basa en la idea de la transmisión adaptativa, generalmente en fragmentos de diez segundos. Además, es compatible con video en vivo y bajo demanda.
Smooth Streaming
Descripción general de RBGnetworks.com
Esto se anunció en octubre de 2008 como parte de Silverlight, y es una característica de los Servicios de Medios de Servicios de Información de Internet (IIS), una plataforma integrada de entrega de medios basada en HTTP.
Smooth Streaming tiene todas las características típicas de la transmisión adaptativa. Esto se entrega a través de HTTP, segmentado en pequeños fragmentos, y generalmente se codifican múltiples velocidades de bits para que el jugador pueda ver las condiciones de su red y elegir la mejor velocidad de bits de video para ofrecer una experiencia de visualización óptima.
Los bajos costos de infraestructura basados en la web, la compatibilidad con firewall y la conmutación de velocidad de bits son solo algunas de las ventajas de la transmisión adaptable.
MPEG Dash
Descripción de Streamingmedia.com
El gran diferenciador con DASH es que es un estándar internacional que ahora está controlado por un organismo de estándares: el Motion Picture Experts Group (MPEG), en lugar de ser controlado por Microsoft (Smooth Streaming) o Apple (HLS). Varias empresas participaron en los esfuerzos de creación y estandarización de MPEG DASH, incluidos Microsoft, Apple, Netflix, Qualcomm, Ericsson, Samsung y muchos más.
Vemos MPEG-DASH como el reemplazo eventual de todas las características que hemos introducido e implementado en los últimos años con Smooth Streaming. Con el tiempo obtendremos soporte de DASH para tener la paridad de características con Smooth e introduciremos algunas características incluso más frescas que solo están disponibles para nosotros en un estándar de la industria como DASH.
2. Soporte de video HTML5
La etiqueta de video (<video>) ha estado en HTML5 desde hace varios años y todos los navegadores modernos lo admiten. La página de escuelas del W3C ilustra su uso en términos claros.
Aquí le mostramos lo fácil que es agregarlo a su página:
1 |
<video width="320" height="240" controls> |
2 |
|
3 |
<source src="movie.mp4" type="video/mp4"> |
4 |
|
5 |
Fallback content: Your browser does not support the video tag. |
6 |
|
7 |
</video>
|
De hecho, es probable que lo uses todos los días. Netflix solía confiar en Silverlight como su reproductor de video, pero ahora se ejecuta en video HTML5. YouTube se ejecutó previamente en Flash, pero ahora gran parte de su contenido se está convirtiendo a HTML5. ¿Conoces los reproductores de video que ves en Xbox One (YouTube, Xbox Video, Netflix, etc.)? Sí, todos son HTML5 también.
Incluso es mucho más fácil probar video HTML5 entre navegadores, especialmente varias versiones de Internet Explorer y el nuevo Microsoft Edge. Para hacerlo, puede obtener máquinas virtuales gratuitas o realizar pruebas de forma remota en su Mac, iOS, Android o dispositivo Windows.
3. Una nota sobre los jugadores
Hay muchos para elegir. En este tutorial, utilizo el Reproductor de servicios de medios de Azure ya que es una buena idea para comenzar, para tener una idea de cómo funciona la transmisión multimedia. Incluye una cantidad de videos de muestra y un menú desplegable simple donde puede seleccionar los distintos formatos y ver el nivel tecnológico y de protección detrás de cada uno de ellos.
Proporciona soporte para una variedad de formatos listos para usar, que incluyen:
- Smooth Streaming
- MPEG Dash
- HLS
- MP4 progresivo
Lo mejor de todo es que ni siquiera necesita crear su propio reproductor o página para probar el contenido de su video. Simple, cambie la URL a su contenido y listo.
También puede ver el marco de código abierto Video.js. Es similar al reproductor de Microsoft (a continuación), pero también ofrece una gran cantidad de opciones para que sea fácil de estilo. Tienen un excelente diseñador de piel, también. Sin embargo, si estás menos familiarizado con el CSS avanzado, evitaría esto.
4. Construyendo su propio reproductor de video
Hay varios frameworks de jugadores que podemos usar, pero por simplicidad, usemos el reproductor HTML5 provisto por Microsoft. Puede encontrar la documentación aquí. También hay una muestra de trabajo.
Estas son algunas de las ventajas de usarlo:
"HTML5 Framework ofrece una experiencia de video consistente para el navegador. Esto se logra detectando la compatibilidad con las diferentes tecnologías de reproducción de video disponibles en el cliente (por ejemplo, etiqueta de video HTML5, Silverlight, etc.) y luego proporcionando la misma API de JavaScript y el mismo conjunto de controles independientemente de la tecnología que se use. Se repetirá a través de una lista de tecnologías de reproducción de video de respaldo hasta que se encuentre una tecnología compatible.
Incluiré más información sobre esto en mi próxima publicación.
5. ¿Qué sigue? Navegador de inserción y aplicación de ajuste
En mi próximo post, cubriremos el proceso para crear su propio reproductor de video dentro del navegador. Aún mejor, podemos "ajustar" ese sitio y reproductor HTML5 y crear aplicaciones híbridas para dispositivos móviles y Windows con una herramienta como Cordova.
A continuación, configuraremos una cuenta de Azure y crearemos nuestro primer contenido de Servicios de medios, que podremos reproducir en nuestro reproductor de video recién creado. Si desea comenzar de inmediato, puede registrarse para obtener una versión de prueba gratuita de Azure y Visual Studio Community (ahora también un IDE gratuito) o comunicarse conmigo para obtener información sobre cómo obtener una cuenta de BizSpark con crédito Azure mensual gratuito. .
Obtenga más información acerca de Azure Media Services
Aquí hay algunos recursos geniales para aprender más a fondo sobre los medios, Azure, y cómo prepararse rápidamente:
- Azure Media Services 101 - Azure Viernes (Canal 9)
- Primeros pasos con Azure Media Services (video)
- Empaquetado dinámico con Azure Media Services
O la serie de aprendizaje más amplia de nuestro equipo sobre HTML, CSS y JS:
- Consejos de rendimiento práctico para hacer que su HTML / JavaScript sea más rápido (una serie de siete partes desde diseños receptivos hasta juegos casuales para la optimización del rendimiento)
- La plataforma web moderna Jump Start (los fundamentos de HTML, CSS y JS)
- Desarrollo de aplicaciones de Windows universales con HTML y JavaScript Jump Start (use el JS que ya creó para crear una aplicación)
Este artículo es parte de la serie web dev tech de Microsoft. Nos complace compartir con usted Microsoft Edge y el nuevo motor de renderizado EdgeHTML. Obtenga máquinas virtuales gratuitas o realice pruebas de forma remota en su Mac, iOS, Android o dispositivo Windows @ http://dev.modern.ie/.
