Lo que necesita saber sobre el último video HTML5

Lo que necesita saber sobre el último video HTML5

¿Alguna vez quiso crear su propia aplicación similar a Twitch.tv para transmitir en vivo su trabajo? ¿Qué tal su propio programa al estilo de YouTube para reproducir su video grabado previamente? Es posible que haya utilizado Flash, Java o Silverlight para medios enriquecidos en el pasado, pero con Chrome 42 anunciando que esos complementos ya no son compatiblesahora es un buen momento para pasarse a HTML5 como siempre.

Antes de trabajar en Microsoft, fui ingeniero sénior en el equipo de desarrollo de productos de Comcast, donde trabajé en reproductores de video para varias plataformas, incluida la web, Xbox One, Xbox 360 y SmartGlass. Fue una educación sobresaliente en tecnología de video de vanguardia, y me alegra poder llevar mi experiencia conmigo en este puesto 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 videos 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 video en vivo o bajo demanda.

Primero, una introducción a los formatos de video

Hay una serie de formatos para elegir, así que repasemos algunos de los que puede usar hoy. En primer lugar, debemos entender cómo funciona el vapor adaptativo, considerando que muchas de estas tecnologías que se avecinan dependen de esto.

<iframe width="560" height="315" 
		src="https://www.youtube.com/embed/AeJzoqtuf-o" 
		frameborder="0" allowfullscreen>
</iframe>

La transmisión adaptativa segmenta el video en pequeños fragmentos. La parte ‘adaptativa’ de esto es el hecho de que el video está codificado a múltiples velocidades de bits y resoluciones, lo que crea fragmentos de varios tamaños. A partir de ahí, el jugador puede elegir entre diferentes velocidades de bits/resoluciones y adaptarse automáticamente a fragmentos más grandes o más pequeños a medida que cambian las condiciones de la red.

scott hanselman lo describe (bueno, Smooth Streaming al menos) bien.

Tienes que verlo para entenderlo, pero en realidad es inteligente en su simplicidad. Algunas personas se asustan cuando toman un archivo de video de, digamos, 200 megas y lo codifican para Smooth Streaming y el directorio resultante es, digamos, de 500 megas. Podrían decir, ¡es más grande! ¡No tengo ese tipo de ancho de banda! De hecho, se envía menos por cable de lo que existe en el disco. La idea es que Smooth Streaming cree “pasos” de bitrates. Codifica y almacena su archivo con múltiples tasas de bits en el disco.

Transmisión fluida DJ Hero

MP4 progresivo

Descripción general de Adobe.com

Esto descarga y almacena en caché el video en la computadora del espectador. Se requiere un breve período de tiempo para almacenar en búfer y almacenar en caché el comienzo del archivo multimedia antes de que comience a reproducirse. Una vez que el video se ha almacenado en caché, la visualización posterior no requiere 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). Entonces, su reproductor de video crea una conexión HTTP directa con los servidores de CDN (Azure) para recuperar el contenido. La desventaja 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 el archivo completo, independientemente de cuánto mire el usuario. ¿Qué sucede cuando el espectador se va después de un minuto? Ancho de banda desperdiciado. 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

visión general de streamingmedia.com

HTTP Live Streaming (HLS) es propiedad de Apple y su funcionamiento se basa en la idea de la transmisión adaptativa y, por lo general, se realiza en fragmentos de 10 segundos. Además, también funciona para contenido de video a pedido. Admite video en vivo y bajo demanda.

<iframe width="560" height="315" 
			src="https://www.youtube.com/embed/wVsntdILdxU" 
			frameborder="0" allowfullscreen>
</iframe>

Transmisión fluida

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 Internet Information Services (IIS), una plataforma integrada de entrega de medios basada en HTTP. Smooth Streaming tiene todas las características típicas de transmisión adaptativa. Esto se entrega a través de HTTP, segmentado en pequeños fragmentos y, por lo general, se codifican múltiples velocidades de bits para que el reproductor pueda observar las condiciones de su red para elegir la mejor velocidad de bits de video para brindar una experiencia de visualización óptima.

<iframe width="560" height="315" 
			src="https://www.youtube.com/embed/orKUmNoO0z8" 
			frameborder="0" allowfullscreen>
</iframe>

Los bajos costos de infraestructura basada en web, la compatibilidad con firewall y el cambio de tasa de bits son solo algunas de las ventajas de la transmisión adaptable.

Guión MPEG

