Videos HTML5 10 cosas que los diseñadores necesitan saber

La revolución de HTML5 es emocionante diseñadores web de todas las áreas del mundo. Las nuevas especificaciones admiten docenas de elementos y atributos para crear sitios web semánticos. Estas nuevas características incluyen etiquetas multimedia para formatos de audio y video..

En los últimos años, un reproductor multimedia basado en Flash es más que suficiente para la transmisión en línea y esta tecnología aún es necesaria para admitir navegadores antiguos. Pero, afortunadamente, los estándares modernos han avanzado y la inclusión de video HTML5 abre las puertas a docenas de nuevas oportunidades.

En esta guía me gustaría ofrecer una introducción al video HTML5 para la Web. Se necesitará algo de práctica para comprender el reproductor nativo en el navegador y todas sus funciones. Y la mejor manera de familiarizarse es sumergirse en la cabeza primero.!

1. Tipos de medios

Cuando trabajas con un reproductor de video flash es muy común asociar todos los formatos de video en .flv. Si bien esto funciona, la mayoría de los archivos FLV no pueden conservar la calidad en ningún lugar cerca de los formatos / códecs más avanzados. Existen 3 tipos de videos importantes que son compatibles con HTML5: MP4, WebM y Ogg / Ogv. El tipo de archivo MPEG-4 generalmente está codificado en H.264, lo que permite la reproducción en reproductores Flash de terceros. ¡Esto significa que no necesita mantener una copia de video .flv para admitir un método alternativo! WebM y Ogg son dos tipos de archivos mucho más nuevos relacionados con el video HTML5. Ogg utiliza la codificación Theora, que se basa en el formato de archivo de audio estándar de código abierto. Estos se pueden guardar con una extensión .ogg o .ogv.

WebM es un proyecto publicado por Google sobre el que puede leer más en el sitio web de WebM Project. El formato ya es compatible con Opera, Google Chrome, Firefox 4+ y, más recientemente, con Internet Explorer 9. Todavía es desconocido para la mayoría de los profesionales de la web, pero WebM es el formato de medios de video líder en el futuro del video web..

2. Soporte del navegador

Entonces, ¿cuál de estos tipos de archivos necesita para su sitio web? Bien, idealmente, los 3 serían geniales, ya que brindan todo el espectro de soporte. Sin embargo, esto no es realista, y de hecho, puedes cubrir todas las bases con solo dos de ellas. Aquí hay un desglose de lo que funciona para cada navegador:

• Mozilla Firefox - WebM, Ogg
• Google Chrome - WebM, Ogg
• Opera - WebM, Ogg
• Safari - MP4
• Internet Explorer 9 - MP4
• Internet Explorer 6-8: no HTML5, solo Flash!

Si recuerda, anteriormente mencioné que la mayoría de los reproductores de video flash admitirán archivos MP4 siempre y cuando estén codificados en H.264. Como tal, cada uno de estos navegadores incorporará MP4 + Flash como un recurso final. Esto significa que solo necesitas crear dos Diferentes formatos de video para todos los navegadores. MP4 para Safari / IE9 y una opción entre WebM u Ogg para el resto.

En mi opinión, recomiendo encarecidamente seguir con el formato WebM. Tiene algunos nombres importantes detrás del proyecto (a saber, Google) y ha ganado mucha tracción en la comunidad HTML5. Ogg / Ogv será compatible, pero lo más probable es que pierda popularidad debido a los tamaños de archivo más pequeños de WebM. Puede leer un artículo relacionado sobre el futuro del video en la web escrito por Sean Golliher.

3. Incrustar videos HTML5 simples

Ahora echemos un vistazo a la sintaxis requerida para incrustar un código de ejemplo. Todo lo que necesitamos es la etiqueta de video HTML5 para hacer referencia a la URL de cada película..

Observe la controles y auto-reproducción Los atributos no necesitan ser establecidos con ningún valor. También incluí un póster atributo que precarga una imagen sobre el reproductor de video antes de la transmisión. Esta es una vista previa común con muchos jugadores web.

Ofrecemos formatos MP4 y WebM internos al elemento de video. Si no se puede cargar ninguno de estos, se muestra un error para que el usuario actualice su navegador..

4. Ofreciendo un Flash Fallback

El ejemplo anterior es perfecto para todos los navegadores web compatibles con los estándares. Sin embargo, también debemos tener en cuenta que el mundo no siempre está a la vanguardia de la tecnología. Necesitamos apoyar a los usuarios en versiones anteriores de Safari, Mozilla Firefox y especialmente Internet Explorer.

La mejor manera de lograrlo es a través de un reproductor de Flash. Estos se pueden agregar usando el empotrar o objeto etiquetas para hacer referencia a un archivo .swf de terceros. JW Player y Flowplayer son dos soluciones gratuitas de código abierto que puede considerar. Pero también revise los reproductores de video premium en ActiveDen, que pueden ser tan económicos como $ 15- $ 20.

Ahora vamos a ajustar el código anterior para incluir un reproductor Flash de respaldo para que sea compatible con casi todos los navegadores existentes.

5. Soporte para dispositivos móviles

