Usar audio y vídeo en Firefox

  • Enlace amigable (slug) de la revisión: Usar_audio_y_vídeo_en_Firefox
  • Título de la revisión: Usar audio y vídeo en Firefox
  • Id de la revisión: 287040
  • Creada:
  • Creador: inma_610
  • ¿Es la revisión actual? No
  • Comentario 1058 words added, 577 words removed

Contenido de la revisión

{{ gecko_minversion_header("1.9.1") }}

Firefox 3.5 implementa por primera vez los elementos de HTML 5 audio y video, ofrece la posibilidad de incrustar fácilmente contenido multimedia dentro de documentos HTML. Actualmente, sólo maneja los formatos multimedia Ogg y WAV, pero se espera que en el futuro llege el apoyo de otros formatos.

Incrustar medios

Incrustar medios en tu documento HTML es algo trivial:

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

Este ejemplo muestra un vídeo de prueba de la web de Theora, por ejemplo.

Es posible especificar múltiples fuentes de ficheros utilizando el elemento source para proporcionar vídeo/audio codificado en distintos formatos para difertes navegadores. Por ejemplo:

<video autoplay>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mov">
  Tu navegador no permite el uso del elemento <code>video</code>.
</video>

puede mostrar el fichero OGG a para los navegadores que permiten el uso del formato Ogg. Si el navegador no permite Ogg entonces debería intentar utilizar el fichero MOV.

Nota: El elemento source no está totalmente implementado en Firefox por ahora. Mira {{ bug(449363) }} para más detalles.

Controlar la reproducción de medio

Una vez tienes incrustado un medio en el documento HTML utilizando los nuevos elementos, puedes controlarlo programáticamente desde tu código JavaScript.  Por ejemplo, para arrancar (o volver a arrancar) el vídeo, puedes hacer esto:

var v = document.getElementsByTagName("video")[0];
v.play();

La primera línea obtiene el primer elemento video del documento, y la segunda llama al método play() del elemento, como está definido en la {{ interface("nsIDOMHTMLMediaElement") }} interfaz que se utiliza para aplicar a los elementos multimedia.

Eventos multimedia

Distintos eventos se lanzan cuando se manejan medios:

Nombre del evento Descripción
abort Se envía cuando se interrumpe la reproducción; si se está reproduciendo el archivo multimedia y se reinicia desde el principio, se envía este evento.
canplay Se envía cuando hay disponibles suficientes datos para que el archivo multimedia pueda reproducirse, al menos durante varios marcos. Corresponde a CAN_PLAY readyState.
canplaythrough Se envía cuando el estado Listo cambia a CAN_PLAY_THROUGH, lo que indica que se puede reproducir el archivo multimedia completo sin ninguna interrupción, suponiendo que la velocidad de descarga continúe al menos en el nivel actual.
canshowcurrentframe Se ha cargado el marco activo y puede presentarse. Corresponde a CAN_SHOW_CURRENT_FRAME readyState.
dataunavailable Se envía cuando el estado Listo cambia a DATA_UNAVAILABLE.
durationchange Los metadatos se han cargado o han cambiado, lo que indica un cambio en la duración del archivo multimedia. Se envía, por ejemplo, cuando el archivo multimeda se ha cargado lo bastante como para que se conozca la duración.
emptied El archivo multimedia está vacío; se envía este evento, por ejemplo, si el multimedia ya se ha cargado (o se ha cargado parcialmente) y se llama al método load() para que vuelva a cargarlo.
empty Se envía cuando se produce un error y el archivo multimedia está vacío.
ended Se envía cuando se completa la reproducción.
error Se envía cuando se produce un error. El atributo error del elemento contiene más información.
loadeddata El primer marco del multimedia ha terminado de cargarse.
loadedmetadata Los metadatos del multimedia han terminado de cargarse; todos los atributos contienen ya toda la información útil.
loadstart Se envía cuando comienza a cargarse el multimedia.

mozaudioavailable

{{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }}

Se envía cuando se proporciona un búfer de audio a la capa de audio para procesar el sonido; el búfer contiene muestras de audio sin procesar que tal vez se hayan reproducido ya antes de que recibas el evento.
pause Se envía cuando se pausa la reproducción.
play Se envía cuando se inicia o se reanuda la reproducción.
progress

