Using audio and video in Firefox

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=&quot;dirac, speex&quot;">
  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 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.
loadedfirstframe	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 Requires Gecko 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 1.9.2 note

Gecko 1.9.2 removed the load event, which was not fired reliably and in fact should not be 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.