Formatos Audio y Video
Las etiquetas <audio> y <video> proporcionan apoyo para la reproducción de audio y video sin necesidad de plug-ins. Codecs de vídeo y codecs de audio se utilizan para manejar vídeo y audio, y los diferentes codecs ofrecen diferentes niveles de compresión y calidad. Un formato de contenedorse utiliza para almacenar y transmitir el vídeo y el audio codificado juntos. Muchos codecs y formatos de contenedor existe, e incluso hay más combinaciones de ellos. Para su uso en la web, sólo un puñado de combinaciones son relevantes.
Diferentes navegadores no soportan los mismos formatos para audio y video en HTML5, principalmente debido a problemas de patentes. El área de formatos de medios en la web ha sufrido mucho por la ley de patentes en muchos paises, incluyendo EE.UU y la UE (La memoria de las patentes en este articulo se proporciona tal cual y sin ningun tipo de garantia.)
Para hacer un vídeo de HTML5, que trabaja en las nuevas versiones de los principales navegadores, puede usar el elemento <source> para reproducir en formatos WebM o el formato AAC MPEG H.264, usando el elemento de origen de esta manera:
<video controls> <source src="somevideo.webm" type="video/webm"> <source src="somevideo.mp4" type="video/mp4"> I'm sorry; your browser doesn't support HTML5 video. <!-- You can embed a Flash player here, to play your mp4 video in older browsers --> </video>
WebMEl formato WebM se basa en una versión restringida del formato contenedor Matroska. Siempre utiliza el códec de vídeo VP8 y el códec de audioVorbis. WebM es soportado nativamente en Gecko (Firefox), Chrome y Opera, y el soporte para el formato se puede agregar a Internet Explorer ySafari mediante la instalación de un add-on.
Declaración de Microsoft sobre por qué IE9 no tiene soporte WebM nativo.
El formato WebM, específicamente el códec de vídeo VP8, habría sido acusado de infracción de derechos de patente por un grupo de empresas deresponder a una llamada por la MPEG LA para la formación de un consorcio de patentes, pero MPEG LA se ha comprometido a licenciar las patentes de Google bajo "transferible y de licencia gratuita". Esto significa, efectivamente, que todas las patentes conocidas en el formato WebMtienen licencia para todo el mundo de forma gratuita.
Gecko reconoce los siguientes tipos MIME para los archivos WebM:
video/webmUn archivo WebM que es capaz de reproducir video (y es posible audio también)audio/webmUn archivo WebM que contiene audio unicamente.Ogg Theora VorbisEl formato contenedor Ogg con el códec de vídeo Theora y el códec de audio Vorbis es compatible con Gecko (Firefox), Chrome y Opera, y elsoporte para el formato se puede agregar a Safari mediante la instalación de un add-on. El formato no es compatible en Internet Explorer.
WebM es preferente, generalmente sobre Theora Ogg Vorbis cuando esté disponible, ya que proporciona una mejor relación de compresión parala calidad y se apoya en más navegadores. El formato Ogg sin embargo, puede ser utilizado para apoyar versiones de los navegadores más antiguos, en los que aún no se dispone de soporte para WebM.
La situación de las patentes de Theora es similar a la de WebM.
Usted puede aprender más sobre la creación de medios Ogg leyendo the Theora Cookbook.
Gecko reconoce los siguientes tipos de MIME para el archivo Ogg:
audio/oggUn archivo Ogg que contiene sólo audio.video/oggUn video que contiene el archivo ogg (y posiblemente audio también).application/oggUn archivo Ogg con el contenido especificado. Utilizando uno de los otros dos tipos MIME es preferido, pero se puede usar esta opción si usted no sabe lo que el contenido del fichero es.Ogg OpusEl contenedor Ogg también puede contener audio codificado con el códec Opus. El apoyo a esta disponible en Gecko 15.0 (Firefox 15.0 / Thunderbird 15.0 / SeaMonkey 2.12) y superior.
MP4 H.264 (AAC o MP3)El formato contenedor MP4 con el códec de vídeo H.264 y, o bien el códec de audio AAC o el códec de audio MP3 es nativamente compatible conInternet Explorer, Safari y Chrome, pero Chromium y Opera no son compatibles con el formato. Firefox pronto admite el formato, pero sólo cuandoun decodificador de terceros esté disponible.
Los formatos MPEG están cubiertos por patentes, que no tienen licencia libre. Todas las licencias necesarias se pueden comprar de MPEG LA.Desde H.264 no está en un formato libre de regalías, no es apto para la plataforma web de código abierto, de acuerdo con Mozilla [1, 2], Google[1, 2] y Opera. Sin embargo, los formatos libres no son compatibles con Internet Explorer y Safari, Mozilla ha decidido apoyar el formato de todos modos, y Google no cumplió su promesa de eliminar el soporte para él en Chrome.
WAVE PCMEl formato contenedor WAVE, con el códec de audio PCM (WAVE codec "1") con el apoyo de Gecko (Firefox), y Safari. Archivos en el formato contenedor WAVE normalmente terminan con la extensión ". wav".
Nota: Consulte RFC 2361 para el registro códec WAVE.
Gecko reconoce los siguientes tipos MIME en archivos de audio WAVE:
Insertando contenido multimediaI
nsertar contenido multimedia en tus documentos HTML
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
Tu navegador no implementa el elemento <code>video</code>.
</video>
Este ejemplo reproduce un vídeo de ejemplo, con los controles de reproducción, desde el sitio Web de Theora.
Este es un ejemplo para insertar audio en tu documento HTML
<audio src="/test/audio.ogg"> <p>Tu navegador no implementa el elemento audio.</p> </audio>
El atributo src puede ser una URL del archivo de audio o la ruta al archivo en el sistema local.
<audio src="audio.ogg" controls autoplay loop> <p>Tu navegador no implementa el elemento audio</p> </audio>
Este código de ejemplo usa los atributos del elemento <audio>:
El atributo preload es usado en el elemento audio para almacenar temporalmente (buffering) archivos de gran tamaño. Este puede tomar uno de 3 valores:
<video controls> <source src="foo.ogg" type="video/ogg">
<source src="foo.mp4" type="video/mp4"> Tu navegador no implementa el elemento <code>video</code>.
</video>
También puedes especificar qué codecs requiere el archivo multimedia; de esta forma el navegador tomará decisiones más inteligentes:
<video controls> <source src="foo.ogg" type="video/ogg; codecs=dirac, speex"> Tu navegador no implementa el elemento <code>video</code>. </video>
Aquí, especificamos que el vídeo usa los codecs Dirac y Speex. Si el navegador implementa Ogg, pero no los codecs especificados, el vídeo no será cargado.
Si el atributo type no está especificado, el tipo de contenido multimedia se obtiene del servidor y se comprueba para ver si el navegador lo puede manejar; si no puede ser mostrado, se comprueba el siguiente source , si ninguno de los elementos source especificados pueden ser usados, un evento de error es enviado al elemento video. Si el atributo type está especificado, es comparado con los tipos que el navegador puede reproducir, y si no es reconocido, no se hace la consulta al servidor; en su lugar, el siguiente source se comprueba una vez.
Mira los eventos del contenido multimedia para una lista completa de eventos asociados con la producción multimedia. Para detalles en los formatos multimedia soportados por los diferentes navegadores, mira los formatos multimedia sportados por los elementos audio y video.
Controlando la reproducción multimediaUna vez que has inscrustado el contenido multimedia en tu documento HTML usando los nuevos elementos, tú puedes controlarlos mediante la programación en JavaScript. Por ejemplo, para iniciar (o reiniciar) la reproducción, puedes hacer esto:
var v = document.getElementsByTagName("video")[0]; v.play();
La primera línea obtiene el primer elemento video en el documento, y la segunda línea llama al método play() del elemento, como está definido en la interfaz nsIDOMHTMLMediaElement que es usda para implementar los elementos multimedia.
Controlando un reproductor de audio en HTML5 para reproducir, pausar, aumentar y disminuir el volumen usando algo de Javascript es demasiado sencillo.
<audio id="demo" src="audio.mp3"></audio> <div> <button onclick="document.getElementById('demo').play()">Reproducir el Audio</button> <button onclick="document.getElementById('demo').pause()">Pausar el Audio</button> <button onclick="document.getElementById('demo').volume+=0.1">Aumentar el Volumen</button> <button onclick="document.getElementById('demo').volume-=0.1">Disminuir el Volumen</button> </div>
Deteniendo la descarga de contenido multimedia
Mientras que detener la reproducción multimedia es tan fácil como llamar al método pause() del elemento, el navegador sigue descargando el contenido multimedia hasta que el elemento multimedia es eliminado a través de la recolección de basura.
Aquí un truco para detener la descarga de una sola vez:
var mediaElement = document.getElementById("myMediaElementID"); mediaElement.pause(); mediaElement.src = "";
Estableciendo una cadena vacía al atributo src del elemento multimedia, tu destruyes el decodificador interno del elemento con lo que detienes la descarga.
Buscando a través de los medios de comunicaciónElementos de los medios de comunicación proporcionan apoyo para mover la posición de reproducción actual a puntos específicos en el contenido de los medios. Esto se hace estableciendo el valor de la horaActual propiedad en el elemento; ver HTMLMediaElementpara más detalles sobre las propiedades del elemento. Basta con establecer el valor en el tiempo, en segundos, con el que desea reproducir para continuar.
Usted puede utilizar el elemento seekable propiedad para determinar los rangos de los medios de comunicación que están disponibles para la búsqueda de la actualidad. Esto devuelve una TimeRanges objeto que enumera los rangos de veces que se puede tratar de:
var mediaElement = document.getElementById('mediaElementID'); mediaElement.seekable.start(); // Returns the starting time (in seconds) mediaElement.seekable.end(); // Returns the ending time (in seconds) mediaElement.currentTime = 122; // Seek to 122 seconds mediaElement.played.end(); // Returns the number of seconds the browser has played
Especificación del rango de reproducciónAl especificar el URI de los medios de comunicación para una <audio> o <video> elemento, puede incluir opcionalmente información adicional para especificar la parte de los medios de comunicación para jugar. Para ello, añada una almohadilla ("#"), seguido de la descripción fragmento de medios de comunicación.
Un intervalo de tiempo se especifica mediante la sintaxis:
#t=[starttime][,endtime]
El tiempo se puede especificar como un número de segundos (como un valor de punto flotante) o como una hora / minuto / segundo tiempo separado con dos puntos (por ejemplo, 2:05:01 durante 2 horas, 5 minutos y 1 segundo).
Algunos ejemplos:
http://foo.com/video.ogg # t = 10,20
Especifica que el vídeo debe desempeñar el rango de 10 segundos a través de 20 segundos.
http://foo.com/video.ogg # t =, 10.5
Especifica que el vídeo se reproducirá desde el principio a través de 10,5 segundos.
http://foo.com/video.ogg # t =, 02:00:00
Especifica que el vídeo se reproducirá desde el principio a través de dos horas.
http://foo.com/video.ogg # t = 60
Especifica que el vídeo debe empezar a jugar a los 60 segundos y jugar hasta el final del vídeo.
Ingrese a http://anavallasuiza.com/share/presentations/html5e/video.html#slide-0
Diferentes navegadores no soportan los mismos formatos para audio y video en HTML5, principalmente debido a problemas de patentes. El área de formatos de medios en la web ha sufrido mucho por la ley de patentes en muchos paises, incluyendo EE.UU y la UE (La memoria de las patentes en este articulo se proporciona tal cual y sin ningun tipo de garantia.)
Para hacer un vídeo de HTML5, que trabaja en las nuevas versiones de los principales navegadores, puede usar el elemento <source> para reproducir en formatos WebM o el formato AAC MPEG H.264, usando el elemento de origen de esta manera:
<video controls> <source src="somevideo.webm" type="video/webm"> <source src="somevideo.mp4" type="video/mp4"> I'm sorry; your browser doesn't support HTML5 video. <!-- You can embed a Flash player here, to play your mp4 video in older browsers --> </video>
WebMEl formato WebM se basa en una versión restringida del formato contenedor Matroska. Siempre utiliza el códec de vídeo VP8 y el códec de audioVorbis. WebM es soportado nativamente en Gecko (Firefox), Chrome y Opera, y el soporte para el formato se puede agregar a Internet Explorer ySafari mediante la instalación de un add-on.
Declaración de Microsoft sobre por qué IE9 no tiene soporte WebM nativo.
El formato WebM, específicamente el códec de vídeo VP8, habría sido acusado de infracción de derechos de patente por un grupo de empresas deresponder a una llamada por la MPEG LA para la formación de un consorcio de patentes, pero MPEG LA se ha comprometido a licenciar las patentes de Google bajo "transferible y de licencia gratuita". Esto significa, efectivamente, que todas las patentes conocidas en el formato WebMtienen licencia para todo el mundo de forma gratuita.
Gecko reconoce los siguientes tipos MIME para los archivos WebM:
video/webmUn archivo WebM que es capaz de reproducir video (y es posible audio también)audio/webmUn archivo WebM que contiene audio unicamente.Ogg Theora VorbisEl formato contenedor Ogg con el códec de vídeo Theora y el códec de audio Vorbis es compatible con Gecko (Firefox), Chrome y Opera, y elsoporte para el formato se puede agregar a Safari mediante la instalación de un add-on. El formato no es compatible en Internet Explorer.
WebM es preferente, generalmente sobre Theora Ogg Vorbis cuando esté disponible, ya que proporciona una mejor relación de compresión parala calidad y se apoya en más navegadores. El formato Ogg sin embargo, puede ser utilizado para apoyar versiones de los navegadores más antiguos, en los que aún no se dispone de soporte para WebM.
La situación de las patentes de Theora es similar a la de WebM.
Usted puede aprender más sobre la creación de medios Ogg leyendo the Theora Cookbook.
Gecko reconoce los siguientes tipos de MIME para el archivo Ogg:
audio/oggUn archivo Ogg que contiene sólo audio.video/oggUn video que contiene el archivo ogg (y posiblemente audio también).application/oggUn archivo Ogg con el contenido especificado. Utilizando uno de los otros dos tipos MIME es preferido, pero se puede usar esta opción si usted no sabe lo que el contenido del fichero es.Ogg OpusEl contenedor Ogg también puede contener audio codificado con el códec Opus. El apoyo a esta disponible en Gecko 15.0 (Firefox 15.0 / Thunderbird 15.0 / SeaMonkey 2.12) y superior.
MP4 H.264 (AAC o MP3)El formato contenedor MP4 con el códec de vídeo H.264 y, o bien el códec de audio AAC o el códec de audio MP3 es nativamente compatible conInternet Explorer, Safari y Chrome, pero Chromium y Opera no son compatibles con el formato. Firefox pronto admite el formato, pero sólo cuandoun decodificador de terceros esté disponible.
Los formatos MPEG están cubiertos por patentes, que no tienen licencia libre. Todas las licencias necesarias se pueden comprar de MPEG LA.Desde H.264 no está en un formato libre de regalías, no es apto para la plataforma web de código abierto, de acuerdo con Mozilla [1, 2], Google[1, 2] y Opera. Sin embargo, los formatos libres no son compatibles con Internet Explorer y Safari, Mozilla ha decidido apoyar el formato de todos modos, y Google no cumplió su promesa de eliminar el soporte para él en Chrome.
WAVE PCMEl formato contenedor WAVE, con el códec de audio PCM (WAVE codec "1") con el apoyo de Gecko (Firefox), y Safari. Archivos en el formato contenedor WAVE normalmente terminan con la extensión ". wav".
Nota: Consulte RFC 2361 para el registro códec WAVE.
Gecko reconoce los siguientes tipos MIME en archivos de audio WAVE:
- audio/wave (preferido)
- audio/wav
- audio/x-wav
- audio/x-pn-wav
Insertando contenido multimediaI
nsertar contenido multimedia en tus documentos HTML
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
Tu navegador no implementa el elemento <code>video</code>.
</video>
Este ejemplo reproduce un vídeo de ejemplo, con los controles de reproducción, desde el sitio Web de Theora.
Este es un ejemplo para insertar audio en tu documento HTML
<audio src="/test/audio.ogg"> <p>Tu navegador no implementa el elemento audio.</p> </audio>
El atributo src puede ser una URL del archivo de audio o la ruta al archivo en el sistema local.
<audio src="audio.ogg" controls autoplay loop> <p>Tu navegador no implementa el elemento audio</p> </audio>
Este código de ejemplo usa los atributos del elemento <audio>:
- controls : Muestra los controles estándar de HTML5 para audio en una página Web.
- autoplay : Hace que el audio se reproduzca automáticamente.
- loop : Hace que el audio se repita automáticamente.
El atributo preload es usado en el elemento audio para almacenar temporalmente (buffering) archivos de gran tamaño. Este puede tomar uno de 3 valores:
- "none" no almacena temporalmente el archivo
- "auto" almacena temporalmente el archivo multimedia
- "metadata" almacena temporalmente sólo los metadatos del archivo
<video controls> <source src="foo.ogg" type="video/ogg">
<source src="foo.mp4" type="video/mp4"> Tu navegador no implementa el elemento <code>video</code>.
</video>
También puedes especificar qué codecs requiere el archivo multimedia; de esta forma el navegador tomará decisiones más inteligentes:
<video controls> <source src="foo.ogg" type="video/ogg; codecs=dirac, speex"> Tu navegador no implementa el elemento <code>video</code>. </video>
Aquí, especificamos que el vídeo usa los codecs Dirac y Speex. Si el navegador implementa Ogg, pero no los codecs especificados, el vídeo no será cargado.
Si el atributo type no está especificado, el tipo de contenido multimedia se obtiene del servidor y se comprueba para ver si el navegador lo puede manejar; si no puede ser mostrado, se comprueba el siguiente source , si ninguno de los elementos source especificados pueden ser usados, un evento de error es enviado al elemento video. Si el atributo type está especificado, es comparado con los tipos que el navegador puede reproducir, y si no es reconocido, no se hace la consulta al servidor; en su lugar, el siguiente source se comprueba una vez.
Mira los eventos del contenido multimedia para una lista completa de eventos asociados con la producción multimedia. Para detalles en los formatos multimedia soportados por los diferentes navegadores, mira los formatos multimedia sportados por los elementos audio y video.
Controlando la reproducción multimediaUna vez que has inscrustado el contenido multimedia en tu documento HTML usando los nuevos elementos, tú puedes controlarlos mediante la programación en JavaScript. Por ejemplo, para iniciar (o reiniciar) la reproducción, puedes hacer esto:
var v = document.getElementsByTagName("video")[0]; v.play();
La primera línea obtiene el primer elemento video en el documento, y la segunda línea llama al método play() del elemento, como está definido en la interfaz nsIDOMHTMLMediaElement que es usda para implementar los elementos multimedia.
Controlando un reproductor de audio en HTML5 para reproducir, pausar, aumentar y disminuir el volumen usando algo de Javascript es demasiado sencillo.
<audio id="demo" src="audio.mp3"></audio> <div> <button onclick="document.getElementById('demo').play()">Reproducir el Audio</button> <button onclick="document.getElementById('demo').pause()">Pausar el Audio</button> <button onclick="document.getElementById('demo').volume+=0.1">Aumentar el Volumen</button> <button onclick="document.getElementById('demo').volume-=0.1">Disminuir el Volumen</button> </div>
Deteniendo la descarga de contenido multimedia
Mientras que detener la reproducción multimedia es tan fácil como llamar al método pause() del elemento, el navegador sigue descargando el contenido multimedia hasta que el elemento multimedia es eliminado a través de la recolección de basura.
Aquí un truco para detener la descarga de una sola vez:
var mediaElement = document.getElementById("myMediaElementID"); mediaElement.pause(); mediaElement.src = "";
Estableciendo una cadena vacía al atributo src del elemento multimedia, tu destruyes el decodificador interno del elemento con lo que detienes la descarga.
Buscando a través de los medios de comunicaciónElementos de los medios de comunicación proporcionan apoyo para mover la posición de reproducción actual a puntos específicos en el contenido de los medios. Esto se hace estableciendo el valor de la horaActual propiedad en el elemento; ver HTMLMediaElementpara más detalles sobre las propiedades del elemento. Basta con establecer el valor en el tiempo, en segundos, con el que desea reproducir para continuar.
Usted puede utilizar el elemento seekable propiedad para determinar los rangos de los medios de comunicación que están disponibles para la búsqueda de la actualidad. Esto devuelve una TimeRanges objeto que enumera los rangos de veces que se puede tratar de:
var mediaElement = document.getElementById('mediaElementID'); mediaElement.seekable.start(); // Returns the starting time (in seconds) mediaElement.seekable.end(); // Returns the ending time (in seconds) mediaElement.currentTime = 122; // Seek to 122 seconds mediaElement.played.end(); // Returns the number of seconds the browser has played
Especificación del rango de reproducciónAl especificar el URI de los medios de comunicación para una <audio> o <video> elemento, puede incluir opcionalmente información adicional para especificar la parte de los medios de comunicación para jugar. Para ello, añada una almohadilla ("#"), seguido de la descripción fragmento de medios de comunicación.
Un intervalo de tiempo se especifica mediante la sintaxis:
#t=[starttime][,endtime]
El tiempo se puede especificar como un número de segundos (como un valor de punto flotante) o como una hora / minuto / segundo tiempo separado con dos puntos (por ejemplo, 2:05:01 durante 2 horas, 5 minutos y 1 segundo).
Algunos ejemplos:
http://foo.com/video.ogg # t = 10,20
Especifica que el vídeo debe desempeñar el rango de 10 segundos a través de 20 segundos.
http://foo.com/video.ogg # t =, 10.5
Especifica que el vídeo se reproducirá desde el principio a través de 10,5 segundos.
http://foo.com/video.ogg # t =, 02:00:00
Especifica que el vídeo se reproducirá desde el principio a través de dos horas.
http://foo.com/video.ogg # t = 60
Especifica que el vídeo debe empezar a jugar a los 60 segundos y jugar hasta el final del vídeo.
Ingrese a http://anavallasuiza.com/share/presentations/html5e/video.html#slide-0