Elementos Multimedia - HTML5 Lección 9

Elementos Multimedia

Temario

• Audio
• Vídeo

audio

La etiqueta <audio> permite al usuario integrar un archivo de audio directamente en el navegador.

<audio src = "cancion.ogg" controls>

                <a href = "canción.ogg">cancion.ogg</a>

</audio>

Si el navegador no soporta la etiqueta <audio>, el código entre <audio> y </audio> se presentará en su lugar, por lo que puede proporcionar un vínculo común para permitir al usuario descargar el audio. O bien, puede incrustar un reproductor Flash para navegadores antiguos.
La etiqueta <audio> soporta varias características estándar:

• Reproducción automática (autoplay): Si este atributo está presente, el archivo de audio se reproducirá inmediatamente cuando el navegador carga la página.En general, esta opción no se debe utilizar, ya que es considerado de mala educación  reproducir un audio sin el permiso explícito del usuario.
• Controles (controls): Si este atributo está presente, el navegador presenta una interfaz simple que incluyendo reproducir/pausa, control de volumen, y una especie de indicador de posición. Navegadores difieren en cómo aparecen exactamente los controles. Es preferible dar al usuario algún tipo de control ya sea a través del mecanismo de control integrado o código JavaScript.
• Precarga (preload): Si este atributo está presente, el archivo de audio comenzará a cargar en la memoria tan pronto como se carga la página, pero no va a reproducirse hasta que el usuario activa el reproductor. 
• Atributo (src): Indica la dirección del archivo. Tenga en cuenta que se prefiere la etiqueta <source>, ya que permite múltiples opciones de formatos.

La mayoría de los navegadores admiten el estándar de código abierto Ogg, pero algunos (especialmente Safari e IE9) prefieren Mp3. Si proporciona una versión de cada uno, es posible que en cualquier navegador se reproduzca el audio. Utilice la etiqueta <source> para incluir múltiples fuentes de audio:

<audio>

                <source src = "cancion.ogg">

                <source src = "cancion.mp3">

</audio>

Vídeo 

El elemento de vídeo es una de las características más esperadas de HTML 5. Con esta etiqueta, los desarrolladores serán capaces de incrustar vídeos en una página web sin necesidad de un plug-in como Flash.

<video src = "video.ogv" controls>

Su navegador no admite vídeo incorporado a través de HTML5.

</video>

La misma etiqueta <video> es bastante simple de entender, pero la ejecución real es algo complejo. HTML5 indica una etiqueta de vídeo, pero no especifica qué formato apoyará el navegador.

Por el momento, hay tres formatos principales  de vídeo en discordia.

• Ogg / Theora / Vorbis: 
• Ogg es un formato contenedor que se utiliza para la codificación de audio
• Vorbis y Theora para la codificación de vídeo. 
• El sistema de Ogg está apoyado por Firefox, Chrome y Opera. (También es compatible con Safari si el usuario ha instalado el plug-in de QuickTime Vorbis.) IE9 no tiene planes para apoyar este formato en absoluto.
• MP4/H.264/AAC: 
• La norma MP4 es un formato contenedor que utiliza: 
• H.264 para la codificación de vídeo 
• AAC para la codificación de audio. 
• Los tres formatos están sujetos a restricciones de patentes. Este formato es compatible con Safari, Chrome, iPhone y Android. IE tiene previsto apoyar en IE9.
• WebM/VP8/Vorbis: WebM es un estándar relativamente nuevo introducido por Google. 
• Utiliza el formato de codificación de vídeo VP8 y codificación de audio Vorbis. 
• Hay poco apoyo a WebM todavía, pero la mayoría de los navegadores están indicando soporte para el formato en las próximas versiones.

Si desea incorporar vídeo HTML5, utilice la etiqueta <source> para incluir a todos los principales formatos. 

(Puede utilizar el FFmpeg herramienta gratuita disponible para las principales plataformas de software para convertir sus videos.) 

Como opción final, utilice la etiqueta <embed> dentro de su etiqueta <video> para cargar el vídeo con un reproductor de Flash.

Usted puede usar JavaScript para controlar el elemento de vídeo de la misma manera que el control de audio.