Resumen 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 estar controlado por Microsoft (Smooth Streaming) o Apple (HLS). Varias empresas participaron en los esfuerzos de creación y estandarización de MPEG DASH, incluidas Microsoft, Apple, Netflix, Qualcomm, Ericsson, Samsung y muchas más. Vemos MPEG-DASH como el eventual reemplazo de todas las funciones que hemos introducido e implementado en los últimos años con Smooth Streaming. Con el tiempo, obtendremos la compatibilidad con DASH para tener paridad de funciones con Smooth e introducir algunas funciones aún más geniales que solo están disponibles para nosotros en un estándar de la industria como DASH.

Soporte de vídeo HTML5

La etiqueta de video (

Tabla de soporte de video HTML5

Así de fácil es agregarlo a su página:

De hecho, es probable que uses esto todos los días. Netflix solía confiar en Silverlight como su reproductor de video, pero ahora se ejecuta en video HTML5. Anteriormente, YouTube se ejecutaba en Flash, pero ahora gran parte de su contenido se está convirtiendo a HTML5. ¿Conoces esos reproductores de video que ves en Xbox One (YouTube, Xbox Video, Netflix, etc.)? Sí, todos esos son HTML5 también. Incluso se ha vuelto mucho más fácil probar video HTML5 en todos los navegadores, especialmente en varias versiones de Internet Explorer y el nuevo borde de microsoft. Para hacer esto, puedes obtener máquinas virtuales gratis o pruebe de forma remota en su dispositivo Mac, iOS, Android o Windows.

vídeo de netflix

Una nota sobre los jugadores

Hay muchos para elegir. En este tutorial, uso Reproductor de servicios multimedia de Azure ya que es bueno para empezar, para tener una idea de cómo funciona la transmisión de medios. Incluye una serie de videos de muestra, un menú desplegable simple donde puede seleccionar los distintos formatos y ver la tecnología y el nivel de protección detrás de cada uno de ellos. Brinda soporte para una variedad de formatos listos para usar, que incluyen:

  • Transmisión fluida
  • Guión MPEG
  • HLS
  • MP4 progresivo

Reproductor de servicios multimedia de Azure

Lo mejor de todo es que ni siquiera necesita crear su propio reproductor o página para probar el contenido de su video. Simplemente cambie la URL de su contenido y listo. También puede buscar en el código abierto video.js estructura. Es similar al reproductor de Microsoft (abajo), pero también ofrece una serie de opciones para facilitar el estilo. tienen un excelente diseñador de piel, también. Sin embargo, si está menos familiarizado con CSS avanzado, me alejaría de esto.

Construyendo su propio reproductor de video

Hay varios marcos de reproducción que podemos usar, pero para simplificar, usemos el reproductor HTML5 proporcionado por Microsoft. Puede encontrar la documentación al respecto aquí. También hay un muestra de trabajo, aquí.

Estas son algunas de las ventajas de usarlo:

El marco del reproductor HTML5 ofrece una experiencia de video consistente para el navegador. Esto se logra detectando la compatibilidad con diferentes tecnologías de reproducción de video disponibles en el cliente (p. ej., etiqueta de video HTML5, Silverlight, etc.) y luego brindando la misma API de JavaScript y el mismo conjunto de controles, independientemente de la tecnología que se utilice. Iterará a través de una lista de tecnologías de reproducción de video alternativas hasta que se encuentre una tecnología compatible.

Incluiré más información sobre esto en mi próxima publicación.

¿Que sigue? Incrustación del navegador. Envoltura de aplicaciones.

En mi próxima publicación, Cubriremos el proceso para crear su propio reproductor de video dentro del navegador. Aún mejor, podemos «envolver» 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 Media Services, que podemos reproducir en nuestro reproductor de video recién creado. Si desea comenzar de inmediato, puede inscribirse en un prueba gratuita de Azure y Comunidad de Visual Studio (ahora también un IDE gratuito) o comuníquese conmigo para obtener información sobre cómo obtener un cuenta BizSpark con crédito mensual gratuito de Azure.

Más información sobre los servicios multimedia de Azure

Aquí hay algunos recursos excelentes para aprender más en profundidad sobre los medios, Azure y cómo configurarlo rápidamente:

O la serie de aprendizaje más amplia de nuestro equipo sobre HTML, CSS y JS:

Este artículo es parte de la serie de tecnología de desarrollo web de Microsoft. Estamos emocionados de compartir Borde de Microsoft y el nuevo Motor de renderizado EdgeHTML contigo. Obtenga máquinas virtuales gratuitas o realice pruebas de forma remota en su dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/

(dpe)

#necesita #saber #sobre #último #video #HTML5

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.