7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. HTML & CSS

HTML5 Audio y Vídeo: Lo que Debes Saber

Scroll to top
Read Time: 36 mins
This post is part of a series called HTML5 and You.
How to Make All Browsers Render HTML5 Mark-up Correctly - Even IE6
Quick Tip: Learning About HTML5 Local Storage

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

En promoción de lo que consideró será el mejor libro de HTML5 actualmente en el mercado, Remy Sharp y Bruce Lawson acordaron donar un capítulo de la Introducción a HTML para nuestros lectores, en el cual detallan los pros y los contras de trabajar con HTML5 vídeo y audio.

HACE MUCHO TIEMPO, en una galaxia que parecía muy, muy lejana, multimedia en la Web estaba limitada al tintineo de tonos MIDI y GIF animados. Cuando la banda ancha conseguió ser más rápida y la compresión de las tecnologías mejoró, la música MP3 suplanto a MIDI y el vídeo comenzó a ganar terreno. Todo tipo de propietarios de reproductores lucharon entre sí —Real Player, Windows Media, etcétera— hasta que uno emergió como el victorioso en 2005: Adobe Flash, sobre todo debido a la presencia en todas partes d su plugin y al hecho de que éste distribuyo el mecanismo de elección para YouTube.

HTML5 proporciona un estándar abierto, competitivo para entregar la multimedia en la Web con sus elementos de vídeo y audio nativo y su APIs. Este artículo en gran parte habla sobre el elemento de vídeo, como lo más atractivo, pero la mayoría del marcado HTML y de los fragmentos de código son aplicables para los dos tipo de medios.


Multimedia Nativo: ¿Por qué, Qué y Cómo?

En 2007, Anne van Kesteren escribió para el Grupo de Trabajo:

"Opera tiene algunos experimentos internos elaborados con una implementación de un un elemento de vídeo. El elemento revela una API sencilla (por el momento) parecido al objeto Audio(): play(), pause(), stop(). La idea es que éste funcione como <object> excepto que éste tiene un valor semántico especial <video> muy parecido a <img> que tiene una imagen semántica".

Mientras la API ha incrementado en complejidad, el anuncio original de van Kesteren, ahora es implementado en los principales navegadores y durante el momento en que escribía éste libro, Microsoft anunció el próximo soporte para Internet Explorer 9.

Un compañero obvio para un elemento <video> es un elemento <audio>, ya que comparten muchas características similares, por lo tanto, en este capítulo hablaremos de ambos y solamente consideraremos las diferencias.

<video>: ¿Por qué necesita un elemento de <video>?

Anteriormente, si los desarrolladores querían incluir un vídeo en una página web, tenían que usar el elemento <object>, el cual es un contenedor genérico para los "objetos desconocidos". Debido a la inconsistencia de los navegadores, también necesitarían usar el elemento invalido anterior <embed> y duplicar muchos parámetros. El resultado, un código que se parecía a esto:

<embed> finalmente es estandarizado en HTML5, nunca fue parte de algún condimento anterior de (X)HTML.

Éste código es feo y desgarbado. Peor que eso es el hecho de que el navegador tiene que pasar el vídeo apagado a un plugin terceras personas, con la esperanza de que el usuario tenga la versión correcta de ese plugin (o tenga los derechos para descargarlo e instalarlo, o los conocimientos para hacerlos) y luego esperar que el plugin accesible a través del teclado —junto con todos los otros desconocidos involucrados en entregar el contenido a una aplicación de terceras personas.

Los plugins también pueden ser una causa considerable de la inestabilidad de los navegadores y puede crear preocupación en menos usuarios técnicos cuando son impulsados a descargar e instalar las versiones más nuevas.

Cuando usted incluye un plugin en sus páginas, usted está reservando cierta área para dibujo que el navegador delega al plugin. En cuanto al navegador corresponde, las áreas de plugins quedan en una caja negra —el navegador no procesa o interpreta nada que esté pasando ahí.

Por lo general, esto no es un problema, pero los problemas puede aparecer cuando su composición se superpone al área de dibujo del plugin. Imagine, por ejemplo, un sitio que contiene una película pero que además tiene menús desplegables basados en las tecnologías JavaScript y CSS que necesita desplegar sobre la película. Por defecto, el área de dibujo del plugin, ocupa la parte superior de la página, lo que significa que éstos menús raramente aparecerán detrás de la película.

Los problemas y las peculiaridades, pueden aparecer si su página tiene cambios dinámicos en la composición. Si las dimensiones del área de dibujo del plugin cambian de tamaño, entonces, algunas veces, esto puede tener efectos imprevistos —una película reproduciéndose en el plugin puede no cambiar de tamaño, pero en lugar de eso, simplemente es recortada o muestra espacio extra en blanco. HTML5 proporciona una forma estandarizada para reproducir vídeos directamente en el navegador, sin requerir de ningún plugin.

Una de las principales ventajas del elemento de vídeo de HTML5 es que, finalmente, el vídeo es un ciudadano completo en la web. Ya no es más un apartado interior del <objeto> o del elemento sin validar; <embed>.

