Multimedia HTML

Insertando contenido multimedia

Insertar contenido multimedia en tus documentos HTML es muy sencillo:

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

El atributo src puede ser una URL del archivo de audio o la ruta al archivo en el sistema local.

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.

<audio src="audio.mp3" preload="auto" controls></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:

•"none" no almacena temporalmente el archivo

•"auto" almacena temporalmente el archivo multimedia •"metadata" almacena temporalmente sólo los metadatos del archivo

Se pueden especificar múltiples fuentes de archivos usando el elemento <source> con el fin de proporcionar vídeo o audio codificados en formatos diferentespara diferentes navegadores. Por ejemplo:

<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>

Esto reproduce el archivo Ogg en navegadores que admiten el formato Ogg. Si el navegador no admite Ogg, el navegador usará el archivo MPEG-4. Mira también la lista de los formatos multimedia admitidos por los elementos audio y video en los diferentes navegadores.

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 multimedia

Una vez que has incrustado el contenido multimedia en tu documento HTML usando los nuevos elementos, puedes controlarlos mediante programación en JavaScript. Por ejemplo, para iniciar (o reiniciar) la reproducción, puedes hacer esto:

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> Tu navegador no implementa el elemento <code>video</code>.

</video>

<audio src="/test/audio.ogg">

<p>Tu navegador no implementa el elemento audio.</p> </audio>

<audio src="audio.ogg" controls autoplay loop> <p>Tu navegador no implementa el elemento audio</p> </audio>



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 interfaznsIDOMHTMLMediaElement que es usada para implementar los elementos multimedia.

Controlar un reproductor de audio en HTML5 para reproducir, pausar, aumentar y disminuir el volumen usando algo de Javascript es muy 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();

...