Usando audio y video con HTML5

  • Revision slug: Usando_audio_y_video_con_HTML5
  • Revision title: Usando audio y video con HTML5
  • Revision id: 333609
  • Created:
  • Creator: AngelFQC
  • Is current revision? No
  • Comment

Revision Content

HTML5 introduce soporte integrado para el contenido multimedia gracias a los elementos {{ HTMLElement("audio") }} y {{ HTMLElement("video") }}, ofreciendo la posibilidad de inscrustar contenido multimedia en documentos HTML.

Incrustando contenido multimedia

Inscrustar contenido multimedia en  tus documentos HTML es trivial:

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
  Tu navegador no soporta 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 inscrustar audio en tu documento HTML

<audio src="/test/audio.ogg">
<p>Tu navegador no soporta 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 soporta el elemento audio</p>
</audio>

Este código de ejemplo usa los atributos del elemento {{ HTMLElement("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 {{ HTMLElement("source") }} con el fin de proporcionar vídeo o audio codificados en formatos diferentes para diferentes navegadores. Por ejemplo:

<video controls>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mp4" type="video/mp4">
  Tu navegador no soporta el elemento <code>video</code>.
</video>

Esto reproduce el archivo Ogg en navegadores que soportan el formato Ogg. Si el navegador no soporta Ogg, el navegador usará el archivo MPEG-4. Mira también la lista de los formatos multimedia soportados 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 soporta el elemento <code>video</code>.
</video>

Aquí, especificamos que el vídeo usa los codecs Dirac y Speex. Si el navegador soporta 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 renderizado o mostrado, el siguiente source es comprobado. 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 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 {{ interface("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 como una cadena vacía, tu destruyes el decodificador interno del elemento con lo que detienes la descarga.

Moviendose a través del contenido multimedia

Los elemento multimedia proporcionan soporte para mover la posición de reproducción actual a puntos específicos en el contenido multimedia. Esto se hace estableciendo el valor de la propiedad currentTime en el elemento; mira {{ domxref("HTMLMediaElement") }} para más detalles de las propiedades en los elemntos. Basta con establecer el valor del tiempo, en segundos, en el que desea que continúe la reproducción.

Puedes usar la propiedad seekable para determinar los rangos del contenido multimedia que estan actualmente disponibles para moverse. Esto devuelve un objeto {{ domxref("TimeRanges") }} listando los rangos de tiempo hacia a los que se puede mover.

var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start(0); // Returns the starting time (in seconds)
mediaElement.seekable.end(0);   // Returns the ending time (in seconds)
mediaElement.currentTime = 122; // Seek to 122 seconds
mediaElement.played.end(0);     // Returns the number of seconds the browser has played

Especificando el rango de reproducción

Cuando se especifica la URI del contenido multimedia para un elemento {{ HTMLElement("audio") }} o {{ HTMLElement("video") }}, puedes opcionalmente incluir información adicional para especificar la parte del contenido multimedia a reproducir. Esto se hace, agregando el símbolo de numeral ("#") seguido de la descripción del fragmento del contenido multimedia.

Un rango de tiempo se especifica usando la sintaxis:

#t=[starttime][,endtime]

El tiempo puede ser especificado como un número de segundos (como un valor de punto flotante) o como tiempo en horas/minutos/segundos separados por puntos (por ejemplo 2:05:01 para 2 horas, 5 minutos, y 1 segundo).

Algunos ejemplos:

http://foo.com/vídeo.ogg#t=10,20
Especifica que el video debe reproducirse en el rango de los 10 y 20 segundos.
http://foo.com/vídeo.ogg#t=,10.5
Especifica que el video debe reproducirse desde el inicio hasta los 10.5 segundos.
http://foo.com/vídeo.ogg#t=,02:00:00
Especifica que el video debe reproducirse desde el inicio hasta las 2 horas.
http://foo.com/vídeo.ogg#t=60
Especifica que el vídeo debe empezar a reproducirse en el segundo 60 hasta el final del vídeo.

{{ gecko_callout_heading("9.0") }}

La especificación de URI para reproducción de intervalos de contenido multimedia fue agregada a Gecko 9.0 {{ geckoRelease("9.0") }}. En este momento, esta es la única parte de la especificación de URI para fragmentos de contenido ultimedia implementada por Gecko, y sólo puede ser usado cuando se especifica la fuente para los elementos multimedia, y no en la barra de direcciones.

Opciones de retorno

HTML ha incluido, por ejemplo, que las etiquetas de apertura y cierre de elementos multimedia sea procesada por el navegadores que no soporten contenido multimedia con HTML5. Puedes aprovechar este hecho para proporcionar contenido multimedia de retorno alternativo para esos navegadores.

Esta sección provee dos posibles opciones de retorno para vídeo. En cada caso, if el navegador soporta vídeo con HTML5, este es usado; de otra forma, la opción de retorno es usada.

Usando Flash

Puedes usar Flash para reproducir vídeos en formato Flash format si el elemento {{ HTMLElement("video") }} no es soportado:

<video src="video.ogv" controls>
    <object data="flvplayer.swf" type="application/x-shockwave-flash">
      <param value="flvplayer.swf" name="movie"/>
    </object>
</video>

Ten en cuenta que no se debe incluir classid en la etiqueta object de tal forma que sea compatible con otros navegadores que no sean Internet Explorer.

Reproduciendo vídeos Ogg usando un applet de Java

Existe un applet de Java llamado Cortado que puedes usar como opción para reproducir vídeos Ogg en navegadores que tengan soporte para Java pero no soporten vídeo con HTML5:

<video src="my_ogg_video.ogg" controls width="320" height="240">
  <object type="application/x-java-applet" width="320" height="240">
     <param name="archive" value="cortado.jar">
     <param name="code" value="com.fluendo.player.Cortado.class">
     <param name="url" value="my_ogg_video.ogg">
     <p>Necesitas instalar Java para reproducir este archivo.</p>
  </object>
</video>

Si no creas un elemento hijo alternativo al elemento object de Cortado object,  como el elemento {{ HTMLElement("p") }} anterior, las instalaciones de FireFox 3.5 que manejan el vídeo nativamente pero que no tiene soporte para Java instalado pueden informar incorrectamente al usuario que necesita instalar un plugin para reproducir el archivo.

{{ h1_gecko_minversion("Error handling", "2.0") }}

A partir de Gecko 2.0 {{ geckoRelease("2.0") }}, el manejo de erroes ha sido revisado para hacer que coincidan con la última versión de la especificación HTML5. En ves que el evento de error sea enviado al mismo elemento multimedia, ahora es enviado a los elementos {{ HTMLElement("source") }} hijos que corresponden a la fuente resultante del error.

This lets you detect which sources failed to load, which may be useful. Consider this HTML:

<video>
<source id="mp4_src"
  src="video.mp4"
  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</source>
<source id="3gp_src"
  src="video.3gp"
  type='video/3gpp; codecs="mp4v.20.8, samr"'>
</source>
<source id="ogg_src"
  src="video.ogv"
  type='video/ogg; codecs="theora, vorbis"'>
</source>
</video>

Since Firefox doesn't support MP4 and 3GP due to their patent-encumbered nature, the {{ HTMLElement("source") }} elements with the IDs "mp4_src" and "3gp_src" will receive error events before the Ogg resource is loaded. The sources are tried in the order in which they appear, and once one loads successfully, the remaining sources aren't tried at all.

Detecting when no sources have loaded

To detect that all child {{ HTMLElement("source") }} elements have failed to load, check the value of the media element's networkState attribute. If this is HTMLMediaElement.NETWORK_NO_SOURCE, you know that all the sources failed to load.

If at that point you add another source by inserting a new {{ HTMLElement("source") }} element as a child of the media element, Gecko attempts to load the specified resource.

See also

{{ HTML5ArticleTOC() }}

Revision Source

<p>HTML5 introduce soporte integrado para el contenido multimedia gracias a los elementos {{ HTMLElement("audio") }} y {{ HTMLElement("video") }}, ofreciendo la posibilidad de inscrustar contenido multimedia en documentos HTML.</p>
<h2 id="Incrustando_contenido_multimedia">Incrustando contenido multimedia</h2>
<p>Inscrustar contenido multimedia en&nbsp; tus documentos HTML es trivial:</p>
<div style="overflow:hidden">
  <pre class="brush: html">
&lt;video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls&gt;
  Tu navegador no soporta el elemento &lt;code&gt;video&lt;/code&gt;.
&lt;/video&gt;</pre>
  <p>Este ejemplo reproduce un vídeo de ejemplo, con los controles de reproducción, desde el sitio Web de Theora.</p>
  <p>Este es un ejemplo para inscrustar <em>audio</em> en tu documento HTML</p>
  <pre class="brush: html">
&lt;audio src="/test/audio.ogg"&gt;
&lt;p&gt;Tu navegador no soporta el elemento audio.&lt;/p&gt;
&lt;/audio&gt;</pre>
</div>
<p>El atributo <code>src</code> puede ser una URL del archivo de audio o la ruta al archivo en el sistema local.</p>
<div style="overflow:hidden">
  <pre class="brush: html">
&lt;audio src="audio.ogg" controls autoplay loop&gt;
&lt;p&gt;Tu navegador no soporta el elemento audio&lt;/p&gt;
&lt;/audio&gt;</pre>
</div>
<p>Este código de ejemplo usa los atributos del elemento {{ HTMLElement("audio") }}:</p>
<ul>
  <li><code>controls</code> : Muestra los controles estándar de HTML5 para audio en una página Web.</li>
  <li><code>autoplay</code> : Hace que el audio se reproduzca automáticamente.</li>
  <li><code>loop</code> : Hace que el audio se repita automáticamente.</li>
</ul>
<div style="overflow:hidden">
  <pre class="brush: html">
&lt;audio src="audio.mp3" preload="auto" controls&gt;&lt;/audio&gt;</pre>
</div>
<p>El atributo <code>preload</code> es usado en el elemento audio para almacenar temporalmente (buffering) archivos de gran tamaño. Este puede tomar uno de 3 valores:</p>
<ul>
  <li><code>"none"</code> no almacena temporalmente el archivo</li>
  <li><code>"auto"</code> almacena temporalmente el archivo multimedia</li>
  <li><code>"metadata"</code> almacena temporalmente sólo los metadatos del archivo</li>
</ul>
<p>Se pueden especificar múltiples fuentes de archivos usando el elemento {{ HTMLElement("source") }} <span id="result_box" lang="es"><span class="hps">con el fin de</span> <span class="hps">proporcionar vídeo</span> <span class="hps">o</span> <span class="hps">audio</span> <span class="hps">codificados en formatos</span> <span class="hps">diferentes</span> <span class="hps">para</span> <span class="hps">diferentes navegadores</span></span>. Por ejemplo:</p>
<pre class="brush: html">
&lt;video controls&gt;
  &lt;source src="foo.ogg" type="video/ogg"&gt;
  &lt;source src="foo.mp4" type="video/mp4"&gt;
  Tu navegador no soporta el elemento &lt;code&gt;video&lt;/code&gt;.
&lt;/video&gt;
</pre>
<p>Esto reproduce el archivo Ogg en navegadores que soportan el formato Ogg. Si el navegador no soporta Ogg, el navegador usará el archivo MPEG-4. Mira también la lista de <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">los formatos multimedia soportados por los elementos audio y video</a> en los diferentes navegadores.</p>
<p>También puedes especificar qué codecs requiere el archivo multimedia; de esta forma el navegador tomará decisiones más inteligentes:</p>
<pre class="brush: html">
&lt;video controls&gt;
  &lt;source src="foo.ogg" type="video/ogg; codecs=dirac, speex"&gt;
  Tu navegador no soporta el elemento &lt;code&gt;video&lt;/code&gt;.
&lt;/video&gt;</pre>
<p>Aquí, especificamos que el vídeo usa los codecs Dirac y Speex. Si el navegador soporta Ogg, pero no los codecs especificados, el vídeo no será cargado.</p>
<p>Si el atributo <code>type</code> no está especificado, el tipo de contenido multimedia se obtiene del servidor <span id="result_box" lang="es"><span class="hps">y</span> se <span class="hps">comprueba para</span> <span class="hps">ver</span> <span class="hps">si el navegador</span> <span class="hps">lo puede manejar</span></span>; si no puede ser renderizado o mostrado, el siguiente <code>source</code> es comprobado. si ninguno de los elementos <code>source</code> especificados pueden ser usados, un evento de <code>error</code> es enviado al elemento <code>video</code>. Si el atributo <code>type</code> 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 <code>source</code> se comprueba una vez.</p>
<p>Mira <a href="/en-US/docs/DOM/Media_events" title="https://developer.mozilla.org/en/DOM/Media_events">los eventos del contenido multimedia</a> para una lista completa de eventos asociados con la producción multimedia. Para detalles en los formatos multimedia soportados por los diferentes navegadores, mira <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">los formatos multimedia sportados por los elementos audio y video</a>.</p>
<h2 id="Controlando_la_reproducci.C3.B3n_multimedia">Controlando la reproducción multimedia</h2>
<p>Una 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:</p>
<pre class="brush: js">
var v = document.getElementsByTagName("video")[0];
v.play();
</pre>
<p>La primera línea obtiene el primer elemento video en el documento, y la segunda línea llama al método <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement#play()" title="nsIDOMHTMLMediaElement#play()"><code>play()</code></a> del elemento, como está definido en la interfaz {{ interface("nsIDOMHTMLMediaElement") }} que es usda para implementar los elementos multimedia.</p>
<p>Controlando un reproductor de audio en HTML5 para reproducir, pausar, aumentar y disminuir el volumen usando algo de Javascript es demasiado sencillo.</p>
<pre class="brush: html">
&lt;audio id="demo" src="audio.mp3"&gt;&lt;/audio&gt;
&lt;div&gt;
  &lt;button onclick="document.getElementById('demo').play()"&gt;Reproducir el Audio&lt;/button&gt;
  &lt;button onclick="document.getElementById('demo').pause()"&gt;Pausar el Audio&lt;/button&gt;
  &lt;button onclick="document.getElementById('demo').volume+=0.1"&gt;Aumentar el Volumen&lt;/button&gt;
  &lt;button onclick="document.getElementById('demo').volume-=0.1"&gt;Disminuir el Volumen&lt;/button&gt;
&lt;/div&gt; 
</pre>
<h2 id="Deteniendo_la_descarga_de_contenido_multimedia">Deteniendo la descarga de contenido multimedia</h2>
<p>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 <span id="result_box" lang="es"><span class="hps">a través de</span> <span class="hps">la recolección de basura</span></span>.</p>
<p>Aquí un truco para detener la descarga de una sola vez:</p>
<pre class="brush: js">
var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src = ""; 
</pre>
<p>Estableciendo una cadena vacía al atributo <code>src</code> del elemento multimedia como una cadena vacía, tu destruyes el decodificador interno del elemento con lo que detienes la descarga.</p>
<h2 id="Seeking_through_media">Moviendose a través del contenido multimedia</h2>
<p>Los elemento multimedia <span id="result_box" lang="es"><span class="hps alt-edited">proporcionan soporte</span> <span class="hps">para mover la</span> <span class="hps">posición de reproducción actual</span> <span class="hps alt-edited">a puntos específicos</span></span> en el contenido multimedia. Esto se hace estableciendo el valor de la propiedad <code>currentTime</code> en el elemento; mira {{ domxref("HTMLMediaElement") }} para más detalles de las propiedades en los elemntos. <span id="result_box" lang="es"><span class="hps">Basta con</span> <span class="hps">establecer el valor del</span> <span class="hps">tiempo</span><span>, en segundos,</span> <span class="hps">en el que desea</span> <span class="hps">que continúe</span> <span class="hps">la reproducción</span></span>.</p>
<p>Puedes usar la propiedad <code>seekable</code> para determinar los rangos del contenido multimedia que estan actualmente disponibles para moverse. Esto devuelve un objeto {{ domxref("TimeRanges") }} listando los rangos de tiempo hacia a los que se puede mover.</p>
<pre class="brush: js">
var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start(0); // Returns the starting time (in seconds)
mediaElement.seekable.end(0);   // Returns the ending time (in seconds)
mediaElement.currentTime = 122; // Seek to 122 seconds
mediaElement.played.end(0);     // Returns the number of seconds the browser has played
</pre>
<h2 id="Specifying_playback_range">Especificando el rango de reproducción</h2>
<p>Cuando se especifica la URI del contenido multimedia para un elemento {{ HTMLElement("audio") }} o {{ HTMLElement("video") }}, puedes opcionalmente incluir información adicional para especificar la parte del contenido multimedia a reproducir. Esto se hace, agregando el símbolo de numeral ("#") seguido de la descripción del fragmento del contenido multimedia.</p>
<p>Un rango de tiempo se especifica usando la sintaxis:</p>
<pre>
#t=[starttime][,endtime]</pre>
<p>El tiempo puede ser especificado como un número de segundos (como un valor de punto flotante) o como tiempo en horas/minutos/segundos separados por puntos (por ejemplo 2:05:01 para 2 horas, 5 minutos, y 1 segundo).</p>
<p>Algunos ejemplos:</p>
<dl>
  <dt>
    <span class="nowiki">http://foo.com/v</span>í<span class="nowiki">deo.ogg#t=10,20</span></dt>
  <dd>
    Especifica que el video debe reproducirse en el rango de los 10 y 20 segundos.</dd>
  <dt>
    <span class="nowiki">http://foo.com/v</span>í<span class="nowiki">deo.ogg#t=,10.5</span></dt>
  <dd>
    Especifica que el video debe reproducirse desde el inicio hasta los 10.5 segundos.</dd>
  <dt>
    <span class="nowiki">http://foo.com/v</span>í<span class="nowiki">deo.ogg#t=,02:00:00</span></dt>
  <dd>
    Especifica que el video debe reproducirse desde el inicio hasta las 2 horas.</dd>
  <dt>
    <span class="nowiki">http://foo.com/v</span>í<span class="nowiki">deo.ogg#t=60</span></dt>
  <dd>
    Especifica que el vídeo debe empezar a reproducirse en el segundo 60 hasta el final del vídeo.</dd>
</dl>
<div class="geckoVersionNote" style="undefined">
  <p>{{ gecko_callout_heading("9.0") }}</p>
  <p>La especificación de URI para reproducción de intervalos de contenido multimedia fue agregada a Gecko 9.0 {{ geckoRelease("9.0") }}. En este momento, esta es la única parte de la <a class="external" href="http://www.w3.org/TR/media-frags/" title="http://www.w3.org/TR/media-frags/">especificación de URI para fragmentos de contenido ultimedia</a> implementada por Gecko, y sólo puede ser usado cuando se especifica la fuente para los elementos multimedia, y no en la barra de direcciones.</p>
</div>
<h2 id="Fallback_options">Opciones de retorno</h2>
<p>HTML ha incluido, por ejemplo, que las etiquetas de apertura y cierre de elementos multimedia sea procesada por el navegadores que no soporten contenido multimedia con HTML5. Puedes aprovechar este hecho para proporcionar contenido multimedia de retorno alternativo para esos navegadores.</p>
<p>Esta sección provee dos posibles opciones de retorno para vídeo. En cada caso, if el navegador soporta vídeo con HTML5, este es usado; de otra forma, la opción de retorno es usada.</p>
<h3 id="Using_Flash">Usando Flash</h3>
<p>Puedes usar Flash para reproducir vídeos en formato Flash format si el elemento {{ HTMLElement("video") }} no es soportado:</p>
<pre class="brush: html">
&lt;video src="video.ogv" controls&gt;
    &lt;object data="flvplayer.swf" type="application/x-shockwave-flash"&gt;
      &lt;param value="flvplayer.swf" name="movie"/&gt;
    &lt;/object&gt;
&lt;/video&gt;</pre>
<p>Ten en cuenta que no se debe incluir <code>classid</code> en la etiqueta <code>object</code> de tal forma que sea compatible con otros navegadores que no sean Internet Explorer.</p>
<h3 id="Playing_Ogg_videos_using_a_Java_applet">Reproduciendo vídeos Ogg usando un applet de Java</h3>
<p>Existe un applet de Java llamado <a class="external" href="http://maikmerten.livejournal.com/2256.html" title="http://maikmerten.livejournal.com/2256.html">Cortado</a> que puedes usar como opción para reproducir vídeos Ogg en navegadores que tengan soporte para Java pero no soporten vídeo con HTML5:</p>
<pre class="brush: html">
&lt;video src="my_ogg_video.ogg" controls width="320" height="240"&gt;
  &lt;object type="application/x-java-applet" width="320" height="240"&gt;
     &lt;param name="archive" value="cortado.jar"&gt;
     &lt;param name="code" value="com.fluendo.player.Cortado.class"&gt;
     &lt;param name="url" value="my_ogg_video.ogg"&gt;
     &lt;p&gt;Necesitas instalar Java para reproducir este archivo.&lt;/p&gt;
  &lt;/object&gt;
&lt;/video&gt;</pre>
<p>Si no creas un elemento hijo alternativo al elemento object de Cortado object,&nbsp; como el elemento {{ HTMLElement("p") }} anterior, las instalaciones de FireFox 3.5 que manejan el vídeo nativamente pero que no tiene soporte para Java instalado pueden informar incorrectamente al usuario que necesita instalar un plugin para reproducir el archivo.</p>
<p>{{ h1_gecko_minversion("Error handling", "2.0") }}</p>
<p>A partir de Gecko 2.0 {{ geckoRelease("2.0") }}, el manejo de erroes ha sido revisado para hacer que coincidan con la última versión de la especificación HTML5. En ves que el evento de <code>error</code> sea enviado al mismo elemento multimedia, ahora es enviado a los elementos {{ HTMLElement("source") }} hijos que corresponden a la fuente resultante del error.</p>
<p>This lets you detect which sources failed to load, which may be useful. Consider this HTML:</p>
<pre class="brush: html">
&lt;video&gt;
&lt;source id="mp4_src"
  src="video.mp4"
  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt;
&lt;/source&gt;
&lt;source id="3gp_src"
  src="video.3gp"
  type='video/3gpp; codecs="mp4v.20.8, samr"'&gt;
&lt;/source&gt;
&lt;source id="ogg_src"
  src="video.ogv"
  type='video/ogg; codecs="theora, vorbis"'&gt;
&lt;/source&gt;
&lt;/video&gt;</pre>
<p>Since Firefox doesn't support MP4 and 3GP due to their patent-encumbered nature, the {{ HTMLElement("source") }} elements with the IDs "mp4_src" and "3gp_src" will receive <code>error</code> events before the Ogg resource is loaded. The sources are tried in the order in which they appear, and once one loads successfully, the remaining sources aren't tried at all.</p>
<h3 id="Detecting_when_no_sources_have_loaded">Detecting when no sources have loaded</h3>
<p>To detect that all child {{ HTMLElement("source") }} elements have failed to load, check the value of the media element's <code>networkState</code> attribute. If this is <code>HTMLMediaElement.NETWORK_NO_SOURCE</code>, you know that all the sources failed to load.</p>
<p>If at that point you add another source by inserting a new {{ HTMLElement("source") }} element as a child of the media element, Gecko attempts to load the specified resource.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>The media-related HTML elements: {{ HTMLElement("audio") }}, {{ HTMLElement("video") }}, {{ HTMLElement("source") }};</li>
  <li><a href="/en-US/docs/Manipulating_video_using_canvas" title="Manipulating video using canvas">Manipulating video using canvas</a></li>
  <li><a href="/en-US/docs/Introducing_the_Audio_API_Extension" title="Introducing the Audio API Extension">Introducing the Audio API Extension</a></li>
  <li>{{ interface("nsIDOMHTMLMediaElement") }}</li>
  <li><a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a></li>
  <li><a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a></li>
  <li><a class="external" href="http://popcornjs.org/" title="http://popcornjs.org/">Popcorn.js - The HTML5 Media Framework</a></li>
  <li><a class="external" href="http://www.html5video.org/kaltura-html5/" title="http://www.html5video.org/kaltura-html5/">Kaltura Video Library Solution</a>, a JavaScript library (mwEmbed) which supports a seamless fallback with HTML5, VLC Player, Java Cortado and OMTK Flash Vorbis player. (It is used by Wikimedia)</li>
  <li><a class="external" href="http://omtk.org/flash/index.html" title="http://omtk.org/flash/index.html">OMTK - Flash</a>, a Flash library which implements a Vorbis decoder</li>
  <li><a class="external" href="http://www.projekktor.com" title="http://www.projekktor.com">Projekktor Player</a>, a JavaScript wrapper for audio- and video-tags with flash fallback, open source, GPL</li>
  <li><a class="external" href="http://www.theora.org/cortado/" title="http://www.theora.org/cortado/">Applet Cortado</a>, an audio/video playback solution in Java maintained by Xiph.org</li>
  <li><a class="external" href="http://videojs.com" title="Video.js HTML5 Video Player">Video.JS</a>, an open source HTML5 video player and framework.</li>
  <li><a class="external" href="http://mediaelementjs.com/" title="http://mediaelementjs.com/">MediaElement.js</a> - open source HTML5 audio/video framework with a custom Flash shim that mimic HTML5 media API for older browsers.</li>
  <li><a class="external" href="http://www.hdwebplayer.com" title="http://www.hdwebplayer.com">Flv Player</a> - HTML5 fallback support video player</li>
</ul>
<div>
  {{ HTML5ArticleTOC() }}</div>
<!--- languages({ "fr": "fr/Utilisation_d'audio_et_video_dans_Firefox", "es": "es/Usando_audio_y_video_en_Firefox", "ja": "ja/Using_HTML5_audio_and_video","zh-cn":"zh-cn/Using_HTML5_audio_and_video" }) ---->
Revert to this revision