Así que ahora, los elementos <vídeos> pueden ser arreglados con CSS, pueden cambiarse de tamaño usando transiciones CSS cuando éste es seleccionado, por ejemplo. Pueden ser modificados y reacondicionados en <canvas> con JavaScript. Y lo mejo de todo, la habilidad hack innata que abre los estándares proporcionados por la web está abierto. Anteriormente, todos los datos de sus vídeos fueron libres de obstáculos, sus bits fueron atrapados en una caja. Con HTML5 multimedia, sus bits están libres de ser manipulados del modo que usted quiera.

Siempre que el punto http sea un recurso de transmisión en línea en la web, solo puede apuntar el elemento <video> o <audio> para transmitir el contenido.

Qué HTML5 multimedia no es bueno

Independientemente de los titulares en blanco y negro de los periodistas de tecnología, HTML5 no "eliminará" todos los complementos de la noche a la mañana. Hay casos de uso para complementos que no están cubiertos por la nueva especificación.

La protección contra copia es un área no tratada por HTML5, como era de esperar, dado que es un estándar basado en la apertura. Por lo tanto, las personas que necesitan DRM probablemente no querrán usar video o audio HTML5, ya que serán tan fáciles de descargar a un disco duro como un <img> es ahora. Algunos navegadores ofrecen un simple menú de acceso contextual a la URL del video, o incluso para guardar el video. (Por supuesto, no es necesario que indiquemos que, de todos modos, DRM es una tarea de tontos. Todo lo que haces es alejar a tus usuarios honestos y causar pequeños inconvenientes a los piratas dedicados).

Los complementos siguen siendo la mejor opción para que un navegador transmita video y audio desde la máquina del usuario a una página web como Daily Mugshot o Chat Roulette. (Hay un elemento <device> altamente incipiente rudimentariamente especificado para el HTML "post-5", pero los navegadores no lo admiten.) Después de estremecerse ante la inimaginable soledad que representaría un mundo sin Chat Roulette, considere también la masiva cantidad de contenido que requerirá complementos para representarlo durante un largo tiempo.

Anatomía del elemento video

En su forma más simple, incluir video en una página en HTML5 simplemente requiere este código:

La extensión de archivo .ogv se usa aquí para señalar un video de Ogg Theora.

Al igual que en <object>, puede colocar un marcado de reserva entre las etiquetas, para los navegadores web más antiguos que no admiten video nativo. Al menos debe proporcionar un enlace al video para que los usuarios puedan descargarlo en sus discos duros y verlo más tarde en el reproductor de medios del sistema operativo.

HTML5 video in a modern browser and fallback content in a legacy browser.HTML5 video in a modern browser and fallback content in a legacy browser.HTML5 video in a modern browser and fallback content in a legacy browser.

Vídeo HTML5 en un navegador moderno y contenido alternativo en un navegador heredado.

Sin embargo, este ejemplo no hará nada por el momento. Todo lo que puedes ver aquí es el primer cuadro de la película. Esto se debe a que no le ha dicho al video que se reproduzca, y no le ha dicho al navegador que proporcione ningún control para reproducir o pausar el video.

auto-reproducción

Puede decirle al navegador que reproduzca el video o el audio automáticamente, pero es casi seguro que no debería hacerlo, ya que muchos usuarios (y especialmente aquellos que usan tecnología de asistencia, como un lector de pantalla) lo encontrarán altamente intrusivo. Los usuarios en dispositivos móviles probablemente no querrán que uses su ancho de banda sin que ellos soliciten explícitamente el video. Sin embargo, así es como lo haces:

controles

Proporcionar controles es aproximadamente un 764 por ciento mejor que la reproducción automática de tu video. Puedes usar un JavaScript simple para escribir el tuyo (más sobre esto más adelante) o puedes decirle al navegador que los proporcione automáticamente:

Naturalmente, estos difieren entre los navegadores, de la misma manera que lo hacen los controles de formulario, por ejemplo, pero no encontrará nada demasiado sorprendente. Hay un interruptor de reproducción / pausa, una barra de búsqueda y control de volumen.

Los navegadores tienen diferentes niveles de accesibilidad de teclado. Los controles nativos de Firefox no aparecen cuando JavaScript está deshabilitado (el menú contextual permite al usuario detener e iniciar la película, pero existe el problema de la capacidad de descubrimiento, y no parece posible elegir estas opciones sin JS). Los controles nativos accesibles de Opera siempre están presentes cuando JavaScript está deshabilitado, independientemente de si se especifica el atributo de controles.

Chrome y Safari tienen problemas con la accesibilidad del teclado. Anticipamos una mayor accesibilidad del teclado ya que los fabricantes resuelven los problemas.

Tenga en cuenta que estos controles aparecen cuando un usuario se desplaza sobre un video o cuando se acerca al video. También es posible desplazarse por los diferentes controles. Esta accesibilidad nativa del teclado ya es una mejora en los complementos, que puede ser difícil de tabular desde el contenido HTML circundante.