Se envía de forma periódica para informar a las partes interesadas del progreso de la descarga del multimedia. El evento del progreso tiene tres atributos:

lengthComputable
true si se conoce el tamaño total del archivo multimedia, de lo contrario false.
loaded
El número de octetos del archivo multimedia que se han recibido hasta ahora.
total
El número total de octetos del fichero multimedia.
ratechange Se envía cuando cambia la velocidad de reproducción.
seeked Se envía cuando se completa una operación de búsqueda.
seeking Se envía cuando comienza una operación de búsqueda.
suspend {{ gecko_minversion_inline("1.9.2") }} Se envía cuando se suspende la carga del multimedia; esto puede ocurrir bien porque la descarga se haya completado, bien porque se haya pausado por cualquier razón.
timeupdate El tiempo que indica el atributo currentTime del elemento ha cambiado.
volumechange Se envía cuando el volumen de audio cambia (tanto al configurarse el volumen, como al cambiarse el atributo muted).
waiting Se envía cuando la operación solicitada (como por ejemplo reproducir) se retrasa en función de la finalización de otra operación (como por ejemplo una búsqueda).

{{ gecko_minversion_note("1.9.2", "Gecko 1.9.2 removed the load event, which was not fired reliably and in fact should not be used.") }}

Puedes observar fácilmente estos eventos si usas código como el siguiente:

var v = document.getElementsByTagName("video")[0];
v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
v.currentTime = 10.0;

Este ejemplo captura el primer elemento de video del documento y le adjunta un oyente de evento, que observa el evento buscado; éste se envía siempre que se completa una operación de búsqueda. El oyente simplemente llama al método play() y éste inicia la reproducción.

A continuación, en la línea 4, el ejemplo establece el atributo currentTime del elemento a 10.0, lo que inicia una operación de búsqueda hasta la marca del segundo 10. Esto hace que se envíe un evento seeking al iniciar la operación y después un evento , seeked al completar la búsqueda.

Dicho de otro modo, este ejemplo busca hasta la marca del segundo 10 en el multimedia y después inicia la reproducción en el momento en que finalice la búsqueda.

Opciones de reserva

Los navegadores que no admiten multimedia HTML 5 procesan el HTML incluido entre, por ejemplo, las etiquetas <video> y </video>. Puedes aprovechar este hecho para proporcionar multimedia de reserva alternativo para esos navegadores.

Esta sección ofrece dos posibles opciones de reserva para video. En cada caso, se usa video HTML 5 si el navegador lo admite; de lo contrario, se usa la opción de reserva.

Usar Flash

Puedes usar Flash para reproducir una película en formato Flash si no se admite el elemento {{ HTMLElement("video") }} :

<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 debes incluir classid en la etiqueta object para hacerlo así compatible con navegadores que no sean Internet Explorer.

Reproducir videos Ogg a través de un applet Java

Existe un applet de Java llamado Cortado que puedes usar como reserva para reproducir videos Ogg en navegadores que son compatibles con Java pero no lo son con video HTML 5:

<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>You need to install Java to play this file.</p>
  </object>
</video>

Si no creas un elemento secundario alternativo del elemento de objeto Cortado, como por ejemplo el elemento <p> anterior, Firefox 3.5 instala el controlador de video de forma nativa sin tener Java instalado, lo que transmitirá al usuario la información errónea de que tiene que instalar un plugin para ver el contenido de la pantalla .

Consulta también

Interwiki Language Links

 


Categorias

{{ languages( { "fr": "fr/Utilisation_d'audio_et_video_dans_Firefox", "en": "en/Using_audio_and_video_in_Firefox" } ) }}

 {{ languages( { "es": "es/Etiquetas audio y video en Firefox" } ) }}

Fuente de la revisión

<p>{{ gecko_minversion_header("1.9.1") }}</p>
<p>Firefox 3.5 implementa por primera vez los elementos de HTML 5 <a class="internal" href="/En/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a> y <a class="internal" href="/En/HTML/Element/Video" title="En/HTML/Element/Video"><code>video</code></a>, ofrece la posibilidad de incrustar fácilmente contenido multimedia dentro de documentos HTML. Actualmente, sólo maneja los formatos multimedia Ogg y WAV, pero se espera que en el futuro llege el apoyo de otros formatos.</p>
<h2 id="Incrustar_medios">Incrustar medios</h2>
<p>Incrustar medios en tu documento HTML es algo trivial:</p>
<pre class="brush: html">&lt;video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" autoplay&gt;
  Tu navegador no permite el uso del elemento &lt;code&gt;video&lt;/code&gt;.
