INSERTAR OBJETOS AUDIO Y VIDEO EN HTML

HTML 4

Objetos

Además de las imágenes, HTML permite incluir en las páginas web otros elementos mucho más complejos, como applets de Java y vídeos en formato QuickTime o Flash. La mayoría de este tipo de contenidos no los interpreta el navegador directamente, sino que hace uso de pequeños programas llamados plugins y que se encargan de tratar con este tipo de elementos complejos.

La etiqueta <object> es la que permite "embeber" o incluir en las páginas HTML cualquier tipo de contenido complejo:

Etiqueta	<object>
Atributos comunes	básicos, internacionalización y eventos
Atributos propios	data = "url" - Indica la URL de los datos que utiliza el objeto classid, codebase, codetype - Información específica que depende del tipo de objeto type - Indica el tipo de contenido de los datos height = "unidad_de_medida" - Indica la altura con la que se debe mostrar el objeto width = "unidad_de_medida" - Indica la anchura con la que se debe mostrar el objeto
Tipo de elemento	Bloque y en línea
Descripción	Se emplea para embeber objetos en los documentos

El atributo data se emplea para indicar la URL del recurso que se va a incluir. El atributo type indica el tipo de contenido de los datos del objeto. Los posibles valores de type están estandarizados y coinciden con los del atributo type de la etiqueta <a> que se explicó anteriormente.

El propio estándar de HTML incluye ejemplos de uso de esta etiqueta. Incluir un vídeo en formato MPEG:

<object data="PlanetaTierra.mpeg" type="application/mpeg" />

También se pueden incluir varias versiones alternativas de un mismo contenido. Así, si el navegador no es capaz de interpretar el formato por defecto, puede optar por cualquiera de los otros formatos alternativos:

<object title="La Tierra vista desde el espacio" classid="http://www.observer.mars/TheEarth.py">
  <!-- Formato alternativo en forma de vídeo -->
  <object data="PlanetaTierra.mpeg" type="application/mpeg">
    <!-- Otro formato alternativo mediante una imagen GIF -->
    <object data="PlanetaTierra.gif" type="image/gif">
      <!-- Si el navegador no soporta ningún formato, se muestra el siguiente texto -->
      La <strong>Tierra</strong> vista desde el espacio.
    </object>
  </object>
</object>

A los objetos también se les puede pasar información adicional en forma de parámetros mediante la etiqueta <param>:

Etiqueta	<param>
Atributos comunes	id
Atributos propios	name = "texto" - Indica el nombre del parámetro value = "texto" - Indica el valor del parámetro
Tipo de elemento	Etiqueta vacía
Descripción	Se emplea para indicar el valor de los parámetros del objeto

Las etiquetas <param> siempre se incluyen en el interior de las etiquetas <object>:

<object data="..." type="...">
  <param name="parametro1" value="40" />
  <param name="parametro2" value="20" />
  <param name="parametro3" value="texto de prueba" />
</object>

Uno de los principales inconvenientes de <object> es la forma de incluir vídeos en formato Flash en las páginas HTML. Si se utiliza el siguiente código:

<object data="nombre_video.swf" type="application/x-shockwave-flash"></object>

El elemento anterior es correcto desde el punto de vista técnico, pero provoca que algunos navegadores como Internet Explorer no visualicen el vídeo hasta que se ha descargado completamente. Si se trata de un vídeo largo, esta solución no es válida para el usuario.

Por este motivo, se utiliza una solución alternativa para incluir vídeos Flash en las páginas HTML: el uso de la etiqueta <embed>. Aunque esta solución funciona correctamente, no se trata de una solución válida desde el punto de vista del estándar de XHTML, por lo que las páginas que incluyan esta solución no pasarán correctamente el proceso de validación.

Etiqueta	<embed>
Atributos comunes	básicos, internacionalización y eventos
Atributos propios	src = "url" - Indica la URL del archivo u objeto que se incluye en la página type = "tipo_de_contenido" - Indica el tipo de contenido del objeto (flash, quicktime, java, etc.) height = "unidad_de_medida" - Indica la altura con la que se debe mostrar el objeto width = "unidad_de_medida" - Indica la anchura con la que se debe mostrar el objeto
Tipo de elemento	Bloque
Descripción	Se emplea para embeber objetos en los documentos

Este es el motivo por el que los sitios web más populares de vídeos en formato Flash proporcionan un código similar al siguiente para incluir sus vídeos en las páginas HTML:

<object width="425" height="350">
  <param name="movie" value="http://www.youtube.com/v/MsH0rBWCYjs"></param>
  <param name="wmode" value="transparent"></param>
  <embed src="http://www.youtube.com/v/MsH0rBWCYjs" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>
</object>

Una vez más, se debe tener en cuenta que la solución anterior de utilizar la etiqueta <embed> es correcta desde el punto de vista del usuario (no tiene que esperar a que el vídeo se descargue completamente para poder verlo) pero no es una solución técnicamente válida, ya que la etiqueta<embed> no es parte del estándar XHTML.

Usando audio y video con HTML5

HTML5 introduce soporte integrado para el contenido multimedia gracias a los elementos <audio> y <video>, ofreciendo la posibilidad de insertar contenido multimedia en documentos HTML.

Insertando contenido multimedia

Insertar contenido multimedia en  tus documentos HTML es trivial:

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

<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

<audio width="300" height="32" src="micancion.mp3" controls="controls" autoplay="autoplay" preload="">

</audio>