Si el elemento <audio> tiene el atributo de controles, los verá en la página. Sin el atributo, nada se representa visualmente en la página, pero está, por supuesto, allí en el DOM y es totalmente controlable a través de JavaScript y las nuevas API.

póster

El atributo del póster apunta a una imagen que el navegador utilizará mientras se descarga el video, o hasta que el usuario le indique que reproduzca el video.  (Este atributo no se aplica a <audio>.) Elimina la necesidad de trucos adicionales, como mostrar una imagen y luego eliminarla mediante JavaScript cuando se inicia el video.

Si no utiliza el atributo de póster, el navegador muestra el primer fotograma de la película, que puede no ser la imagen representativa que desea mostrar.

anchura altura

Estos atributos le dicen al navegador el tamaño en píxeles del video. (No se aplican a <audio>.) Si los omite, el navegador utiliza el ancho intrínseco del recurso de video, si está disponible. De lo contrario, es el ancho intrínseco del marco del póster, si está disponible. De lo contrario es de 300 píxeles.

Si especifica un valor, pero no el otro, el navegador ajusta el tamaño de la dimensión no especificada para preservar la relación de aspecto del video.

Si configura el ancho y el alto en una relación de aspecto que no coincide con la del video, el video no se extiende a esas dimensiones, sino que se traduce como "letter-boxed" dentro del elemento de video de su tamaño específico, mientras se mantiene la relación de aspecto.

repiticion

El atributo de bucle es otro atributo booleano. Como puedes imaginar, reproduce la reproducción de medios.

precarga

Tal vez esté bastante seguro de que el usuario desea activar el medio (por ejemplo, lo ha profundizado en alguna navegación, o es la única razón para estar en la página), pero no desea utilizar la reproducción automática. Si es así, puede sugerir que el navegador cargue previamente el video para que comience a almacenarse en búfer cuando la página se carga con la expectativa de que el usuario activará los controles.

Hay tres estados definidos por especificación del atributo de precarga. Si solo dices precarga, el agente de usuario puede decidir qué hacer. Un navegador móvil puede, por ejemplo, dejar de precargar hasta que el usuario lo indique explícitamente.

Una sugerencia para que el navegador comience a descargar el archivo completo. Tenga en cuenta que decimos "sugerencia". El navegador puede ignorar esto, tal vez porque detectó una conexión muy lenta o una configuración en un navegador móvil "Nunca precargar medios" para guardar el ancho de banda del usuario.

Este estado sugiere al navegador que no debe precargar el recurso hasta que el usuario active los controles.

Este estado sugiere al navegador que solo debe buscar metadatos (dimensiones, primer fotograma, lista de pistas, duración, etc.) pero que no debe descargar nada más hasta que el usuario active los controles.

src

Como en un <img>, este atributo apunta al archivo que se mostrará. Sin embargo, dado que no todos los navegadores pueden reproducir los mismos formatos, en entornos de producción necesita tener más de un archivo de origen. Cubriremos esto en la siguiente sección. El uso de un único archivo de origen con el atributo src solo es realmente útil para la creación rápida de prototipos o para los sitios de intranet en los que conoce el navegador del usuario y los códecs que admite.


codecs: el horror, el horror

Los primeros borradores de la especificación HTML5 exigían que todos los navegadores deberían tener al menos soporte incorporado para multimedia en dos códecs: Ogg Vorbis para audio y Ogg Theora para películas. Vorbis es un códec utilizado por servicios como Spotify, entre otros, y para muestras de audio en juegos como Microsoft Halo, a menudo se usa con Theora para video y se combina en el formato de contenedor Ogg.

Sin embargo, estos códecs se eliminaron de la especificación HTML5 después de que Apple y Nokia se opusieran, por lo que la especificación no hace ninguna recomendación sobre los códecs. Esto nos deja con una situación fragmentada. Opera y Firefox soportan Theora y Vorbis. Safari no, prefiriendo en cambio proporcionar soporte nativo para el códec de video H.264 y el audio MP3. Microsoft ha anunciado que IE9 también admitirá H.264, que también es compatible con iPhone y Android. Google Chrome admite videos Theora y H.264, y Vorbis y MP3. ¿Confuso?

Cuando estábamos terminando este libro, Google anunció que está abriendo un codificador de video llamado VP8. Este es un códec de muy alta calidad, y cuando se combina con Vorbis en un formato de contenedor basado en el formato Matroska, se conoce colectivamente como "webM".

Opera, Firefox y Chrome han anunciado que lo apoyarán. IE9 lo hará, si el códec se instala por separado. VP8 se incluirá en el Flash Player de Adobe y cada video de YouTube estará en formato webM.

Como Theora, es un códec libre de derechos. En este capítulo, puede sustituir los ejemplos de .ogv con .webm por video de alta calidad, una vez que haya soporte para el navegador.

Stop press: iPad bug: desde que fuimos a la prensa, se nos ha informado de un error que afecta a algunos iPad que significa que solo pueden leer el primer elemento <source>. Por lo tanto, su versiónmp4 debe aparecer antes que su versión sin royalties en el orden de origen.