Este tema aún es muy debatido ya que la industria móvil es muy joven. Apple salió con soporte para MP4 en dispositivos Mac y iOS. Esto significa que puede transmitir de forma nativa archivos de video .mp4 en su iPad, iPhone o iPod Touch en la IU de video estándar. Esto cubre gran parte de la cuota de mercado..

Recientemente, los dispositivos Android tenían dificultades para alcanzar este mismo nivel de soporte. Sin embargo, Google finalmente ha adoptado la transmisión web .mp4 que ahora capitaliza a casi todos los usuarios móviles. Y como Flash no es una opción, MP4 es la mejor solución disponible. Esta es la razón por la que desea incrustar primero el código .mp4 para que los dispositivos iOS puedan reconocer el archivo inmediatamente.

6. Agente de usuario de Safari

Un error que debe mencionarse es uno existente entre los reproductores Flash y la transmisión HTML5 .mp4 nativa en Safari. Dado que el navegador puede admitir ambos archivos, es posible que tenga problemas para obtener la transmisión de video HTML5 en lugar de Flash. Sin embargo, gracias a esta excelente publicación de blog en TUAW es fácil cambiar su agente de usuario de navegación.

Esto obligará a su página web a reconocer que el navegador se ejecuta en otro dispositivo. Lo más probable es que elijas el iPad, que NO admite ninguna reproducción de Flash. Este es el único problema importante que puede encontrar al probar los métodos de reproducción nativos y flash de MP4.

7. Administrar los controles del jugador

Lo creas o no, también hay métodos que puedes usar para manipular los controles del reproductor de video HTML5. Todo se puede hacer en JavaScript extrayendo de un conjunto de métodos abiertos. Hay demasiados para enumerarlos aquí, pero intente hojear los documentos del elemento de medios del W3C para obtener más detalles..

Para darle una idea general, el blog de desarrollo de Opera ha publicado algunos tutoriales cortos que son excelentes para los novatos. Incluso si nunca has elegido JavaScript o jQuery antes, aún es fácil comenzar a trabajar con este. Puede llamar a atributos específicos de los medios de video tales como apagado o tiempo actual. Luego, podría realizar acciones (atenuar el fondo, mostrar anuncios) según estos criterios mediante la manipulación del DOM en jQuery.

El mismo desarrollador en el artículo de Opera proporciona una demostración de trabajo de su reproductor de video con guión. La oportunidad de personalizar sus propios controles de interfaz de usuario es excepcional. Solo sirve para mostrar cuán poderoso se está convirtiendo el video HTML5..

8. Conversión de formato de video

Este es otro gran problema que probablemente confundirá a las personas menos expertas en tecnología. ¿Solo desea que su sitio web se ponga en marcha y ahora tiene que lidiar con la conversión de videos? Bueno, en realidad no es tan difícil..

Para lidiar con MP4, que es su mayor prioridad, puede usar HandBrake, que es una solución gratuita de código abierto que se ejecuta en los 3 principales sistemas operativos. Soportará H.264 junto con algunos otros códecs, lo que hace que esta sea la mejor opción para los usuarios de freebie. Si tiene dinero para pagar, debo recomendar el convertidor Xilisoft que se encuentra en la Mac App Store por solo una licencia de por vida de $ 40..

Parece que la ruta WebM hace la vida mucho más fácil. Miro Video Converter es una herramienta gratuita para Windows y OS X que produce archivos WebM de gran calidad. También puede hacer codificación Ogg Theora, que también tiene una calidad bastante buena..

9. Construyendo un reproductor web

Los formatos de video con especificaciones HTML5 aún son nuevos para los desarrolladores. Hay protocolos abiertos a la espera de ser jugados para permitir controles personalizados, controles deslizantes, iconos de reproducción / pausa, etc. Si te sientes audaz, consulta este tutorial sobre cómo hacer tu propio reproductor HTML5 (publicado en Splashnology).

El código es un poco intenso para los recién llegados, ya que requiere una orientación CSS avanzada y un poco de jQuery formal. Hay otros marcos que puedes construir en los que ya ofrecen un diseño de reproductor personalizado. De manera similar, esta presentación de diapositivas es una excelente introducción a la creación de un reproductor de video HTML5.

Construyendo un reproductor de video HTML5

10. VideoJS Library

VideoJS es probablemente mi solución favorita para reproductores de video HTML5. Todo lo que necesita es su hoja de estilos CSS y JavaScript auto-alojada incluida en algún lugar de su documento. Luego escribes el código de video HTML5 estándar con algunas clases adicionales para el skinning. Agregué su código de muestra a continuación:

Si ejecuta un blog de WordPress, también puede probar su complemento WP personalizado. Incluirá automáticamente la biblioteca js / css en las páginas donde se muestra el video HTML5. Y puede hacer esto desde cualquier editor de páginas o publicación usando códigos cortos (vea aquí).

Conclusión

Espero que esta guía introductoria pueda despertar su interés en el futuro del video web. Con más usuarios que se dirigen a dispositivos móviles, es importante que se adopten los estándares HTML5 para este tipo de medios. La Web debería ser más sencilla para que los desarrolladores puedan producir soluciones totalmente compatibles con mayor rapidez. Nos encantaría escuchar sus ideas y sugerencias para el futuro del video HTML5. Si desea compartir, no dude en dejar un comentario en el área de discusión posterior a continuación..