&lt;/video&gt;
</pre>
<p>Este ejemplo muestra un vídeo de prueba de la web de Theora, por ejemplo.</p>
<p>Es posible especificar múltiples fuentes de ficheros utilizando el elemento <a class="internal" href="/En/HTML/Element/Source" title="En/HTML/Element/Source"><code>source</code></a> para proporcionar vídeo/audio codificado en distintos formatos para difertes navegadores. Por ejemplo:</p>
<pre class="brush: html">&lt;video autoplay&gt;
  &lt;source src="foo.ogg" type="video/ogg"&gt;
  &lt;source src="foo.mov"&gt;
  Tu navegador no permite el uso del elemento &lt;code&gt;video&lt;/code&gt;.
&lt;/video&gt;
</pre>
<p>puede mostrar el fichero OGG a para los navegadores que permiten el uso del formato Ogg. Si el navegador no permite Ogg entonces debería intentar utilizar el fichero MOV.</p>
<div class="note"><strong>Nota: </strong>El elemento source no está totalmente implementado en Firefox por ahora. Mira {{ bug(449363) }} para más detalles.</div>
<h2 id="Controlar_la_reproducci.C3.B3n_de_medio">Controlar la reproducción de medio</h2>
<p>Una vez tienes incrustado un medio en el documento HTML utilizando los nuevos elementos, puedes controlarlo programáticamente desde tu código JavaScript.  Por ejemplo, para arrancar (o volver a arrancar) el vídeo, 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 del documento, y la segunda llama al método <a class="external" href="/En/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement#play()" title="https://developer.mozilla.org/editor/fckeditor/core/editor/En/NsIDOMHTMLMediaElement#play()"><code>play()</code></a> del elemento, como está definido en la {{ interface("nsIDOMHTMLMediaElement") }} interfaz que se utiliza para aplicar a los elementos multimedia.</p>
<h2 id="Eventos_multimedia">Eventos multimedia</h2>
<p>Distintos eventos se lanzan cuando se manejan medios:</p>
<table class="standard-table"> <tbody> <tr> <th>Nombre del evento</th> <th>Descripción</th> </tr> <tr> <td><code>abort</code></td> <td>Se envía cuando se interrumpe la reproducción; si se está reproduciendo el archivo multimedia y se reinicia desde el principio, se envía este evento.</td> </tr> <tr> <td><code>canplay</code></td> <td>Se envía cuando hay disponibles suficientes datos para que el archivo multimedia pueda reproducirse, al menos durante varios marcos. Corresponde a <code>CAN_PLAY</code> <code>readyState</code>.</td> </tr> <tr> <td><code>canplaythrough</code></td> <td>Se envía cuando el estado Listo cambia a <code>CAN_PLAY_THROUGH</code>, lo que indica que se puede reproducir el archivo multimedia completo sin ninguna interrupción, suponiendo que la velocidad de descarga continúe al menos en el nivel actual.</td> </tr> <tr> <td><code>canshowcurrentframe</code></td> <td>Se ha cargado el marco activo y puede presentarse. Corresponde a <code>CAN_SHOW_CURRENT_FRAME</code> <code>readyState</code>.</td> </tr> <tr> <td><code>dataunavailable</code></td> <td>Se envía cuando el estado Listo cambia a <code>DATA_UNAVAILABLE</code>.</td> </tr> <tr> <td><code>durationchange</code></td> <td>Los metadatos se han cargado o han cambiado, lo que indica un cambio en la duración del archivo multimedia. Se envía, por ejemplo, cuando el archivo multimeda se ha cargado lo bastante como para que se conozca la duración.</td> </tr> <tr> <td><code>emptied</code></td> <td>El archivo multimedia está vacío; se envía este evento, por ejemplo, si el multimedia ya se ha cargado (o se ha cargado parcialmente) y se llama al método <a class="internal" href="/En/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="en/nsIDOMHTMLMediaElement"><code>load()</code></a> para que vuelva a cargarlo.</td> </tr> <tr> <td><code>empty</code></td> <td>Se envía cuando se produce un error y el archivo multimedia está vacío.</td> </tr> <tr> <td><code>ended</code></td> <td>Se envía cuando se completa la reproducción.</td> </tr> <tr> <td><code>error</code></td> <td>Se envía cuando se produce un error. El atributo<code> error</code> del elemento contiene más información.</td> </tr> <tr> <td><code>loadeddata</code></td> <td>El primer marco del multimedia ha terminado de cargarse.</td> </tr> <tr> <td><code>loadedmetadata</code></td> <td>Los metadatos del multimedia han terminado de cargarse; todos los atributos contienen ya toda la información útil.</td> </tr> <tr> <td><code>loadstart</code></td> <td>Se envía cuando comienza a cargarse el multimedia.</td> </tr> <tr> <td> <p><code>mozaudioavailable</code></p> <p>{{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }}</p> </td> <td>Se envía cuando se proporciona un búfer de audio a la capa de audio para procesar el sonido; el búfer contiene muestras de audio sin procesar que tal vez se hayan reproducido ya antes de que recibas el evento.</td> </tr> <tr> <td><code>pause</code></td> <td>Se envía cuando se pausa la reproducción.</td> </tr> <tr> <td><code>play</code></td> <td>Se envía cuando se inicia o se reanuda la reproducción.</td> </tr> <tr> <td><code>progress</code></td> <td> <p>Se envía de forma periódica para informar a las partes interesadas del progreso de la descarga del multimedia. El evento del progreso tiene tres atributos:</p> <dl> <dt><code>lengthComputable</code></dt> <dd>true si se conoce el tamaño total del archivo multimedia, de lo contrario false.</dd> <dt><code>loaded</code></dt> <dd>El número de octetos del archivo multimedia que se han recibido hasta ahora.</dd> <dt><code>total</code></dt> <dd>El número total de octetos del fichero multimedia.</dd> </dl> </td> </tr> <tr> <td><code>ratechange</code></td> <td>Se envía cuando cambia la velocidad de reproducción.</td> </tr> <tr> <td><code>seeked</code></td> <td>Se envía cuando se completa una operación de búsqueda.</td> </tr> <tr> <td><code>seeking</code></td> <td>Se envía cuando comienza una operación de búsqueda.</td> </tr> <tr> <td><code>suspend</code> {{ gecko_minversion_inline("1.9.2") }}</td> <td>Se envía cuando se suspende la carga del multimedia; esto puede ocurrir bien porque la descarga se haya completado, bien porque se haya pausado por cualquier razón.</td> </tr> <tr> <td><code>timeupdate</code></td> <td>El tiempo que indica el atributo <code>currentTime</code> del elemento ha cambiado.</td> </tr> <tr> <td><code>volumechange</code></td> <td>Se envía cuando el volumen de audio cambia (tanto al configurarse el volumen, como al cambiarse el atributo <code>muted</code>).</td> </tr> <tr> <td><code>waiting</code></td> <td>Se envía cuando la operación solicitada (como por ejemplo reproducir) se retrasa en función de la finalización de otra operación (como por ejemplo una búsqueda).</td> </tr> </tbody>
</table>
<p>{{ gecko_minversion_note("1.9.2", "Gecko 1.9.2 removed the <code>load</code> event, which was not fired reliably and in fact should not be used.") }}</p>
<p>Puedes observar fácilmente estos eventos si usas código como el siguiente:</p>
<pre class="brush: js">var v = document.getElementsByTagName("video")[0];
v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
v.currentTime = 10.0;
</pre>
<p>Este ejemplo captura el primer elemento de video del documento y le adjunta un oyente de evento, que observa el evento buscado; éste se envía siempre que se completa una operación de búsqueda. El oyente simplemente llama al método <code>play()</code> y éste inicia la reproducción.</p>
<p>A continuación, en la línea 4, el ejemplo establece el atributo <code>currentTime</code> del elemento a 10.0, lo que inicia una operación de búsqueda hasta la marca del segundo 10. Esto hace que se envíe un evento <code>seeking</code> al iniciar la operación y después un evento , <code>seeked</code> al completar la búsqueda.</p>
<p>Dicho de otro modo, este ejemplo busca hasta la marca del segundo 10 en el multimedia y después inicia la reproducción en el momento en que finalice la búsqueda.</p>
<h2 id="Opciones_de_reserva">Opciones de reserva</h2>
<p>Los navegadores que no admiten multimedia HTML 5 procesan el HTML incluido entre, por ejemplo, las etiquetas <code>&lt;video&gt;</code> y <code>&lt;/video&gt;</code>. Puedes aprovechar este hecho para proporcionar multimedia de reserva alternativo para esos navegadores.</p>
<p>Esta sección ofrece dos posibles opciones de reserva para video. En cada caso, se usa video HTML 5 si el navegador lo admite; de lo contrario, se usa la opción de reserva.</p>
<h3 id="Usar_Flash">Usar Flash</h3>
<p>Puedes usar Flash para reproducir una película en formato Flash si no se admite el elemento {{ HTMLElement("video") }} :</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 debes incluir <code>classid</code> en la etiqueta <code>object</code> para hacerlo así compatible con navegadores que no sean Internet Explorer.</p>
<h3 id="Reproducir_videos_Ogg_a_trav.C3.A9s_de_un_applet_Java">Reproducir videos Ogg a través de un applet 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 reserva para reproducir videos Ogg en navegadores que son compatibles con Java pero no lo son con video HTML 5:</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;You need to install Java to play this file.&lt;/p&gt;
  &lt;/object&gt;