La regla es: proporcionar tanto sin royalties (webM o Theora) como

Video H.264 en sus páginas, y audio Vorbis y MP3 para que nadie quede bloqueado de su contenido. No repitamos los errores de las antiguas insignias "Mejor vista en Netscape Navigator" en los sitios web.

Múltiples elementos <source>

Para hacer esto, necesita codificar su multimedia dos veces: una vez como Theora y una vez como H.264 en el caso de video, y tanto en Vorbis como en MP3 para audio.

Luego, vincula estas versiones separadas del archivo al elemento multimedia. En lugar de utilizar el único atributo src, anide elementos <source> separados para cada codificación con los atributos de tipo apropiados dentro del elemento <audio> o <video> y deje que el navegador descargue el formato que puede mostrar.

Tenga en cuenta que en este caso no proporcionamos un atributo src en el propio elemento de medios:

La línea 1 le dice al navegador que se debe insertar un video y darle los controles predeterminados.

La línea 2 ofrece un video Ogg Theora y utiliza el atributo type para indicar al navegador qué tipo de formato de contenedor se usa (al proporcionar el tipo MIME del archivo) y qué códec se usó para la codificación del video y la transmisión de audio. También podríamos ofrecer un video de WebM aquí como una opción de alta calidad sin royalties. Observe que usamos comillas alrededor de estos parámetros. Si pierde el atributo de tipo, el navegador descarga un poco de cada archivo antes de darse cuenta de que no es compatible, lo que desperdicia ancho de banda y puede retrasar la reproducción del contenido multimedia.

El contenido entre las etiquetas es contenido alternativo solo para los navegadores que no admiten el elemento <video>. Un navegador que entienda el video HTML5 pero no puede reproducir ninguno de los formatos a los que apunta su código no mostrará el contenido "alternativo" entre las etiquetas. Esto me ha mordido en la parte inferior algunas veces. Lamentablemente, no hay registro de video de eso.

La línea 3 ofrece un video H.264. Las cadenas de códec para H.264 y AAC son más complicadas que las de Ogg porque hay varios perfiles para H.264 y AAC. Los perfiles más altos requieren más CPU para decodificar, pero están mejor comprimidos y requieren menos ancho de banda.

Dentro del elemento <video> se encuentra nuestro mensaje de respaldo, que incluye enlaces a ambos formatos para los navegadores que no pueden tratar de forma nativa con ningún tipo de video, pero que probablemente sea un sistema operativo que pueda manejar uno de los formatos, para que el usuario pueda descargar el archivo y verlo en un reproductor multimedia fuera del navegador.

OK, así que es el video HTML5 nativo para todos los usuarios de navegadores modernos. ¿Qué pasa con los usuarios de navegadores heredados, incluido Internet Explorer 8 y versiones anteriores?


Video para navegadores heredados

Los navegadores más antiguos no pueden reproducir video o audio nativos, bendícelos. Los navegadores más antiguos no pueden reproducir video o audio nativos, bendícelos. Pero si está preparado para confiar en los complementos, puede ser útil para los usuarios de navegadores.

¿Recuerda que el contenido del elemento <video> puede contener marcas, como el texto y los enlaces en el ejemplo anterior? Como complemento del reproductor Flash También puede reproducir el tipo de archivo MP4, puede usar la película MP4 en una combinación como una alternativa para Internet Explorer 8 y versiones anteriores de otros navegadores.

El código para esto es tan espantoso como cabría esperar para un hackeo de transición, pero funciona en cualquier lugar donde se instale Flash Player, que está en casi todas partes. Puedes ver esta ingeniosa técnica en un artículo llamado "Video para todos" por su inventor, Kroc Camen.

Alternativamente, puede alojar el contenido alternativo en un sitio de alojamiento de video e incrustar un enlace a esas etiquetas de un elemento de video:

Puede usar la biblioteca html5media para secuestrar el elemento <video> y agregar automáticamente el respaldo necesario agregando una línea de JavaScript en el encabezado de su página.

Codificación de vídeo y audio sin royalties

Idealmente, debería iniciar la conversión desde el propio formato de origen, en lugar de volver a comprimir una versión ya comprimida. La doble compresión puede reducir seriamente la calidad de la salida final.

En el lado del audio, el software de edición de audio de código abierto Audacity tiene soporte incorporado para la exportación de Ogg Vorbis. Para la conversión de video, hay algunas buenas opciones. Para .WebM, solo hay unos pocos codificadores en este momento, como era de esperar para un códec tan nuevo. Vea www.webmproject.org/tools/ para la lista creciente.

La aplicación gratuita evom puede hacer Ogg Theora en una Mac a través de una interfaz gráfica agradable. Los usuarios de Windows y Mac pueden descargar Miro Video Converter, que le permite arrastrar un archivo a su ventana para convertirlo a Theora o H.264 optimizado para diferentes dispositivos como iPhone, Android Nexus One, PS2, etc.

El VLC gratuito puede convertir archivos a Ogg en Windows o Linux. OggConvert es una utilidad útil para usuarios de Linux.

