Using audio and video in Firefox

Hubo errores de script en esta página. Mientras los editores del sitio lo solucionan, puedes ver un contenido parcial debajo.

{{ gecko_minversion_header("1.9.1") }}

Firefox 3.5 introduced support for the HTML 5 audio and video elements, offering the ability to easily embed media into HTML documents.  For details on media formats supported by Firefox, see Media formats supported by the audio and video elements.

Embedding media

Embedding media in your HTML document is trivial:

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
  Your browser does not support the <code>video</code> element.
</video>

This example plays a sample video from the Theora web site, for example.

Multiple source files can be specified using the source element in order to provide video/audio encoded in different formats for different browsers. For instance:

<video controls>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mp4">
  Your browser does not support the <code>video</code> element.
</video>

will by play the Ogg file in browsers supporting the Ogg format. If the browser doesn't support Ogg, it should attempt to use the MPEG-4 file.

You may also specify which codecs the media file requires; this allows the browser to make even more intelligent decisions:

<video controls>
  <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
  Your browser does not support the <code>video</code> element.
</video>

Here, we specify that the video uses the Dirac and Speex codecs. If the browser supports Ogg, but not the specified codecs, the video will not load.

If the type attribute isn't specified, the media's type is retrieved from the server and checked to see if Gecko can handle it; if it can't be rendered, the next source is checked.  If none of the specified source elements can be used, an error event is dispatched to the video element.  If the type attribute is specified, it's compared against the types Gecko can play, and if it's not recognized, the server doesn't even get queried; instead, the next source is checked at once.

Controlling media playback

Once you've embedded media into your HTML document using the new elements, you can programmatically control them from your JavaScript code.  For example, to start (or restart) playback, you can do this:

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

The first line fetches the first video element in the document, and the second calls the element's play() method, as defined in the {{ interface("nsIDOMHTMLMediaElement") }} interface that is used to implement the media elements.

Media events

Various events are sent when handling media:

Event name Description
abort Sent when playback is aborted; for example, if the media is playing and is restarted from the beginning, this event is sent.
canplay Sent when enough data is available that the media can be played, at least for a couple of frames.  This corresponds to the CAN_PLAY readyState.
canplaythrough Sent when the ready state changes to CAN_PLAY_THROUGH, indicating that the entire media can be played without interruption, assuming the download rate remains at least at the current level.
canshowcurrentframe The current frame has loaded and can be presented.  This corresponds to the CAN_SHOW_CURRENT_FRAME readyState.
dataunavailable Sent when the ready state changes to DATA_UNAVAILABLE.
durationchange The metadata has loaded or changed, indicating a change in duration of the media.  This is sent, for example, when the media has loaded enough that the duration is known.
emptied The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
empty Sent when an error occurs and the media is empty.
ended Sent when playback completes.
error Sent when an error occurs.  The element's error attribute contains more information.
loadeddata The first frame of the media has finished loading.
loadedmetadata The media's metadata has finished loading; all attributes now contain as much useful information as they're going to.
loadstart Sent when loading of the media begins.
pause Sent when playback is paused.
play Sent when playback starts or resumes.
progress

Sent periodically to inform interested parties of progress downloading the media. The progress event has three attributes:

lengthComputable
true if the total size of the media file is known, otherwise false.
loaded
The number of bytes of the media file that have been received so far.
total
The total number of bytes in the media file.
ratechange Sent when the playback speed changes.
seeked Sent when a seek operation completes.
seeking Sent when a seek operation begins.
suspend {{ gecko_minversion_inline("1.9.2") }} Sent when loading of the media is suspended; this may happen either because the download has completed or because it has been paused for any other reason.
timeupdate The time indicated by the element's currentTime attribute has changed.
volumechange Sent when the audio volume changes (both when the volume is set and when the muted attribute is changed).
waiting Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).

{{ 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.") }}

You can easily watch for these events, using code such as the following:

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

This example fetches the first video element in the document and attaches an event listener to it, watching for the seeked event, which is sent whenever a seek operation completes.  The listener simply calls the element's play() method, which starts playback.

Then, in line 4, the example sets the element's currentTime attribute to 10.0, which initiates a seek operation to the 10-second mark in the media.  This causes a seeking event to be sent when the operation begins, then a seeked event to be dispatched when the seek is completed.

In other words, this example seeks to the 10-second mark in the media, then begins playback as soon as that's finished.

Fallback options

HTML included between, for example, the <video> and </video> tags is processed by browsers that don't support HTML 5 media. You can take advantage of this fact to provide alternative fallback media for those browsers.

This section provides two possible fallback options for video. In each case, if the browser supports HTML 5 video, that is used; otherwise, the fallback option is used.

Using Flash

You can use Flash to play a Flash format movie if the video element isn't supported:

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

Note that you shouldn't include classid in the object tag in order to be compatible with browsers other than Internet Explorer.

Playing Ogg videos using a Java applet

There's a Java applet called Cortado that you can use as a fallback to play Ogg videos in browsers that have Java support but don't support HTML 5 video:

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

If you do not create an alternate child element of the cortado object element, such as the <p> element above, FireFox 3.5 installs that handle the video natively but do not have Java installed will incorrectly inform the user that they need to install a plugin to view content on the page.

See also

{{ languages( { "fr": "fr/Utilisation_d'audio_et_video_dans_Firefox" },  { "es": "es/Usar_audio_y_vídeo_en_Firefox" }) }}

Etiquetas y colaboradores del documento

Etiquetas:
Colaboradores de esta página: Izel
Última actualización por: Izel,