&lt;/video&gt;
</pre>
<p>Si no creas un elemento secundario alternativo del elemento de objeto Cortado, como por ejemplo el elemento &lt;p&gt; anterior, Firefox 3.5 instala el controlador de video de forma nativa sin tener Java instalado, lo que transmitirá al usuario la información errónea de que tiene que instalar un plugin para ver el contenido de la pantalla .</p>
<h2 id="Consulta_tambi.C3.A9n
">Consulta también<a class="internal" href="/En/Manipulating_video_using_canvas" title="En/Manipulating video using canvas"><br>
</a></h2>
<ul> <li>Los elementos HTML relacionados con multimedia: {{ HTMLElement("audio") }}, {{ HTMLElement("video") }}, {{ HTMLElement("source") }};</li> <li><a class="internal" href="/En/Manipulating_video_using_canvas" title="En/Manipulating video using canvas">Manipular video usando canvas</a></li> <li>{{ interface("nsIDOMHTMLMediaElement") }}</li> <li><a class="internal" href="/es/Formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio" title="https://developer.mozilla.org/es/Formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio">Formatos multimedia admitidos por elementos de audio y video</a></li> <li><a class="external" href="http://en.flossmanuals.net/TheoraCookbook" title="http://en.flossmanuals.net/TheoraCookbook">Theora Cookbook</a></li> <li><a class=" external" href="http://www.html5video.org/kaltura-html5/" title="http://www.html5video.org/kaltura-html5/">Solución de la Videoteca Kaltura </a>, una biblioteca JavaScript (mwEmbed) que admite una reserva sin interrupción de HTML5, VLC Player, Java Cortado y el reproductor OMTK Flash Vorbis. (Lo usa Wikipedia)</li> <li><a class=" external" href="http://omtk.org/flash/index.html" title="http://omtk.org/flash/index.html">OMTK - Flash</a>, una biblioteca Flash que implementa el descodificador Vorbis</li> <li><a class=" external" href="http://www.projekktor.com/" title="http://www.projekktor.com">Projekktor Player</a>, un contenedor JavaScript para etiquetas audio - y video- con reserva flash, código abierto, GPL</li> <li><a class=" external" href="http://www.theora.org/cortado/" title="http://www.theora.org/cortado/">Applet Cortado</a>, una solución de reproducción para audio/video en Java mantenida por Xiph.org</li>
</ul>
<p><span class="comment">Interwiki Language Links</span></p>
<p> </p>
<p><br>
<span class="comment">Categorias</span></p>
<p>{{ languages( { "fr": "fr/Utilisation_d'audio_et_video_dans_Firefox", "en": "en/Using_audio_and_video_in_Firefox" } ) }}</p>
<p> {{ languages( { "es": "es/Etiquetas audio y video en Firefox" } ) }}</p>
Revertir a esta revisión