Alternativamente, la extensión de Firefox Firefogg y su sitio web asociado proporcionan una conversión fácil basada en la web. TinyOgg convierte el video Flash a Ogg para descargarlo, e incluso se puede alimentar con una URL de YouTube.

El proceso de conversión también puede ser automatizado y manejado por el lado del servidor. Por ejemplo, en un entorno de CMS, es posible que no pueda controlar el formato en el que los autores cargan sus archivos, por lo que es posible que desee realizar una compresión al final del servidor. La biblioteca de código abierto ffmpeg se puede instalar en un servidor para traer conversiones de archivos industriales cargados con fuerza industrial (¿quizás estés empezando tu propio asesino de YouTube?)

Si está preocupado por el espacio de almacenamiento y está feliz de compartir sus archivos multimedia (audio y video) bajo una de las diversas licencias CC, eche un vistazo a Internet Archive, que los convertirá y los alojará por usted. Simplemente cree una contraseña y cárguela, luego use un elemento <video> en su página, pero vincule al archivo fuente en sus servidores.

Enviar videos comprimidos de forma diferente a dispositivos portátiles

Los archivos de video tienden a ser grandes, y el envío de videos de muy alta calidad puede ser un desperdicio si se envía a dispositivos portátiles donde los tamaños de pantalla pequeños hacen que la alta calidad sea innecesaria. No tiene sentido enviar video de alta definición para un monitor de pantalla ancha a la pantalla de un dispositivo portátil. Comprimir un video a un tamaño apropiado para una pantalla pequeña puede ahorrar mucho ancho de banda, lo que hace que su servidor y, lo más importante, sean felices para los usuarios móviles.

HTML5 le permite usar el atributo de medios en el elemento de origen, que consulta el navegador para averiguar el tamaño de la pantalla (o el número de colores, la relación de aspecto, etc.) y enviar diferentes archivos que están optimizados para diferentes tamaños de pantalla.

Utilizamos min-device-width en lugar de min-width para atender a los dispositivos que tienen una ventana gráfica en el contenido, es decir, cada navegador de smartphone con todas las funciones, ya que esto nos da el ancho de la pantalla de la ventana gráfica.

Esta funcionalidad y sintaxis se toman de la especificación de consultas de medios CSS, pero forman parte del marcado, ya que estamos cambiando los archivos de origen según las características del dispositivo. En el siguiente ejemplo, el navegador se "pregunta" si tiene un min-device-width de 800px, es decir, ¿tiene una pantalla ancha? Si la tiene, recibe hi-res.ogv; si no, es enviado lo-res.ogv:

También tenga en cuenta que aún debe usar el atributo de tipo con los parámetros de los códecs y el contenido de reserva analizado anteriormente. Acabamos de omitirlos para mayor claridad.


Controles personalizados rodantes

Un aspecto verdaderamente sofisticado del elemento multimedia, y por lo tanto los elementos de audio y video, es que la API de JavaScript es súper fácil. La API para audio y video desciende de la misma API de medios, por lo que son casi exactamente iguales. La única diferencia en estos elementos es que el elemento de video tiene atributos de altura y anchura y un atributo de póster. Los eventos, los métodos y todos los demás atributos son los mismos. Teniendo esto en cuenta, nos quedaremos con el elemento multimedia más sexy: el elemento <video> para nuestra discusión de JavaScript.

Como vio al comienzo de este capítulo, Anne van Kesteren habla sobre la nueva API y que tenemos nuevos métodos simples como play(), pause() (no hay un método de detención: simplemente haga una pausa y avance para comenzar), load(), y canPlayType(). De hecho, eso es todos los métodos en el elemento de los medios. Todo lo demás son eventos y atributos.

Con JavaScript y la nueva API de medios, puede crear y administrar sus propios controles de reproductor de video. En nuestro ejemplo, lo guiaremos a través de algunas de las formas de controlar el elemento de video y crear un conjunto simple de controles. Nuestro ejemplo no te sorprenderá, no es tan sexy como el elemento de video en sí (¡y está un poco artificial!), Pero obtendrás una buena idea de lo que es posible a través de secuencias de comandos. Lo mejor es que la interfaz de usuario será todo CSS y HTML. Por lo tanto, si desea diseñarlo a su manera, es fácil con solo un poco de conocimiento de los estándares web, sin necesidad de editar un reproductor Flash externo o similar.

Nuestros controles básicos de reproductor de video enrollado a mano tendrán un botón para alternar reproducir / pausar y le permitirá al usuario desplazarse a lo largo de la línea de tiempo del video para saltar a una sección específica.

Custom video controlsCustom video controlsCustom video controls

Nuestro punto de partida será un video con controles nativos habilitados. Luego, usaremos JavaScript para eliminar los controles nativos y agregar los nuestros, de modo que si JavaScript está deshabilitado, el usuario aún tiene una forma de controlar el video como pretendíamos:

Reproducir, pausar y alternar la reproducción.

A continuación, queremos poder reproducir y pausar el video desde un control personalizado. Hemos incluido un elemento de botón del que enlazaremos un controlador de clic y haremos la funcionalidad de reproducción / pausa. A lo largo de mis ejemplos de código, cuando me refiero a la variable de reproducción, se referirá al elemento de botón:

Estamos usando & #25BA, que es una entidad XML geométrica que parece un botón de reproducción. Una vez que se haga clic en el botón, iniciaremos el video y cambiaremos el valor a dos canales usando & #x2590, que se ve (un poco) como una pausa.

Using XML Entities

Para simplificar, he incluido el elemento de botón como marca, pero a medida que mejoramos progresivamente nuestros controles de video, todos estos elementos adicionales (para reproducir, pausar, restregar, etc.) deben ser generados por JavaScript.

En el interruptor de reproducción / pausa tenemos varias cosas que hacer:

  • Si el video está actualmente en pausa, comience a reproducirse, o si el video ha terminado, entonces debemos restablecer la hora actual a 0, es decir, mover la cabeza lectora al inicio del video.
  • Cambie el valor del botón de alternancia para mostrar que la próxima vez que el usuario haga clic, cambiará de pausa a reproducción o de reproducción a pausa.
  • Finalmente, reproducimos (o pausamos) el video:

El problema con esta lógica es que dependemos completamente de nuestro propio script para determinar el estado del botón de reproducción / pausa. ¿Qué sucede si el usuario pudo pausar o reproducir el video a través de los controles del elemento de video nativo de alguna manera (algunos navegadores permiten al usuario hacer clic derecho y seleccionar reproducir y pausar el video)? Además, cuando el video llega al final, el botón de reproducción / pausa seguirá mostrando un icono de pausa. En última instancia, necesitamos que nuestros controles se relacionen siempre con el estado del video.

Elementos de media

Los elementos multimedia activan una amplia gama de eventos: cuando comienza la reproducción, cuando un video ha terminado de cargarse, si el volumen ha cambiado, y así sucesivamente. Entonces, volviendo a nuestro botón de reproducción / pausa personalizado, eliminamos la parte del script que trata de cambiar su etiqueta visible:

En estos ejemplos, estamos usando la API addEventListener DOM nivel 2, en lugar del attachEvent, que es específico de Internet Explorer hasta la versión 8. El próximo IE9 será compatible con el video, pero afortunadamente también es compatible con el addEventListener estandarizado, por lo que nuestro código trabajar allí, también.

En el código simplificado, si el video ha finalizado, lo restablecemos y luego alternamos la reproducción según su estado actual. La etiqueta en el propio control se actualiza mediante funciones separadas (anónimas) que hemos conectado directamente a los controladores de eventos en nuestro elemento de video:

Ahora, cuando se reproduce, pausa o llega al final del video, se activa la función asociada con el evento relevante, asegurándose de que nuestro control muestre la etiqueta correcta.

Ahora que estamos manejando la reproducción y la pausa, queremos mostrarle al usuario la cantidad de video que se ha descargado y, por lo tanto, cuánto se puede reproducir. Esta sería la cantidad de video almacenado disponible. También queremos captar el evento que dice la cantidad de video que se ha reproducido, para poder mover nuestro control deslizante visual a la ubicación apropiada para mostrar qué tan lejos estamos del video. Finalmente, y lo más importante, necesitamos capturar el evento que dice que el video está listo para ser reproducido, es decir, hay suficientes datos de video para comenzar a mirar.

seekable contentseekable contentseekable content

Monitoreando el progreso de la descarga

El elemento de medios tiene un evento de "progreso", que se activa una vez que se han recuperado los medios pero potencialmente antes de que se procesen los medios. Cuando se activa este evento, podemos leer el video. objeto de búsqueda, que tiene una longitud, start(), y end(). Podemos actualizar nuestra barra de búsqueda utilizando el siguiente código (donde la variable del búfer es el elemento que muestra la cantidad de video que podemos buscar y se ha descargado):

El código se enlaza con el evento de progreso y, cuando se dispara, obtiene el porcentaje de video que se puede reproducir en comparación con la duración del video. Tenga en cuenta que la palabra clave se refiere al elemento de video, ya que ese es el contexto en el que se ejecutará la función updateSeekable, y el atributo de duración es la longitud del medio en segundos.

Sin embargo, a veces hay un problema sutil en Firefox en su elemento de video que hace que el valor video.seekable.end() no sea el mismo que la duración. O más bien, una vez que los medios se descargan y procesan por completo, la duración final no coincide con el valor video.seekable.end(). Para solucionar este problema, también podemos escuchar el evento durationchange mediante la misma función updateSeekable. De esta manera, si la duración cambia después del último evento de proceso, el evento durationchange se activa y nuestro elemento de búfer tendrá el ancho correcto:

Cuando el archivo multimedia está listo para reproducir

Cuando su navegador encuentra por primera vez el elemento de video (o audio) en una página, el archivo multimedia aún no está listo para reproducirse. El navegador necesita descargar y luego decodificar el video (o audio) para poder reproducirlo. Una vez que esté completo, el elemento de medios activará el evento canplay. Por lo general, este es el momento en que usted inicializaría sus controles y eliminaría cualquier indicador de "carga". Por lo tanto, nuestro código para inicializar los controles se vería así:

Nada terriblemente emocionante allí. La inicialización del control habilita el botón de alternar reproducción / pausa y restablece la cabeza lectora en la barra de búsqueda.

Los eventos relacionados con la carga se activan en el siguiente orden: loadstart, durationchange, loadeddata, progress, canplay, canplaythrough.

Sin embargo, a veces este evento no se dispara de inmediato (o al menos cuando esperas que se dispare). A veces, el video suspende la descarga porque el navegador está intentando guardar la descarga demasiado para ti. Eso puede ser un dolor de cabeza si esperas el evento de canplay, que no se activará a menos que le des una patada al elemento multimedia. Entonces, en lugar de eso, hemos comenzado a escuchar el evento de datos cargados. Esto dice que hay algunos datos que se han cargado, aunque no particularmente todos los datos. Esto significa que los metadatos están disponibles (altura, anchura, duración, etc.) y algunos contenidos multimedia, pero no todos. Al permitir que el usuario comience a reproducir el video en el punto en el que se dispararon los datos cargados, obliga a los navegadores como Firefox a pasar de un estado suspendido a descargar el resto del contenido multimedia, lo que le permite reproducir todo el video. Entonces, de hecho, el punto correcto en el ciclo de eventos para habilitar la interfaz de usuario es loadeddata:

Metadatos de precarga

Una adición reciente al elemento de medios es el atributo de precarga (tan nuevo que no es compatible con los navegadores en este momento). Permite a los desarrolladores indicar a los navegadores solo que descarguen la información del encabezado sobre el elemento multimedia, que incluiría los metadatos. Si el soporte para este atributo se abre camino en los navegadores, es lógico que debamos escuchar el evento loadedmetadata sobre el evento loadeddata si desea inicializar los controles de duración y control deslizante de los medios.

Avance rápido, cámara lenta y retroceso

La especificación proporciona un atributo, playbackRate. Por defecto, la tasa de reproducción asumida es 1, lo que significa una reproducción normal a la velocidad intrínseca del archivo multimedia. Aumentar este atributo acelera la reproducción; Disminuyendo se ralentiza. Los valores negativos indican que el video se reproducirá en reversa.

Aún no todos los navegadores son compatibles con playbackRate (solo los navegadores basados ​​en WebKit lo admiten en este momento), por lo que si necesita admitir el avance rápido y el rebobinado, puede modificar esto cambiando programáticamente currentTime:

Como puede ver en el ejemplo anterior, si se admite playbackRate, puede configurar números positivos y negativos para controlar la dirección de la reproducción. Además de poder rebobinar y avanzar rápidamente usando la tasa de reproducción, también puede usar una fracción para reproducir el contenido multimedia en cámara lenta usando video.playbackRate = 0.5, que se reproduce a la mitad de la velocidad normal.


Accesibilidad multimedia

Hemos hablado sobre la accesibilidad de teclado del elemento de video, pero ¿qué pasa con las transcripciones, los subtítulos para multimedia? Después de todo, no hay un atributo alt para video o audio como lo hay para <img>. El contenido alternativo entre las etiquetas solo está destinado a los navegadores que no pueden manejar el video nativo; no para personas cuyos navegadores pueden mostrar los medios pero no pueden verlos ni escucharlos debido a una discapacidad o situación (por ejemplo, en un entorno ruidoso o que necesitan conservar el ancho de banda).

La teoría de la accesibilidad multimedia HTML5 es excelente. El autor original debe crear un archivo de subtítulos y colocarlo en el contenedor Ogg o MP4 junto con los archivos multimedia, y el navegador ofrecerá una interfaz de usuario mediante la cual el usuario puede obtener esos títulos o subtítulos. Incluso si el video está "incrustado" en 1,000 sitios diferentes (simplemente usando una URL externa como fuente del elemento de video / audio), esos sitios obtienen la información de subtitulación de forma gratuita, por lo que obtenemos "escribir una vez, leer en todas partes" .

Esa es la teoría. En la práctica, nadie sabe cómo hacer esto; La especificación es silenciosa, los navegadores no hacen nada. Eso está empezando a cambiar; En el momento de escribir este artículo (mayo de 2010), WHATWG agregó un nuevo elemento <track> a la especificación, que permite agregar diversos tipos de información, como subtítulos, títulos, descripción, títulos de capítulos y metadatos.

El WHATWG está especificando un nuevo formato de texto cronometrado llamado WebSRT para esta información, lo cual es una de las razones por las que este elemento número 29 no está en la versión W3C de la especificación. El formato del elemento <track> es:

Pero, ¿qué puedes hacer ahora? No hay un solo enfoque verdadero para este problema, pero aquí presentaremos una posible solución provisional (aunque sea hack).

Bruce hizo una prueba de concepto que muestra líneas individuales de una transcripción, que han sido marcadas con la marca de tiempo utilizando los nuevos atributos data-* de HTML5:

JavaScript se usa para ocultar la transcripción <article>,  enganchar en el evento timeupdate de la API de video, y la superposición se extiende como texto sin formato (por lo tanto, stylable con CSS) sobre (o al lado de) el elemento de video, dependiendo del tiempo de reproducción actual de El video y las marcas de tiempo en los tramos individuales. Véalo en acción aquí.

Caption over the imageCaption over the imageCaption over the image

La BBC tiene un experimento similar que toma subtítulos de un archivo externo de JavaScript, que está más cerca de la visión de HTML5, pero no tiene el efecto secundario de permitir que los motores de búsqueda indexen el contenido de la transcripción.

Silvia Pfeiffer, contratista de Mozilla, tiene algunas demostraciones inteligentes que usan videos HTML5 y algunas extensiones adicionales (que no son parte de la especificación).

Los data-* Atributos (Atributos de datos personalizados)

HTML5 permite atributos personalizados en cualquier elemento. Se pueden usar para pasar información a scripts locales.

Anteriormente, para almacenar datos personalizados en su marca, los autores harían algo molesto como usar clases: <input class="spaceship shields-5 lives-3 energy-75">. Luego, su secuencia de comandos necesitaría perder tiempo tomando estos nombres de clase, como shields-5, dividiéndolos en un delimitador (un guión en este ejemplo) para extraer el valor. En su libro, PPK en JavaScript (New Riders, ISBN 0321423305), Peter Paul Koch explica cómo hacerlo y por qué eligió usar atributos personalizados en algunas páginas HTML4, lo que hace que el JavaScript sea más sencillo y fácil de escribir, pero también técnicamente inválido. Como es mucho más fácil usar data-shields = 5 para pasar pares nombre / valor a los scripts, HTML5 legitima y estandariza esta práctica útil del mundo real.

Estamos usando data-begin y data-end; podrían igualmente ser legítimamente data-start y data-finish, o (en un género diferente de video) data-ooh-matron y data-slapandtickle. Al igual que la elección de nombres de clase o identificación, debe elegir un nombre que coincida con la semántica.

Los atributos de datos personalizados solo están destinados a pasar información a los propios scripts del sitio, para los cuales no hay atributos o elementos más apropiados.

La especificación dice: "Estos atributos no están diseñados para ser utilizados por software que es independiente del sitio que utiliza los atributos" y, por lo tanto, no están destinados a pasar información a rastreadores o analizadores de terceros. Eso es un trabajo para microformatos, microdatos o RDFa.

Cuando los atributos data-* son totalmente compatibles con un navegador, JavaScript puede acceder a las propiedades utilizando element.dataset.foo (donde el atributo data-foo contiene el valor). El soporte puede ser emulado usando JavaScript al extender el objeto HTMLElement, que normalmente no es posible en la versión alfa de IE9 y más abajo, que puede ver aquí. De lo contrario, los scripts pueden acceder a los valores a través de los métodos get/setAttribute. La ventaja de la propiedad dataset sobre setAttribute es que se puede enumerar, pero también, cuando se implementa por completo en los navegadores, la configuración de un atributo dataset establece automáticamente el atributo de contenido en el elemento, lo que le brinda una sintaxis abreviada para configurar datos personalizados.

Para obtener más información, consulte la especificación.


Resumen

Has visto cómo HTML5 te ofrece la primera alternativa creíble a los complementos de terceros. El soporte de códec incompatible actualmente hace que sea más difícil que usar complementos simplemente incrustar video en una página y hacer que funcione en todos los navegadores.

En el lado positivo, debido a que el video y el audio son ahora elementos regulares soportados de forma nativa por el navegador (en lugar de un complemento de "caja negra") y ofrecen una API potente, son extremadamente fáciles de controlar a través de JavaScript. Con nada más que un poco Con el conocimiento de los estándares web, los desarrolladores pueden crear fácilmente sus propios controles personalizados o realizar todo tipo de manipulaciones de video locas con solo unas pocas líneas de código. Como una red de seguridad para los navegadores que no pueden hacer frente, le recomendamos que también agregue enlaces a descarga tus archivos de video fuera del elemento <video>.

Ya hay una serie de scripts listos para usar que le permiten aprovechar fácilmente las sinergias de HTML5 en sus propias páginas, sin tener que hacer toda la codificación usted mismo. El Kaltura player es un reproductor de video de código abierto que funciona en todos los navegadores. jPlayer es un reproductor de audio jQuery con una licencia muy liberal que se degrada a Flash en los navegadores antiguos, se puede diseñar con CSS y se puede ampliar para permitir listas de reproducción.

Acceder al video con JavaScript es más que escribir nuevos reproductores. En el siguiente capítulo, aprenderá a manipular elementos de medios nativos para obtener algunos efectos realmente sorprendentes. O al menos, nuestras cabezas rebotan en la pantalla, ¿y quién podría concebir algo más sorprendente que eso?


Compra el libro


Introducing HTML5Introducing HTML5Introducing HTML5

Este artículo fue extraído de Introducing HTML5 por Bruce Lawson y Remy Sharp. Copyright © 2011. Usado con permiso de Pearson Education, Inc. y New Riders.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.