Media element error format error опера как исправить ошибку

Comments

  static parse(uri, request, requestType, progressUpdate, options) {
    const parts = uri.split(':');
    const path = parts.slice(1).join(':');
    return shaka.util.AbortableOperation.notAbortable(PlayerPlatformPlugin.loadManifest(path, options))
      .chain((manifest) => {  // returns an mp4 URL and we do HttpFetchPlugin.parse 
        return shaka.net.HttpFetchPlugin.parse(PlayerPlatformPlugin.manifestParser(manifest), request, requestType, progressUpdate);
      }).chain((response) => {
        /** @type {shaka.extern.Response} */
        const res = {
          uri: response.uri,
          originalUri: response.uri,
          data: response.data,
          headers: { ...response.headers, 'content-type': mimeType }
        };
        return res;
      });
  }

player.load('myplugin:https//url', null, 'video/mp4')

import shaka from '../../../node_modules/shaka-player/dist/shaka-player.ui';
import { UAParser } from 'ua-parser-js';

export const PlayerPlatformPlugin = class {
  /**
   * @param uri
   * @param request
   * @param requestType
   * @param progressUpdate
   * @param options
   * @return {Promise<shaka.util.AbortableOperation<shaka.extern.Response>|shaka.util.AbortableOperation<any>>}
   */
  static parse(uri, request, requestType, progressUpdate, options) {
    try {
      const parts = uri.split(':');
      const path = parts.slice(1).join(':');
      let mimeType;
      return shaka.util.AbortableOperation.notAbortable(PlayerPlatformPlugin.loadManifest(path, options))
        .chain((manifest) => {
          if (manifest.hls) {
            mimeType = 'application/x-mpegURL';
          } else {
            mimeType = 'video/mp4';
          }
          return shaka.net.HttpFetchPlugin.parse(PlayerPlatformPlugin.manifestParser(manifest), request, requestType, progressUpdate);
        }).chain((response) => {
          /** @type {shaka.extern.Response} */
          const res = {
            uri: response.uri,
            originalUri: response.uri,
            data: response.data,
            headers: { ...response.headers, 'content-type': mimeType }
          };
          console.log(res);
          return shaka.util.AbortableOperation.completed(res);
        });
    } catch (e) {
      return shaka.util.AbortableOperation.failed(e);
    }
  }

  /**
   * Load manifest from playPlatform
   * source can be a videoId or the full url pointing to the manifest (hls, mpd, etc ...)
   *
   */
  static async loadManifest(source, playerPlatformConfig = null) {
    let response;

    // TODO is it good enough as a test to differentiate full url from videoId
    if (source.includes('https://') || source.includes('http://')) {
      response = await fetch(source);
    } else {
      // else if videoId match a regex pattern
      if (playerPlatformConfig) {
        const endpoint = playerPlatformConfig.endpoint;
        const publicKey = playerPlatformConfig.publicKey;
        const hash = playerPlatformConfig.hash; 
        const expiresAt = playerPlatformConfig.expiresAt;

        response = await fetch(endpoint + '/' + source + '/' + publicKey + '/' + hash + '/' + expiresAt);
      }
      // throw new Error(`Incorrect config for PlayerPlatform asset/manifest`);
    }

    if (!response.ok) {
      throw new Error(`Erreur HTTP ! statut : ${response.status}`);
    }

    return await response.json();
  }

  /**
   * PlayerPlatform parser utils. Choose an mp4 video file URL from available in manifest.
   * @param data
   * @param maxFormat
   * @return {*}
   */
  static getMp4Video(playerPlatformManifest, maxFormat) {
    const listFormat = [720, 540, 480, 360, 240];
    for (let i = 0; i <= listFormat.length; i++) {
      if (listFormat[i] <= maxFormat) {
        if (typeof (playerPlatformManifest.mp4[listFormat[i]]) !== 'undefined') {
          return playerPlatformManifest.mp4[listFormat[i]];
        }
      }
    }
    throw new Error('Erreur getMp4Video');
  }

  /**
   * Player platform manifest parser
   * Choose between hls and mp4 file.
   * @param playerPlatformManifest
   * @return {*}
   */
  static manifestParser(playerPlatformManifest) {
    const ua = (new UAParser()).getResult();

    if (typeof (playerPlatformManifest.hls) !== 'undefined') {
      return playerPlatformManifest.hls;
    }

    /**
     * Arbitrary resolution chosen for device type
     * Unable to add the list of mp4 in the resolution select of shaka player
     */
    if (typeof (playerPlatformManifest.mp4) !== 'undefined') {
      if (ua.device.type === 'mobile') {
        return this.getMp4Video(playerPlatformManifest, 480);
      } else if (ua.device.type === 'tablet') {
        return this.getMp4Video(playerPlatformManifest, 540);
      } else {
        return this.getMp4Video(playerPlatformManifest, 720);
      }
    }

    throw new Error('Erreur selectFlux');
  }
};

Содержание

1. Как быстро исправить ошибку HTML5
2. Что значит ошибка HTML5
3. Как исправить ошибку HTML5 в видеоплеере
4. Дополнительные способы устранения ошибки HTML5
5. MEDIA_ELEMENT_ERROR: Format error #3722
6. Comments
7. Как исправить: MEDIA_ERR_SRC_NOT_SUPPORTED в Opera?
8. Отключить Opera VPN
9. Включить трекеры
10. Очистить кеш и данные
11. Отключить флаги мультимедиа
12. Переключиться на другой браузер
13. Твики для старых сборок Opera
14. Итог: исправление ошибки Opera Media

An img is always in one of the following states:

Unavailable

The user agent hasn’t obtained any image data.

Partially available

The user agent has obtained some of the image data.

Completely available

The user agent has obtained all of the image data and at least
the image dimensions are available.

Broken

The user agent has obtained all of the image data that it can,
but it cannot even decode the image enough to get the image
dimensions (e.g. the image is corrupted, or the format is not
supported, or no data could be obtained).

When an img element is either in the partially
available state or in the completely available state, it is
said to be available.

An img element is initially unavailable.

When an img element is available, it
provides a paint source whose width is the image’s intrinsic width, whose height is
the image’s intrinsic height, and whose appearance is the intrinsic appearance of the image.

In a browsing context where scripting is
disabled, user agents may obtain images immediately or on demand. In a browsing
context where scripting is enabled, user agents
must obtain images immediately.

A user agent that obtains images immediately must synchronously update the image
data of an img element whenever that element is created with a src attribute.
A user agent that obtains images immediately must also synchronously
update the image data of an img element whenever that element has its
src or crossorigin attribute set, changed, or removed.

A user agent that obtains images on demand must update the image data of an
img element whenever it needs the image data (i.e. on demand), but only if the
img element has a src

attribute, and only if the img element is in the
unavailable state. When an img element’s src or crossorigin attribute set, changed, or removed, if the user
agent only obtains images on demand, the img element must return to the unavailable state.

Each img element has a last selected source, which must initially be
null, and a current pixel density, which must initially be undefined.

When an img element has a current pixel density that is not 1.0, the
element’s image data must be treated as if its resolution, in device pixels per CSS pixels, was
the current pixel density.

For example, if the current pixel density is 3.125, that means
that there are 300 device pixels per CSS inch, and thus if the image data is 300×600, it has an
intrinsic dimension of 96 CSS pixels by 192 CSS pixels.

Each Document object must have a list of available images. Each image
in this list is identified by a tuple consisting of an absolute URL, a CORS
settings attribute mode, and, if the mode is not No
CORS, an origin. User agents may copy entries from one Document
object’s list of available images to another at any time (e.g. when the
Document is created, user agents can add to it all the images that are loaded in
other Documents), but must not change the keys of entries copied in this way when
doing so. User agents may also remove images from such lists at any time (e.g. to save
memory).

When the user agent is to update the image data of an img element, it
must run the following steps:

1. Return the img element to the unavailable
   state.

2. If an instance of the fetching algorithm is still running for
   this element, then abort that algorithm, discarding any pending tasks generated by that algorithm.

3. Forget the img element’s current image data, if any.

4. If the user agent cannot support images, or its support for images has been disabled, then
   abort these steps.

5. Otherwise, if the element has a src attribute specified and
   its value is not the empty string, let selected source be the value of the
   element’s src attribute, and selected pixel
   density be 1.0. Otherwise, let selected source be null and selected pixel density be undefined.

6. Let the img element’s last selected source be selected source and the img element’s current pixel
   density be selected pixel density.

7. If selected source is not null, run these substeps:

   1. Resolve selected source, relative
      to the element. If that is not successful, abort these steps.

   2. Let key be a tuple consisting of the resulting absolute
      URL, the img element’s crossorigin
      attribute’s mode, and, if that mode is not No CORS,
      the Document object’s origin.

   3. If the list of available images contains an entry for key, then set the img element to the completely
      available state, update the presentation of the image appropriately, queue a
      task to fire a simple event named load at the
      img element, and abort these steps.

8. Asynchronously await a stable state, allowing the task that invoked this algorithm to continue. The synchronous
   section consists of all the remaining steps of this algorithm until the algorithm says the
   synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

9. ⌛ If another instance of this algorithm for this img element was started
   after this instance (even if it aborted and is no longer running), then abort these steps.

   Only the last instance takes effect, to avoid multiple requests when, for
   example, the src
   and crossorigin attributes are all set in
   succession.

10. ⌛ If selected source is null, then set the element to the broken state, queue a task to fire a simple
    event named error at the img element, and
    abort these steps.

11. ⌛ Queue a task to fire a progress event named loadstart at
    the img element.

12. ⌛ Do a potentially CORS-enabled fetch of the absolute
    URL that resulted from the earlier step, with the mode being the current state of the
    element’s crossorigin content attribute, the origin being the origin of the img element’s
    Document, and the default origin behaviour set to taint.

    The resource obtained in this fashion, if any, is the img element’s image data.
    It can be either CORS-same-origin or CORS-cross-origin; this affects
    the origin of the image itself (e.g. when used on a canvas).

    Fetching the image must delay the load event of the element’s document until the
    task that is queued by the
    networking task source once the resource has been fetched (defined below) has been run.

    This, unfortunately, can be used to perform a rudimentary port scan of the
    user’s local network (especially in conjunction with scripting, though scripting isn’t actually
    necessary to carry out such an attack). User agents may implement cross-origin access control policies that are stricter than those
    described above to mitigate this attack, but unfortunately such policies are typically not
    compatible with existing Web content.

    If the resource is CORS-same-origin, each task
    that is queued by the networking task source
    while the image is being fetched must fire a progress
    event named progress at the img
    element.

13. End the synchronous section, continuing the remaining steps asynchronously,
    but without missing any data from the fetch algorithm.

14. As soon as possible, jump to the first applicable entry from the following list:

    If the resource type is multipart/x-mixed-replace

    The next task that is queued by the networking task source while the image is being fetched must set the img element’s state to partially available.

    Each task that is queued by the networking task source while the image is being fetched must update the presentation of the image, but as each new
    body part comes in, it must replace the previous image. Once one body part has been completely
    decoded, the user agent must set the img element to the completely available state and queue a task to fire
    a simple event named load at the img
    element.

    The progress and loadend events are not fired for
    multipart/x-mixed-replace image streams.

    If the resource type and data corresponds to a supported image format, as described below

    The next task that is queued by the networking task source while the image is being fetched must set the img element’s state to partially available.

    That task, and each subsequent task, that is queued by the
    networking task source while the image is being fetched must update the presentation of the image appropriately (e.g. if
    the image is a progressive JPEG, each packet can improve the resolution of the image).

    Furthermore, the last task that is queued by the networking task source once the resource has been
    fetched must additionally run the steps for the matching entry in
    the following list:

    If the download was successful and the user agent was able to determine the image’s width and height

    1. Set the img element to the completely
       available state.

    2. Add the image to the list of available images using the key key.

    3. If the resource is CORS-same-origin: fire a progress event
       named load at the img element.

       If the resource is CORS-cross-origin: fire a simple event named
       load at the img element.

    4. If the resource is CORS-same-origin: fire a progress event
       named loadend at the img element.

       If the resource is CORS-cross-origin: fire a simple event named
       loadend at the img element.

    Otherwise

    1. Set the img element to the broken
       state.

    2. If the resource is CORS-same-origin: fire a progress event
       named load at the img element.

       If the resource is CORS-cross-origin: fire a simple event named
       load at the img element.

    3. If the resource is CORS-same-origin: fire a progress event
       named loadend at the img element.

       If the resource is CORS-cross-origin: fire a simple event named
       loadend at the img element.

    Otherwise

    Either the image data is corrupted in some fatal way such that the image dimensions cannot
    be obtained, or the image data is not in a supported file format; the user agent must set the
    img element to the broken state, abort the fetching algorithm, discarding any pending tasks generated by that algorithm, and then queue a
    task to first fire a simple event named error at the img element and then fire a simple
    event named loadend at the img
    element.

While a user agent is running the above algorithm for an element x, there
must be a strong reference from the element’s Document to the element x, even if that element is not in its
Document.

When an img element is in the completely available
state and the user agent can decode the media data without errors, then the
img element is said to be fully decodable.

Whether the image is fetched successfully or not (e.g. whether the response code was a 2xx code
or equivalent) must be ignored when determining
the image’s type and whether it is a valid image.

This allows servers to return images with error responses, and have them
displayed.

The user agent should apply the image sniffing rules to determine the type of the image, with the image’s associated Content-Type headers giving the official
type. If these rules are not applied, then the type of the image must be the type given by
the image’s associated Content-Type headers.

User agents must not support non-image resources with the img element (e.g. XML
files whose root element is an HTML element). User agents must not run executable code (e.g.
scripts) embedded in the image resource. User agents must only display the first page of a
multipage resource (e.g. a PDF file). User agents must not allow the resource to act in an
interactive fashion, but should honor any animation in the resource.

This specification does not specify which image types are to be supported.

What an img element represents depends on the src attribute and the alt
attribute.

If the src attribute is set and the alt attribute is set to the empty string

The image is either decorative or supplemental to the rest of the content, redundant with
some other information in the document.

If the image is available and the user agent is configured
to display that image, then the element represents the element’s image data.

Otherwise, the element represents nothing, and may be omitted completely from
the rendering. User agents may provide the user with a notification that an image is present but
has been omitted from the rendering.

If the src attribute is set and the alt attribute is set to a value that isn’t empty

The image is a key part of the content; the alt attribute
gives a textual equivalent or replacement for the image.

If the image is available and the user agent is configured
to display that image, then the element represents the element’s image data.

Otherwise, the element represents the text given by the alt attribute. User agents may provide the user with a notification
that an image is present but has been omitted from the rendering.

If the src attribute is set and the alt attribute is not

There is no textual equivalent of the image available.

If the image is available and the user agent is configured
to display that image, then the element represents the element’s image data.

Otherwise, the user agent should display some sort of indicator that there is an image that
is not being rendered, and may, if requested by the user, or if so configured, or when required
to provide contextual information in response to navigation, provide caption information for the
image, derived as follows:

1. If the image is a descendant of a figure element that has a child
   figcaption element, and, ignoring the figcaption element and its
   descendants, the figure element has no Text node descendants other
   than inter-element whitespace, and no embedded content descendant
   other than the img element, then the contents of the first such
   figcaption element are the caption information; abort these steps.

2. There is no caption information.

If the src attribute is not set and either the alt attribute is set to the empty string or the alt attribute is not set at all

The element represents nothing.

Otherwise

The element represents the text given by the alt attribute.

The alt attribute does not represent advisory information.
User agents must not present the contents of the alt attribute
in the same way as content of the title attribute.

While user agents are encouraged to repair cases of missing alt attributes, authors must not rely on such behavior. Requirements for providing text to act as an alternative for images are described
in detail below.

The contents of img elements, if any, are ignored for the purposes of
rendering.

The alt, src
IDL attributes must reflect the
respective content attributes of the same name.

The crossOrigin IDL attribute must
reflect the crossorigin content attribute,
limited to only known values.

The useMap IDL attribute must
reflect the usemap content attribute.

The isMap IDL attribute must reflect
the ismap content attribute.

The IDL attributes width and height must return the rendered width and height of the
image, in CSS pixels, if the image is being rendered, and is being rendered to a
visual medium; or else the intrinsic width and height of the image, in CSS pixels, if the image is
available but not being rendered to a visual medium; or else 0, if
the image is not available. [CSS]

On setting, they must act as if they reflected the respective
content attributes of the same name.

The IDL attributes naturalWidth and naturalHeight must return the intrinsic width and
height of the image, in CSS pixels, if the image is available, or
else 0. [CSS]

The IDL attribute complete must return true if
any of the following conditions is true:

• Both the src attribute and the srcset attribute are omitted.
• The srcset attribute is omitted and the src attribute’s value is the empty string.
• The final task that is queued by the networking task source once the resource has been fetched has been queued.
• The img element is completely available.
• The img element is broken.

Otherwise, the attribute must return false.

The value of complete can thus change while
a script is executing.

A constructor is provided for creating HTMLImageElement objects (in addition to
the factory methods from DOM such as createElement()): Image(width, height).
When invoked as a constructor, this must return a new HTMLImageElement object (a new
img element). If the width argument is present, the new object’s
width content attribute must be set to width. If the height argument is also present, the new object’s
height content attribute must be set to height. The element’s document must be the active document of the
browsing context of the Window object on which the interface object of
the invoked constructor is found.

In this example, a user is asked to pick her preferred color
from a list of three. Each color is given by an image, but for
users who cannot view the images,
the color names are included within the alt attributes of the images:

  <ul>
  <li><a href="red.html"><img src="red.jpeg" alt="Red"></a></li>
  <li><a href="green.html"><img src="green.jpeg" alt="Green"></a></li>
  <li><a href="blue.html"><img src="blue.jpeg" alt="Blue"></a></li>
  </ul>
  

In this example, a link contains a logo. The link points to the W3C web site from an external site. The text alternative is
a brief description of the link target.

  <a href="http://w3.org">
  <img src="images/w3c_home.png" width="72" height="48" alt="W3C web site">
  </a>
  

This example is the same as the previous example, except that the link is on the W3C web site. The text alternative is
a brief description of the link target.

  <a href="http://w3.org">
  <img src="images/w3c_home.png" width="72" height="48" alt="W3C home">
  </a>
  

In this example, a link contains a print preview icon. The link points to a version of the page with a
print stylesheet applied. The text alternative is a brief description of the link target.

  <a href="preview.html">
  <img src="images/preview.png" width="32" height="30" alt="Print preview.">
  </a>
  

In this example, a button contains a search icon. The button submits a search form. The text alternative is a
brief description of what the button does.

  <button>
  <img src="images/search.png" width="74" height="29" alt="Search">
  </button>
  

In this example, a company logo for the PIP Corporation has been split into the following two images,
the first containing the word PIP and the second with the abbreviated word CO. The images are the
sole content of a link to the PIPCO home page. In this case a brief description of the link target is provided.
As the images are presented to the user as a single entity the text alternative PIP CO home is in the
alt attribute of the first image.

  <a href="pipco-home.html">
  <img src="pip.gif" alt="PIP CO home"><img src="co.gif" alt="">
  </a>
  

In the following example we have an image of a pie chart, with text in the alt attribute
representing the data shown in the pie chart:

  <img src="piechart.gif" alt="Pie chart: Browser Share - Internet Explorer 25%, Firefox 40%, Chrome 25%, Safari 6% and Opera 4%.">
  

In the case where an image repeats the previous paragraph in graphical form. The alt attribute content labels the image.

 <p>According to a recent study Firefox has a 40% browser share, Internet Explorer has 25%, Chrome has 25%, Safari has 6% and Opera has 4%.</p>
 <p><img src="piechart.gif" alt="Pie chart representing the data in the previous paragraph."></p>

It can be seen that when the image is not available, for example because the src attribute value is incorrect, the text alternative provides the user with a brief description of the image content:

Here’s an example of a flowchart image, with a short text alternative
included in the alt attribute, in this case the text alternative is a description of the link target
as the image is the sole content of a link. The link points to a description, within the same document, of the
process represented in the flowchart.

  
  <a href="#desc"><img src="flowchart.gif" alt="Flowchart: Dealing with a broken lamp."></a>

  ...

  ...

  <div id="desc">
  <h2>Dealing with a broken lamp</h2>
  <ol>
  <li>Check if it's plugged in, if not, plug it in.</li>
  <li>If it still doesn't work; check if the bulb is burned out. If it is, replace the bulb.</li>
  <li>If it still doesn't work; buy a new lamp.</li>
  </ol>
  </div>

In this example, there is an image of a chart. It would be inappropriate to provide the information depicted in
the chart as a plain text alternative in an alt attribute as the information is a data set. Instead a
structured text alternative is provided below the image in the form of a data table using the data that is represented
in the chart image.

Indications of the highest and lowest rainfall for each season have been included in the
table, so trends easily identified in the chart are also available in the data table.

Average rainfall in millimetres by country and season.

  <img src="rainchart.gif" alt="Bar chart: Average rainfall in millimetres by Country and Season.">
  <table>
  <caption>Rainfall in millimetres by Country and Season.</caption>
  <tr><td><th scope="col">UK <th scope="col">Japan<th scope="col">Australia</tr>
  <tr><th scope="row">Spring <td>5.5 (highest)<td>2.4 <td>2 (lowest)</tr>
  <tr><th scope="row">Summer <td>4.5 (highest)<td>3.4<td>2 (lowest)</tr>
  <tr><th scope="row">Autumn <td>3.5 (highest) <td>1.8 <td>1.5 (lowest)</tr>
  <tr><th scope="row">Winter <td>1.5 (highest) <td>1.2 <td>1 lowest</tr>
  </table>
  

This example shows an image of the text «Get Happy!» written in a fancy multi colored freehand style.
The image makes up the content of a heading. In this case the text alternative for the image is «Get Happy!».

<h1><img src="gethappy.gif" alt="Get Happy!"></h1>

In this example we have an advertising image consisting of text, the phrase «The BIG sale» is
repeated 3 times, each time the text gets smaller and fainter, the last line reads «…ends Friday»
In the context of use, as an advertisement, it is recommended that the image’s text alternative only include the text «The BIG sale»
once as the repetition is for visual effect and the repetition of the text for users who cannot view
the image is unnecessary and could be confusing.

  <p><img src="sale.gif" alt="The BIG sale ...ends Friday."></p>
  

In situations where there is also a photo or other graphic along with the image of text,
ensure that the words in the image text are included in the text alternative, along with any other description
of the image that conveys meaning to users who can view the image, so the information is also
available to users who cannot view the image.

In this example from 1997, a new-fangled currency symbol that looks like a curly E with two
bars in the middle instead of one is represented using an image. The alternative text gives the
character’s pronunication.

Only 5.99!

<p>Only <img src="euro.png" alt="euro ">5.99!

An illuminated manuscript might use graphics for some of its letters. The text alternative in
such a situation is just the character that the image represents.

nce upon a time and a long long time ago…

<p><img src="initials/fancyO.png" alt="O">nce upon a time and a long long time ago...

Consider an image containing a pie chart and associated text. It is recommended wherever
possible to provide any associated text as text, not an image of text.
If this is not possible include the text in the text alternative along with the pertinent information
conveyed in the image.

  <p><img src="figure1.gif" alt="Figure 1. Distribution of Articles by Journal Category. 
  Pie chart: Language=68%, Education=14% and Science=18%."></p>
  

Here’s another example of the same pie chart image,
showing a short text alternative included in the alt attribute
and a longer text alternative in text. The figure and figcaption
elements are used to associate the longer text alternative with the image. The alt attribute is used
to label the image.

  <figure>
  <img src="figure1.gif" alt="Figure 1">
  <figcaption><strong>Figure 1.</strong> Distribution of Articles by Journal Category. 
  Pie chart: Language=68%, Education=14% and Science=18%.</figcaption>
  </figure>
  

The advantage of this method over the previous example is that the text alternative
is available to all users at all times. It also allows structured mark up to be used in the text
alternative, where as a text alternative provided using the alt attribute does not.

Here is an example of an image closely related to the subject matter of the page content
but not directly discussed. An image of a painting inspired by a poem, on a page reciting that poem.
The following snippet shows an example. The image is a painting titled the «Lady of Shallot», it is
inspired by the poem and its subject matter is derived from the poem. Therefore it is strongly
recommended that a text alternative is provided. There is a short description of the content of
the image in the alt attribute and
a link below the image to a longer description located at the bottom of the document. At the end
of the longer description there is also a link to further information about the painting.

  <header>
  <h1>The Lady of Shalott</h1>
  <p>A poem by Alfred Lord Tennyson</p>
  </header>

  <img src="shalott.jpeg" alt="Painting of a  young woman with long hair, sitting in a wooden boat. ">
  <p><a href="#des">Description of the painting</a>.</p>


  <!-- Full Recitation of Alfred, Lord Tennyson's Poem.  -->

  ...
  ...
  ...
  <p id="des">The woman in the painting is wearing a flowing white dress. A large piece of intricately 
  patterned fabric is draped over the side. In her right hand she holds the chain mooring the boat. Her expression 
  is mournful. She stares at a crucifix lying in front of her. Beside it are three candles. Two have blown out. 
  <a href="http://bit.ly/5HJvVZ">Further information about the painting</a>.</p>
  

It is not always easy to write a useful text alternative for an image, another option is to provide a link to a
description or further information about the image when one is available.

In this example of the same image, there is a short text alternative included in the alt attribute, and
there is a link after the image. The link points to a page containing information about the painting.

The Lady of Shalott
A poem by Alfred Lord Tennyson.

About this painting.

Full recitation of Alfred, Lord Tennyson’s poem.

  <header><h1>The Lady of Shalott</h1>
  <p>A poem by Alfred Lord Tennyson</p></header>
  <figure>
  <img src="shalott.jpeg" alt="Painting of a woman in a white flowing dress, sitting in a small boat.">
  <p><a href="http://bit.ly/5HJvVZ">About this painting.</a></p>
  </figure>
  <!-- Full Recitation of Alfred, Lord Tennyson's Poem.  -->
  

Here’s an example of an image being used as a decorative banner for a person’s blog, the image offers no information
and so an empty alt attribute is used.

  <header>
  <div><img src="border.gif" alt="" width="400" height="30"></div>
  <h1>Clara's Blog</h1>
  </header>
  <p>Welcome to my blog...</p>
  

I you.

I <img src="heart.png" alt="love"> you.

My breaks.

My <img src="heart.png" alt="heart"> breaks.

In this example, a picture representing a company logo for the PIP Corporation
has been split into two pieces, the first containing the letters «PIP» and the second with the word «CO».
The text alternatve PIP CO is in the alt attribute of the first image.

  <img src="pip.gif" alt="PIP CO"><img src="co.gif" alt="">
  

In the following example, a rating is shown as three filled
stars and two empty stars. While the text alternative could have
been «★★★☆☆», the author has
instead decided to more helpfully give the rating in the form «3
out of 5». That is the text alternative of the first image, and the
rest have empty alt attributes.

  <p>Rating: <meter max=5 value=3>
  <img src="1" alt="3 out of 5">
  <img src="1" alt=""><img src="1" alt="">
  <img src="0" alt=""><img src="0" alt="">
  </meter></p>
  

Consider the following image which is a map of Katoomba,
it has 2 interactive regions corresponding to the areas of North and South Katoomba:

The text alternative is a brief description of the image. The alt attribute on each
of the area elements provides text describing the content of the target page of each linked region:

<p>View houses for sale in North Katoomba or South Katoomba:</p>
 <p><img src="imagemap.png" width="209" alt="Map of Katoomba" height="249" usemap="#Map">

 <map name="Map"> 
 <area shape="poly" coords="78,124,124,10,189,29,173,93,168,132,136,151,110,130" 
 href="north.html" alt="Houses in North Katoomba">
 <area shape="poly" coords="66,63,80,135,106,138,137,154,167,137,175,133,144,240,49,223,17,137,17,61" 
 alt="Houses in South Katoomba" href="south.html">
 </map> 

In the following example, a composite picture is used to represent a «crocoduck»; a fictional creature which
defies evolutionary principles by being part crocodile and part duck. You are asked to interact with the
crocoduck, but you need to exercise caution…

  <h1>The crocoduck</h1>
  <p>You encounter a strange creature called a "crocoduck". 
  The creature seems angry! Perhaps some friendly stroking will help to calm 
  it, but be careful not to stroke any crocodile parts. This would just enrage 
  the beast further.</p>
  <a href="?stroke=head"><img src="crocoduck1.png" alt="Stroke crocodile's angry, chomping head"></a> 
  <a href="?stroke=body"><img src="crocoduck2.png" alt="Stroke duck's soft, feathery body"></a>  
  

This first example shows an image uploaded to a photo-sharing site. The photo is of a cat, sitting in the bath. The image has a
text alternative provided using the img element’s alt attribute. It also has a caption provided by including
the img element in a figure element and using a figcaption element to identify the caption text.

Lola prefers a bath to a shower.

  <figure>
  <img src="664aef.jpg" alt="Lola the cat sitting under an umbrella in the bath tub.">
  <figcaption>Lola prefers a bath to a shower.</figcaption>
  </figure>
  

This example is of an image that defies a complete description, as the subject of the image is open to interpretation.
The image has a text alternative in the alt attribute which gives users who cannot view the image a sense
of what the image is. It also has a caption provided by including the img element in a figure
element and using a figcaption element to identify the caption text.

The first of the ten cards in the Rorschach test.

<figure>
  <img src="Rorschach1.jpg" alt="An abstract, freeform, vertically symmetrical, black inkblot on a light background.">
  <figcaption>The first of the ten cards in the Rorschach test.</figcaption>
  </figure> 

This example is fairly typical; the title and a time stamp are included in the image, automatically generated
by the webcam software. It would be better if the text information was not included in the image, but as it is part
of the image, include it part of the text alternative. A caption is also provided using the figure
and figcaption elements. As the image is provided to give a visual indication of the current weather near a building,
a link to a local weather forecast is provided, as with automatically generated and uploaded webcam images it may be impractical to
provide such information as a text alternative.

The text of the alt attribute includes a prose version of the timestamp, designed to make the text more
understandable when announced by text to speech software. The text alternative also includes a description of some aspects
of what can be seen in the image which are unchanging, although weather conditions and time of day change.

View from the top of Sopwith house, looking towards North Kingston. This image is updated every hour.

View the latest weather details for Kingston upon Thames.

<figure>
  <img src="webcam1.jpg" alt="Sopwith house weather cam. Taken on the 21/04/10 at 11:51 and 34 seconds.
  In the foreground are the safety rails on the flat part of the roof. Nearby there are low rise industrial buildings,
  beyond are blocks of flats. In the distance there's a church steeple.">
  <figcaption>View from Sopwith house, looking towards north Kingston. This image is updated every hour.</figcaption>
  </figure>
  <p>View the <a href="http://news.bbc.co.uk/weather/forecast/4296?area=Kingston">latest weather details</a> for Kingston upon Thames.</p>
  

In this example, a person uploads a photo, as part of a bulk upoad of many images, to a photo sharing site. The user has not
provided a text alternative or a caption for the image. The site’s authoring tool inserts a caption automatically using whatever useful
information it has for the image. In this case it’s the file name and date the photo was taken.

clara.jpg, taken on 12/11/2010.

  <figure>
  <img src="clara.jpg">
  <figcaption>clara.jpg, taken on 12/11/2010.</figcaption>
  </figure>
  

Notice that even in this example, as much useful information
as possible is still included in the figcaption element.

In this second example, a person uploads a photo to a photo sharing site. She has provided
a caption for the image but not a text alternative. This may be because the site does not provide users with the ability
to add a text alternative in the alt attribute.

Eloisa with Princess Belle

  <figure>
  <img src="elo.jpg">
  <figcaption>Eloisa with Princess Belle</figcaption>
  </figure>
  

Sometimes the entire point of the image is that a textual
description is not available, and the user is to provide the
description. For example, software that displays images and
asks for alternative text precisely for the purpose of then
writing a page with correct alternative text. Such a page could
have a table of images, like this:

<table>
  <tr><tr> <th> Image <th> Description<tr>
  <td>
  <figure>
  <img src="2421.png">
  <figcaption>Image 640 by 100, filename 'banner.gif'</figcaption>
  </figure>
  <td> <input name="alt2421">
  <tr>
  <td> <figure>
  <img src="2422.png">
  <figcaption>Image 200 by 480, filename 'ad3.gif'</figcaption>
  </figure>
  <td> <input name="alt2422">
  </table>

An example of an img element used to collect web page statistics.
The alt attribute is empty as the image has no meaning.

  <img src="http://server3.stats.com/count.pl?NeonMeatDream.com" width="0" height="0" alt="">
  

Another example use is when an image such as a spacer.gif is used to aid positioning of content.
The alt attribute is empty as the image has no meaning.

  <img src="spacer.gif" width="10" height="10" alt="">
  

In this example, we have a link pointing to a site’s home page, the link contains a
house icon image and the text «home». The image has an empty alt text.
Where images are used in this way, it would also be appropriate to add the image using CSS

  <a href="home.html"><img src="home.gif" width="15" height="15" alt="">Home</a>
  

  #home:before
  { 
  content: url(home.png);
  }

  <a href="home.html" id="home">Home</a>
  

In this example, there is a warning message, with a warning icon. The word «Warning!» is in emphasized
text next to the icon. As the information conveyed by the icon is redundant the img element is given an an empty alt attribute.

Warning! Your session is about to expire.

  <p><img src="warning.png" width="15" height="15" alt="">
  <strong>Warning!</strong> 
  Your session is about to expire</p>
  

In this example, there is a warning message, with a warning icon. The icon emphasizes the
importance of the message and identifies it as a particular type of content.

Your session is about to expire.

  <p><img src="warning.png" width="15" height="15" alt="Warning!">
  Your session is about to expire</p>
  

This example illustrates the use of the HTML5 logo as the sole content of a link to the HTML specification.

  <a href="http://dev.w3.org/html5/spec/spec.html">
  <img src="HTML5_Logo.png" alt="HTML 5.1 specification"></a>
  

This example illustrates the use of the WebPlatform.org logo being used to represent itself.

and other developer resources

  <h2><img src="images/webplatform.png" alt="WebPlatform.org"> and other developer resources<h2>
  

This example illustrates the use of a logo next to the name of the organization it represents.

WebPlatform.org

  <img src="images/webplatform1.png" alt=""> WebPlatform.org
  

This example illustrates the use of a logo next to text discussing the subject the logo represents.

HTML5 is a language for structuring and presenting content for the World
Wide Web, a core technology of the Internet. It is the latest revision of the HTML standard
(originally created in 1990 and most recently standardized as HTML4 in 1997) and currently remains
under development. Its core aims have been to improve the language with support for the latest
multimedia while keeping it easily readable by humans and consistently understood by computers and
devices (web browsers, parsers etc.).

  <p><img src="HTML5_Logo.png" alt="HTML5 logo: Shaped like a shield with the 
  text 'HTML' above and the numeral '5' prominent on the face of the shield."></p>
  
  Information about HTML5

This example shows a CAPTCHA test which uses a distorted image of text. The text alternative in the
alt attribute provides instructions for a user in the case where she cannot access the image content.

Example code:

<img src="captcha.png" alt="If you cannot view this image an audio challenge is provided."> 
  <!-- audio CAPTCHA option that allows the user to listen and type the word -->  
  <!-- form that asks a question -->
  

4.7.1.1.21 Guidance for markup generators

Markup generators (such as WYSIWYG authoring tools) should,
wherever possible, obtain a text alternative from their
users. However, it is recognized that in many cases, this will not
be possible.

For images that are the sole contents of links, markup generators
should examine the link target to determine the title of the target,
or the URL of the target, and use information obtained in this
manner as the text alternative.

For images that have captions, markup generators should use the
figure and figcaption elements to provide the
image’s caption.

As a last resort, implementors should either set the alt attribute to the empty string, under
the assumption that the image is a purely decorative image that
doesn’t add any information but is still specific to the surrounding
content, or omit the alt attribute
altogether, under the assumption that the image is a key part of the
content.

Markup generators may specify a generator-unable-to-provide-required-alt
attribute on img elements for which they have been
unable to obtain a text alternative and for which they have therefore
omitted the alt attribute. The
value of this attribute must be the empty string. Documents
containing such attributes are not conforming, but conformance
checkers will silently
ignore this error.

This is intended to avoid markup generators from
being pressured into replacing the error of omitting the alt attribute with the even more
egregious error of providing phony text alternatives, because
state-of-the-art automated conformance checkers cannot distinguish
phony text alternatives from correct text alternatives.

Markup generators should generally avoid using the image’s own
file name as the text alternative. Similarly, markup generators
should avoid generating text alternatives from any content that will
be equally available to presentation user agents (e.g. Web
browsers).

This is because once a page is generated, it will
typically not be updated, whereas the browsers that later read the
page can be updated by the user, therefore the browser is likely to
have more up-to-date and finely-tuned heuristics than the markup
generator did when generating the page.

4.7.1.1.22 Guidance for conformance checkers

A conformance checker must report the lack of an alt attribute as an error unless one of
the conditions listed below applies:

• The img element is in a figure
  element that satisfies the
  conditions described above.

• The img element has a (non-conforming) generator-unable-to-provide-required-alt
  attribute whose value is the empty string. A conformance checker
  that is not reporting the lack of an alt attribute as an error must also not
  report the presence of the empty generator-unable-to-provide-required-alt
  attribute as an error. (This case does not represent a case where
  the document is conforming, only that the generator could not
  determine appropriate alternative text — validators are not
  required to show an error in this case, because such an error might
  encourage markup generators to include bogus alternative text
  purely in an attempt to silence validators. Naturally, conformance
  checkers may report the lack of an alt attribute as an error even in the
  presence of the generator-unable-to-provide-required-alt
  attribute; for example, there could be a user option to report
  all conformance errors even those that might be the more
  or less inevitable result of using a markup generator.)

When an iframe element is inserted
into a document, the user agent must create a nested browsing context, and
then process the iframe attributes for the «first time».

When an iframe element is removed
from a document, the user agent must discard the nested browsing context.

This happens without any unload events firing
(the nested browsing context and its Document are discarded, not unloaded).

Whenever an iframe element with a nested browsing context has its
srcdoc attribute set, changed, or removed, the user agent
must process the iframe attributes.

Similarly, whenever an iframe element with a nested browsing context
but with no srcdoc attribute specified has its src attribute set, changed, or removed, the user agent must
process the iframe attributes.

When the user agent is to process the iframe attributes, it must run
the first appropriate steps from the following list:

If the srcdoc attribute is specified

Navigate the element’s child browsing context
to a resource whose Content-Type is text/html, whose URL
is about:srcdoc, and whose data consists of the value of the attribute. The
resulting Document must be considered an iframe srcdoc document.

Otherwise, if the element has no src attribute
specified, and the user agent is processing the iframe‘s attributes for the «first
time»

Queue a task to run the iframe load event steps.

The task source for this task is the
DOM manipulation task source.

Otherwise

1. If the value of the src attribute is missing, or its value is the empty string,
   let url be the string «about:blank«.

   Otherwise, resolve the value of the src attribute, relative to the iframe element.

   If that is not successful, then let url be the string
   «about:blank«. Otherwise, let url be the resulting
   absolute URL.

2. If there exists an ancestor browsing context whose active
   document’s address, ignoring fragment
   identifiers, is equal to url, then abort these steps.

3. Navigate the element’s child browsing context
   to url.

Any navigation required of the user agent in the process
the iframe attributes algorithm must be completed as an explicit
self-navigation override and with the iframe element’s document’s
browsing context as the source browsing context.

Furthermore, if the active document of the element’s child browsing
context before such a navigation was not completely
loaded at the time of the new navigation, then the navigation must be completed with replacement enabled.

Similarly, if the child browsing context’s session history contained
only one Document when the process the iframe attributes
algorithm was invoked, and that was the about:blank Document created
when the child browsing context was created, then any navigation required of the user agent in that algorithm must be completed
with replacement enabled.

When a Document in an iframe is marked as completely
loaded, the user agent must synchronously run the iframe load event steps.

A load event is also fired at the
iframe element when it is created if no other data is loaded in it.

Each Document has an iframe load in progress flag and a mute
iframe load flag. When a Document is created, these flags must be unset for
that Document.

The iframe load event steps are as follows:

1. Let child document be the active document of the
   iframe element’s nested browsing context.

2. If child document has its mute iframe load flag set,
   abort these steps.

3. Set child document‘s iframe load in progress
   flag.

4. Fire a simple event named load at the
   iframe element.

5. Unset child document‘s iframe load in progress
   flag.

This, in conjunction with scripting, can be used to probe the URL space of the
local network’s HTTP servers. User agents may implement cross-origin
access control policies that are stricter than those described above to mitigate this attack, but
unfortunately such policies are typically not compatible with existing Web content.

When the iframe‘s browsing context’s active document is
not ready for post-load tasks, and when anything in the iframe is delaying the load event of the iframe‘s
browsing context’s active document, and when the iframe‘s
browsing context is in the delaying load events
mode, the iframe must delay the load event of its document.

If, during the handling of the load event, the
browsing context in the iframe is again navigated, that will further delay the load event.

In this example, some completely-unknown, potentially hostile, user-provided HTML content is
embedded in a page. Because it is served from a separate domain, it is affected by all the normal
cross-site restrictions. In addition, the embedded page has scripting disabled, plugins disabled,
forms disabled, and it cannot navigate any frames or windows other than itself (or any frames or
windows it itself embeds).

<p>We're not scared of you! Here is your content, unedited:</p>
<iframe sandbox src="http://usercontent.example.net/getusercontent.cgi?id=12193"></iframe>

It is important to use a separate domain so that if the attacker convinces the
user to visit that page directly, the page doesn’t run in the context of the site’s origin, which
would make the user vulnerable to any attack found in the page.

In this example, a gadget from another site is embedded. The gadget has scripting and forms
enabled, and the origin sandbox restrictions are lifted, allowing the gadget to communicate with
its originating server. The sandbox is still useful, however, as it disables plugins and popups,
thus reducing the risk of the user being exposed to malware and other annoyances.

<iframe sandbox="allow-same-origin allow-forms allow-scripts"
        src="http://maps.example.com/embedded.html"></iframe>

Suppose a file A contained the following fragment:

<iframe sandbox="allow-same-origin allow-forms" src=B></iframe>

Suppose that file B contained an iframe also:

<iframe sandbox="allow-scripts" src=C></iframe>

Further, suppose that file C contained a link:

<a href=D>Link</a>

For this example, suppose all the files were served as text/html.

Page C in this scenario has all the sandboxing flags set. Scripts are disabled, because the
iframe in A has scripts disabled, and this overrides the allow-scripts keyword set on the
iframe in B. Forms are also disabled, because the inner iframe (in B)
does not have the allow-forms keyword
set.

Suppose now that a script in A removes all the sandbox attributes in A and B.
This would change nothing immediately. If the user clicked the link in C, loading page D into the
iframe in B, page D would now act as if the iframe in B had the allow-same-origin and allow-forms keywords set, because that was the
state of the nested browsing context in the iframe in A when page B was
loaded.

Generally speaking, dynamically removing or changing the sandbox attribute is ill-advised, because it can make it quite
hard to reason about what will be allowed and what will not.

Here is an example of a page using an iframe to include advertising from an
advertising broker:

<iframe src="http://ads.example.com/?customerid=923513721&amp;format=banner"
        width="468" height="60"></iframe>

When the element is created with neither a src attribute
nor a type attribute, and when attributes are removed such
that neither attribute is present on the element anymore, and when the element has a media
element ancestor, and when the element has an ancestor object element that is
not showing its fallback content, any plugin instantiated for
the element must be removed, and the embed element then represents nothing.

An embed element is said to be potentially
active when the following conditions are all met simultaneously:

• The element is in a Document or was in a Document the last time the event loop
  reached step 1.
• The element’s Document is fully active.
• The element has either a src attribute set or a type attribute set (or both).
• The element’s src attribute is either absent or its value
  is not the empty string.
• The element is not a descendant of a media element.
• The element is not a descendant of an object element that is not showing its
  fallback content.
• The element is being rendered, or was being rendered the last time
  the event loop reached step 1.

Whenever an embed element that was not potentially active becomes potentially active, and whenever a potentially active embed element that is
remaining potentially active and has its src attribute set, changed, or removed or its type attribute set, changed, or removed, the user agent must
queue a task using the embed task source to run the
embed element setup steps.

The embed element setup steps are as follows:

1. If another task has since been queued to run the
   embed element setup steps for this element, then abort these steps.

2. If the element has a src attribute set

   The user agent must resolve the value of the element’s
   src attribute, relative to the element. If that is
   successful, the user agent should fetch the resulting absolute
   URL, from the element’s browsing context scope origin if it has one. The task that
   is queued by the networking task source once
   the resource has been fetched must run the following steps:

   1. If another task has since been queued to run
      the embed element setup steps for this element, then abort these
      steps.

   2. Determine the type of the content being embedded, as
      follows (stopping at the first substep that determines the type):

      1. If the element has a type attribute, and that
         attribute’s value is a type that a plugin supports, then the value of the
         type attribute is the content’s type.

      2. Otherwise, if applying the URL parser algorithm to the URL of
         the specified resource (after any redirects) results in a parsed URL whose
         path component matches a pattern that a
         plugin supports, then the content’s
         type is the type that that plugin can handle.

         For example, a plugin might say that it can handle resources with path components that end with the four character string
         «.swf«.

      3. Otherwise, if the specified resource has explicit
         Content-Type metadata, then that is the content’s
         type.

      4. Otherwise, the content has no type and there
         can be no appropriate plugin for it.

   3. If the previous step determined that the content’s
      type is image/svg+xml, then run the following substeps:

      1. If the embed element is not associated with a nested browsing
         context, associate the element with a newly created nested browsing
         context, and, if the element has a name
         attribute, set the browsing context name of the element’s nested
         browsing context to the value of this attribute.

      2. Navigate the nested browsing context to
         the fetched resource, with replacement enabled, and with the
         embed element’s document’s browsing context as the source
         browsing context. (The src attribute of the
         embed element doesn’t get updated if the browsing context gets further
         navigated to other locations.)

      3. The embed element now represents its associated
         nested browsing context.

   4. Otherwise, find and instantiate an appropriate plugin based on the content’s type, and hand that plugin the
      content of the resource, replacing any previously instantiated plugin for the element. The
      embed element now represents this plugin instance.

   Whether the resource is fetched successfully or not (e.g. whether the response code was a
   2xx code or equivalent) must be ignored
   when determining the content’s type and when handing
   the resource to the plugin.

   This allows servers to return data for plugins even with error responses (e.g.
   HTTP 500 Internal Server Error codes can still contain plugin data).

   Fetching the resource must delay the load event of the element’s document.

   If the element has no src attribute set

   The user agent should find and instantiate an appropriate plugin based on the
   value of the type attribute. The embed
   element now represents this plugin instance.

The embed element has no fallback content. If the user agent can’t
find a suitable plugin when attempting to find and instantiate one for the algorithm above, then
the user agent must use a default plugin. This default could be as simple as saying «Unsupported
Format».

Whenever an embed element that was potentially
active stops being potentially active, any
plugin that had been instantiated for that element must be unloaded.

When a plugin is to be instantiated but it cannot be secured and the sandboxed plugins browsing context
flag is set on the embed element’s Document‘s active
sandboxing flag set, then the user agent must not instantiate the plugin, and
must instead render the embed element in a manner that conveys that the
plugin was disabled. The user agent may offer the user the option to override the
sandbox and instantiate the plugin anyway; if the user invokes such an option, the
user agent must act as if the conditions above did not apply for the purposes of this element.

Plugins that cannot be secured are
disabled in sandboxed browsing contexts because they might not honor the restrictions imposed by
the sandbox (e.g. they might allow scripting even when scripting in the sandbox is disabled). User
agents should convey the danger of overriding the sandbox to the user if an option to do so is
provided.

The user agent should pass the names and values of all the attributes of the embed
element that have no namespace to the plugin used, when one is instantiated.

The HTMLEmbedElement object representing the element must expose the scriptable
interface of the plugin instantiated for the embed element, if any. At a
minimum, this interface must implement the legacy caller
operation. (It is suggested that the default behavior of this legacy caller operation, e.g.
the behavior of the default plugin’s legacy caller operation, be to throw a
NotSupportedError exception.)

Here’s a way to embed a resource that requires a proprietary plugin, like Flash:

<embed src="catgame.swf">

If the user does not have the plugin (for example if the plugin vendor doesn’t support the
user’s platform), then the user will be unable to use the resource.

To pass the plugin a parameter «quality» with the value «high», an attribute can be
specified:

<embed src="catgame.swf" quality="high">

This would be equivalent to the following, when using an object element
instead:

<object data="catgame.swf">
 <param name="quality" value="high">
</object>

Whenever one of the following conditions occur:

• the element is created,
• the element is popped off the stack of open elements of an HTML
  parser or XML parser,
• the element is not on the stack of open elements of an HTML parser
  or XML parser, and it is either inserted into a document or removed from a document,
• the element’s Document changes whether it is fully active,
• one of the element’s ancestor object elements changes to or from showing its
  fallback content,
• the element’s classid attribute is set, changed, or removed,
• the element’s classid attribute is not present, and
  its data attribute is set, changed, or removed,
• neither the element’s classid attribute nor its
  data attribute are present, and its type attribute is set, changed, or removed,
• the element changes from being rendered to not being rendered, or vice versa,

…the user agent must queue a task to run the following steps to (re)determine
what the object element represents. The task source for this task is the DOM manipulation task source. This task being queued or actively
running must delay the load event of the element’s document.

1. If the user has indicated a preference that this object element’s fallback
   content be shown instead of the element’s usual behavior, then jump to the step below labeled fallback.

   For example, a user could ask for the element’s fallback content to
   be shown because that content uses a format that the user finds more accessible.

2. If the element has an ancestor media element, or has an ancestor
   object element that is not showing its fallback content, or
   if the element is not in a Document with a
   browsing context, or if the element’s Document is not fully
   active, or if the element is still in the stack of open elements of an
   HTML parser or XML parser, or if the element is not being
   rendered, then jump to the step below labeled fallback.

3. If the classid attribute is present, and has a value
   that isn’t the empty string, then: if the user agent can find a plugin suitable
   according to the value of the classid attribute, and
   either plugins aren’t being sandboxed or that
   plugin can be secured, then that
   plugin should be used, and the value of the data attribute, if any, should be passed to the
   plugin. If no suitable plugin can be found, or if the
   plugin reports an error, jump to the step below labeled fallback.

4. If the data attribute is present and its value is
   not the empty string, then:

   1. If the type attribute is present and its value is
      not a type that the user agent supports, and is not a type that the user agent can find a
      plugin for, then the user agent may jump to the step below labeled fallback
      without fetching the content to examine its real type.

   2. Resolve the URL specified by the data attribute, relative to the element.

   3. If that failed, fire a simple event named error at the element, then jump to the step below labeled
      fallback.

   4. Fetch the resulting absolute URL, from the element’s
      browsing context scope origin if it has one.

      Fetching the resource must delay the load event of the element’s document
      until the task that is queued by the networking task source once the resource has been
      fetched (defined next) has been run.

      For the purposes of the application cache networking model, this
      fetch operation is not for a child browsing context (though it might
      end up being used for one after all, as defined below).

   5. If the resource is not yet available (e.g. because the resource was not available in the
      cache, so that loading the resource required making a request over the network), then jump to
      the step below labeled fallback. The task that is
      queued by the networking task source once the
      resource is available must restart this algorithm from this step. Resources can load
      incrementally; user agents may opt to consider a resource «available» whenever enough data has
      been obtained to begin processing the resource.

   6. If the load failed (e.g. there was an HTTP 404 error, there was a DNS error), fire
      a simple event named error at the element, then jump to
      the step below labeled fallback.

   7. Determine the resource type, as follows:

      1. Let the resource type be unknown.

      2. If the object element has a type
         attribute and a typemustmatch attribute, and
         the resource has associated Content-Type metadata, and the
         type specified in the resource’s Content-Type metadata is
         an ASCII case-insensitive match for the value of the element’s type attribute, then let resource type
         be that type and jump to the step below labeled handler.

      3. If the object element has a typemustmatch attribute, jump to the step below
         labeled handler.

      4. If the user agent is configured to strictly obey Content-Type headers for this resource,
         and the resource has associated Content-Type metadata,
         then let the resource type be the type specified in the resource’s Content-Type metadata, and jump to the step below
         labeled handler.

         This can introduce a vulnerability, wherein a site is trying to embed a
         resource that uses a particular plugin, but the remote site overrides that and instead
         furnishes the user agent with a resource that triggers a different plugin with different
         security characteristics.

      5. If there is a type attribute present on the
         object element, and that attribute’s value is not a type that the user agent
         supports, but it is a type that a plugin supports, then let the resource type be the type specified in that type attribute, and jump to the step below labeled
         handler.

      6. Run the appropriate set of steps from the following
         list:

         If the resource has associated Content-Type
         metadata

         1. Let binary be false.

         2. If the type specified in the resource’s Content-Type
            metadata is «text/plain«, and the result of applying the rules for distinguishing if a resource is
            text or binary to the resource is that the resource is not
            text/plain, then set binary to true.

         3. If the type specified in the resource’s Content-Type
            metadata is «application/octet-stream«, then set binary to true.

         4. If binary is false, then let the resource
            type be the type specified in the resource’s
            Content-Type metadata, and jump to the step below labeled handler.

         5. If there is a type attribute present on the
            object element, and its value is not application/octet-stream,
            then run the following steps:

            1. If the attribute’s value is a type that a plugin supports, or the
               attribute’s value is a type that starts with «image/» that is not also an
               XML MIME type, then let the resource type be the type
               specified in that type attribute.

            2. Jump to the step below labeled handler.

         Otherwise, if the resource does not have associated
         Content-Type metadata

         1. If there is a type attribute present on the
            object element, then let the tentative type be the type
            specified in that type attribute.

            Otherwise, let tentative type be the sniffed type of the resource.

         2. If tentative type is not
            application/octet-stream, then let resource type be
            tentative type and jump to the step below labeled
            handler.

      7. If applying the URL parser algorithm to the URL of the
         specified resource (after any redirects) results in a parsed URL whose path component matches a pattern that a plugin
         supports, then let resource type be the type that that plugin can
         handle.

         For example, a plugin might say that it can handle resources with path components that end with the four character string
         «.swf«.

      It is possible for this step to finish, or for one of the substeps above to
      jump straight to the next step, with resource type still being unknown. In
      both cases, the next step will trigger fallback.

   8. Handler: Handle the content as given by the first of the following cases that
      matches:

      If the resource type is not a type that the user agent supports, but
      it is a type that a plugin supports

      If plugins are being sandboxed and the plugin that
      supports resource type cannot be secured, jump to the step below labeled fallback.

      Otherwise, the user agent should use the plugin that supports
      resource type and pass the content of the resource to that
      plugin. If the plugin reports an error, then jump to the step
      below labeled fallback.

      If the resource type is an XML MIME type, or

      if the resource type does not start with «image/«

      The object element must be associated with a newly created nested
      browsing context, if it does not already have one.

      If the URL of the given resource is not about:blank, the
      element’s nested browsing context must then be navigated to that resource, with
      replacement enabled, and with the object element’s document’s
      browsing context as the source browsing context. (The data attribute of the object element doesn’t
      get updated if the browsing context gets further navigated to other locations.)

      If the URL of the given resource is about:blank, then,
      instead, the user agent must queue a task to fire a simple event
      named load at the object element. No load event is fired at the
      about:blank document itself.

      The object element represents the nested browsing
      context.

      If the name attribute is present, the
      browsing context name must be set to the value of this attribute; otherwise,
      the browsing context name must be set to the empty string.

      In certain situations, e.g. if the resource was fetched from an application cache but it is an HTML file
      with a manifest attribute that points to a different
      application cache manifest, the navigation of the browsing context will be restarted so
      as to load the resource afresh from the network or a different application
      cache. Even if the resource is then found to have a different type, it is still used
      as part of a nested browsing context: only the navigate algorithm
      is restarted, not this object algorithm.

      If the resource type starts with «image/«, and support
      for images has not been disabled

      Apply the image sniffing rules to
      determine the type of the image.

      The object element represents the specified image. The image is
      not a nested browsing context.

      If the image cannot be rendered, e.g. because it is malformed or in an unsupported
      format, jump to the step below labeled fallback.

      Otherwise

      The given resource type is not supported. Jump to the step below
      labeled fallback.

      If the previous step ended with the resource type being
      unknown, this is the case that is triggered.

   9. The element’s contents are not part of what the object element
      represents.

   10. Once the resource is completely loaded, queue a task to fire a simple
       event named load at the element.

       The task source for this task is the
       DOM manipulation task source.

5. If the data attribute is absent but the type attribute is present, and the user agent can find a
   plugin suitable according to the value of the type attribute, and either plugins
   aren’t being sandboxed or the plugin can be secured, then that plugin should be used. If these conditions cannot be met, or if the
   plugin reports an error, jump to the step below labeled fallback.

6. Fallback: The object element represents the element’s
   children, ignoring any leading param element children. This is the element’s
   fallback content. If the element has an instantiated plugin, then
   unload it.

When the algorithm above instantiates a plugin, the user agent
should pass to the plugin used the names and values of all the attributes on the
element, in the order they were added to the element, with the attributes added by the parser
being ordered in source order, followed by a parameter named «PARAM» whose value is null, followed
by all the names and values of parameters given by
param elements that are children of the object element, in tree
order. If the plugin supports a scriptable interface, the
HTMLObjectElement object representing the element should expose that interface. The
object element represents the plugin. The
plugin is not a nested browsing context.

Plugins are considered sandboxed for the purpose of an
object element if the sandboxed plugins browsing context flag is set on
the object element’s Document‘s active sandboxing flag
set.

Due to the algorithm above, the contents of object elements act as fallback
content, used only when referenced resources can’t be shown (e.g. because it returned a 404
error). This allows multiple object elements to be nested inside each other,
targeting multiple user agents with different capabilities, with the user agent picking the first
one it supports.

Whenever the name attribute is set, if the
object element has a nested browsing context, its name must be changed to the new value. If the attribute is removed, if the
object element has a browsing context, the browsing context
name must be set to the empty string.

The IDL attributes data, type and name each must reflect the respective
content attributes of the same name. The typeMustMatch IDL attribute must
reflect the typemustmatch content
attribute. The useMap IDL attribute must
reflect the usemap content attribute.

The contentDocument IDL attribute
must return the Document object of the active document of the
object element’s nested browsing context, if any and if its
effective script origin is the same origin as the effective script
origin specified by the incumbent settings object, or null otherwise.

The contentWindow IDL attribute must
return the WindowProxy object of the object element’s nested
browsing context, if it has one; otherwise, it must return null.

The willValidate, validity, and validationMessage attributes, and the checkValidity(), and setCustomValidity() methods, are part of the
constraint validation API. The form IDL attribute
is part of the element’s forms API.

All object elements have a legacy caller
operation. If the object element has an instantiated plugin that
supports a scriptable interface that defines a legacy caller operation, then that must be the
behavior of the object’s legacy caller operation. Otherwise, the object’s legacy caller operation
must be to throw a NotSupportedError exception.

In the following example, a Java applet is embedded in a page using the object
element. (Generally speaking, it is better to avoid using applets like these and instead use
native JavaScript and HTML to provide the functionality, since that way the application will work
on all Web browsers without requiring a third-party plugin. Many devices, especially embedded
devices, do not support third-party technologies like Java.)

<figure>
 <object type="application/x-java-applet">
  <param name="code" value="MyJavaClass">
  <p>You do not have Java available, or it is disabled.</p>
 </object>
 <figcaption>My Java Clock</figcaption>
</figure>

In this example, an HTML page is embedded in another using the object
element.

<figure>
 <object data="clock.html"></object>
 <figcaption>My HTML Clock</figcaption>
</figure>

The following example shows how a plugin can be used in HTML (in this case the Flash plugin,
to show a video file). Fallback is provided for users who do not have Flash enabled, in this case
using the video element to show the video for those using user agents that support
video, and finally providing a link to the video for those who have neither Flash
nor a video-capable browser.

<p>Look at my video:
 <object type="application/x-shockwave-flash">
  <param name=movie value="http://video.example.com/library/watch.swf">
  <param name=allowfullscreen value=true>
  <param name=flashvars value="http://video.example.com/vids/315981">
  <video controls src="http://video.example.com/vids/315981">
   <a href="http://video.example.com/vids/315981">View video</a>.
  </video>
 </object>
</p>

If both attributes are present, and if the parent element of the param is an
object element, then the element defines a parameter with the given name-value pair.

If either the name or value of a parameter defined
by a param element that is the child of an object element that
represents an instantiated plugin changes, and if that
plugin is communicating with the user agent using an API that features the ability to
update the plugin when the name or value of a parameter so changes, then the user agent must
appropriately exercise that ability to notify the plugin of the change.

The IDL attributes name and value must both reflect the respective
content attributes of the same name.

The following example shows how the param element can be used to pass a parameter
to a plugin, in this case the O3D plugin.

<!DOCTYPE HTML>
<html lang="en">
  <head>
   <title>O3D Utah Teapot</title>
  </head>
  <body>
   <p>
    <object type="application/vnd.o3d.auto">
     <param name="o3d_features" value="FloatingPointTextures">
     <img src="o3d-teapot.png"
          title="3D Utah Teapot illustration rendered using O3D."
          alt="When O3D renders the Utah Teapot, it appears as a squat
          teapot with a shiny metallic finish on which the
          surroundings are reflected, with a faint shadow caused by
          the lighting.">
     <p>To see the teapot actually rendered by O3D on your
     computer, please download and install the <a
     href="http://code.google.com/apis/o3d/docs/gettingstarted.html#install">O3D plugin</a>.</p>
    </object>
    <script src="o3d-teapot.js"></script>
   </p>
  </body>
</html>

If the specified resource is to be used, then, when the element is created or when the poster attribute is set, changed, or removed, the user agent must
run the following steps to determine the element’s poster frame (regardless of the
value of the element’s show poster flag):

1. If there is an existing instance of this algorithm running for this video
   element, abort that instance of this algorithm without changing the poster
   frame.

2. If the poster attribute’s value is the empty string
   or if the attribute is absent, then there is no poster frame; abort these
   steps.

3. Resolve the poster attribute’s value relative to the element. If this fails,
   then there is no poster frame; abort these steps.

4. Fetch the resulting absolute URL, from the element’s
   Document‘s origin. This must delay the load event of the
   element’s document.

5. If an image is thus obtained, the poster frame is that image. Otherwise,
   there is no poster frame.

A video element represents what is given for the first matching condition in the
list below:

When no video data is available (the element’s readyState attribute is either HAVE_NOTHING, or HAVE_METADATA but no video data has yet been obtained at
all, or the element’s readyState attribute is any
subsequent value but the media resource does not have a video channel)

The video element represents its poster frame, if any,
or else transparent black with no intrinsic dimensions.

When the video element is paused, the current playback position is the first frame of video,
and the element’s show poster flag is set

The video element represents its poster frame, if any,
or else the first frame of the video.

When the video element is paused, and the
frame of video corresponding to the current playback
position is not available (e.g. because the video is seeking or buffering)

When the video element is neither potentially playing nor paused (e.g. when seeking or stalled)

The video element represents the last frame of the video to have
been rendered.

When the video element is paused

The video element represents the frame of video corresponding to
the current playback position.

Otherwise (the video element has a video channel and is potentially
playing)

The video element represents the frame of video at the continuously
increasing «current» position. When the
current playback position changes such that the last frame rendered is no longer the
frame corresponding to the current playback position in the video, the new frame
must be rendered.

Which frame in a video stream corresponds to a particular playback position is
defined by the video stream’s format.

The video element also represents any text track cues whose text track cue active flag is set and whose
text track is in the showing mode, and any
audio from the media resource, at the current playback position.

Any audio associated with the media resource must, if played, be played
synchronized with the current playback position, at the element’s effective
media volume.

In addition to the above, the user agent may provide messages to the user (such as «buffering»,
«no video loaded», «error», or more detailed information) by overlaying text or icons on the video
or other areas of the element’s playback area, or in another appropriate manner.

User agents that cannot render the video may instead make the element represent a link to an external video playback utility or to the video
data itself.

When a video element’s media resource has a video channel, the
element provides a paint source whose width is the media resource’s
intrinsic width, whose height is the
media resource’s intrinsic
height, and whose appearance is the frame of video corresponding to the current playback position, if that is available, or else
(e.g. when the video is seeking or buffering) its previous appearance, if any, or else (e.g.
because the video is still loading the first frame) blackness.

The intrinsic width and intrinsic height of the media resource
are the dimensions of the resource in CSS pixels after taking into account the resource’s
dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for the format used
by the resource. If an anamorphic format does not define how to apply the aspect ratio to the
video data’s dimensions to obtain the «correct» dimensions, then the user agent must apply the
ratio by increasing one dimension and leaving the other unchanged.

The videoWidth IDL attribute must return
the intrinsic width of the video in CSS pixels.
The videoHeight IDL attribute must return
the intrinsic height of the video in CSS
pixels. If the element’s readyState attribute is HAVE_NOTHING, then the attributes must return 0.

Whenever the intrinsic width
or intrinsic height of the video changes
(including, for example, because the selected video
track was changed), if the element’s readyState
attribute is not HAVE_NOTHING, the user agent must
queue a task to fire a simple event named resize at the media element.

In the absence of style rules to the contrary, video content should be rendered inside the
element’s playback area such that the video content is shown centered in the playback area at the
largest possible size that fits completely within it, with the video content’s aspect ratio being
preserved. Thus, if the aspect ratio of the playback area does not match the aspect ratio of the
video, the video will be shown letterboxed or pillarboxed. Areas of the element’s playback area
that do not contain the video represent nothing.

In user agents that implement CSS, the above requirement can be implemented by
using the style rule suggested in the rendering section.

The intrinsic width of a video element’s playback area is the intrinsic width of
the poster frame, if that is available and the element currently
represents its poster frame; otherwise, it is the intrinsic width of the video resource, if that is
available; otherwise the intrinsic width is missing.

The intrinsic height of a video element’s playback area is the intrinsic height of
the poster frame, if that is available and the element currently
represents its poster frame; otherwise it is the intrinsic height of the video resource, if that is
available; otherwise the intrinsic height is missing.

The default object size is a width of 300 CSS pixels and a height of 150 CSS
pixels. [CSSIMAGES]

User agents should provide controls to enable or disable the display of closed captions, audio
description tracks, and other additional data associated with the video stream, though such
features should, again, not interfere with the page’s normal rendering.

User agents may allow users to view the video content in manners more suitable to the user
(e.g. full-screen or in an independent resizable window). As for the other user interface
features, controls to enable this should not interfere with the page’s normal rendering unless the
user agent is exposing a user interface.
In such an independent context, however, user agents may make full user interfaces visible, with,
e.g., play, pause, seeking, and volume controls, even if the controls attribute is absent.

User agents may allow video playback to affect system features that could interfere with the
user’s experience; for example, user agents could disable screensavers while video playback is in
progress.

The poster IDL attribute must
reflect the poster content attribute.

This example shows how to detect when a video has failed to play correctly:

<script>
 function failed(e) {
   // video playback failed - show a message saying why
   switch (e.target.error.code) {
     case e.target.error.MEDIA_ERR_ABORTED:
       alert('You aborted the video playback.');
       break;
     case e.target.error.MEDIA_ERR_NETWORK:
       alert('A network error caused the video download to fail part-way.');
       break;
     case e.target.error.MEDIA_ERR_DECODE:
       alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
       break;
     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
       alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
       break;
     default:
       alert('An unknown error occurred.');
       break;
   }
 }
</script>
<p><video src="tgif.vid" autoplay controls onerror="failed(event)"></video></p>
<p><a href="tgif.vid">Download the video file</a>.</p>

When an audio element is potentially playing, it must have its audio
data played synchronized with the current playback position, at the element’s
effective media volume.

When an audio element is not potentially playing, audio must not play
for the element.

The following list shows some examples of how to use the codecs= MIME
parameter in the type attribute.

H.264 Constrained baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container

<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container

<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>

H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container

<source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>

H.264 ‘High’ profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container

<source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>

MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container

<source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>

MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container

<source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>

MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container

<source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>

Theora video and Vorbis audio in Ogg container

<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>

Theora video and Speex audio in Ogg container

<source src='video.ogv' type='video/ogg; codecs="theora, speex"'>

Vorbis audio alone in Ogg container

<source src='audio.ogg' type='audio/ogg; codecs=vorbis'>

Speex audio alone in Ogg container

<source src='audio.spx' type='audio/ogg; codecs=speex'>

FLAC audio alone in Ogg container

<source src='audio.oga' type='audio/ogg; codecs=flac'>

Dirac video and Vorbis audio in Ogg container

<source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'>

If a source element is inserted as a child of a media element that
has no src attribute and whose networkState has the value NETWORK_EMPTY, the user agent must invoke the media
element’s resource selection
algorithm.

The IDL attributes src, type, and media must reflect the respective content
attributes of the same name.

If the author isn’t sure if user agents will all be able to render the media resources
provided, the author can listen to the error event on the last
source element and trigger fallback behavior:

<script>
 function fallback(video) {
   // replace <video> with its contents
   while (video.hasChildNodes()) {
     if (video.firstChild instanceof HTMLSourceElement)
       video.removeChild(video.firstChild);
     else
       video.parentNode.insertBefore(video.firstChild, video);
   }
   video.parentNode.removeChild(video);
 }
</script>
<video controls autoplay>
 <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
         onerror="fallback(parentNode)">
 ...
</video>

The readyState attribute must return the
numeric value corresponding to the text track readiness state of the
track element’s text track, as defined by the following list:

NONE (numeric value 0)

The text track not loaded state.

LOADING (numeric value 1)

The text track loading state.

LOADED (numeric value 2)

The text track loaded state.

ERROR (numeric value 3)

The text track failed to load state.

The track IDL attribute must, on getting,
return the track element’s text track’s corresponding
TextTrack object.

The src, srclang, label, and default IDL attributes must reflect the
respective content attributes of the same name. The kind IDL attribute must reflect the content
attribute of the same name, limited to only known values.

This video has subtitles in several languages:

<video src="brave.webm">
 <track kind=subtitles src=brave.en.vtt srclang=en label="English">
 <track kind=captions src=brave.en.hoh.vtt srclang=en label="English for the Hard of Hearing">
 <track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="Français">
 <track kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch">
</video>

(The lang attributes on the last two describe the language of
the label attribute, not the language of the subtitles
themselves. The language of the subtitles is given by the srclang attribute.)

If a src attribute of a media element is set
or changed, the user agent must invoke the media element’s media element load
algorithm. (Removing the src attribute does
not do this, even if there are source elements present.)

The src IDL attribute on media elements must reflect the content attribute of the same
name.

The crossOrigin IDL attribute must
reflect the crossorigin content
attribute, limited to only known values.

This script tests to see if the user agent supports a (fictional) new format to dynamically
decide whether to use a video element or a plugin:

<section id="video">
 <p><a href="playing-cats.nfv">Download video</a></p>
</section>
<script>
 var videoSection = document.getElementById('video');
 var videoElement = document.createElement('video');
 var support = videoElement.canPlayType('video/x-new-fictional-format;codecs="kittens,bunnies"');
 if (support != "probably" && "New Fictional Video Plugin" in navigator.plugins) {
   // not confident of browser support
   // but we have a plugin
   // so use plugin instead
   videoElement = document.createElement("embed");
 } else if (support == "") {
   // no support from browser and no plugin
   // do nothing
   videoElement = null;
 }
 if (videoElement) {
   while (videoSection.hasChildNodes())
     videoSection.removeChild(videoSection.firstChild);
   videoElement.setAttribute("src", "playing-cats.nfv");
   videoSection.appendChild(videoElement);
 }
</script>

All media elements have an autoplaying flag,
which must begin in the true state, and a delaying-the-load-event flag, which must
begin in the false state. While the delaying-the-load-event flag is true, the element
must delay the load event of its document.

When the load() method on a media
element is invoked, the user agent must run the media element load
algorithm.

The media element load algorithm consists of the following steps.

1. Abort any already-running instance of the resource selection algorithm for this
   element.

2. If there are any tasks from the media
   element’s media element event task source in one of the task queues, then remove those tasks.

   If there are any tasks that were queued by the resource selection
   algorithm (including the algorithms that it itself invokes) for this same media
   element from the DOM manipulation task source in one of the task queues, then remove those tasks.

   Basically, pending events and callbacks for the media element are discarded when
   the media element starts loading a new resource.

3. If the media element’s networkState is set to NETWORK_LOADING or NETWORK_IDLE, queue a task to fire a
   simple event named abort at the media
   element.

4. If the media element’s networkState
   is not set to NETWORK_EMPTY, then run these
   substeps:

   1. Queue a task to fire a simple event named emptied at the media element.

   2. If a fetching process is in progress for the media
      element, the user agent should stop it.

   3. Forget the media element’s media-resource-specific tracks.

   4. If readyState is not set to HAVE_NOTHING, then set it to that state.

   5. If the paused attribute is false, then set it to
      true.

   6. If seeking is true, set it to false.

   7. Set the current playback position to 0.

      Set the official playback position to 0.

      If this changed the official playback position, then queue a task
      to fire a simple event named timeupdate at the media element.

   8. Set the initial playback position to 0.

   9. Set the timeline offset to Not-a-Number (NaN).

   10. Update the duration attribute to Not-a-Number
       (NaN).

       The user agent will not fire a durationchange event for this particular change of
       the duration.

5. Set the playbackRate attribute to the value of
   the defaultPlaybackRate attribute.

6. Set the error attribute to null and the
   autoplaying flag to true.

7. Invoke the media element’s resource selection algorithm.

8. Playback of any previously playing media resource for this element
   stops.

The resource selection algorithm for a
media element is as follows. This algorithm is always invoked synchronously, but one
of the first steps in the algorithm is to return and continue running the remaining steps
asynchronously, meaning that it runs in the background with scripts and other tasks running in parallel. In addition, this algorithm interacts
closely with the event loop mechanism; in particular, it has synchronous sections (which are triggered as part of the event loop
algorithm). Steps in such sections are marked with ⌛.

1. Set the element’s networkState attribute to
   the NETWORK_NO_SOURCE value.

2. Set the element’s show poster flag to true.

3. Set the media element’s delaying-the-load-event flag to true
   (this delays the load event).

4. Asynchronously await a stable state, allowing the task that invoked this algorithm to continue. The synchronous
   section consists of all the remaining steps of this algorithm until the algorithm says the
   synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

5. ⌛ If the media element’s blocked-on-parser flag is false,
   then populate the list of pending text tracks.

6. ⌛ If the media element has a src
   attribute, then let mode be attribute.

   ⌛ Otherwise, if the media element does not have a src attribute but has a source element child, then
   let mode be children and let candidate
   be the first such source element child in tree order.

   ⌛ Otherwise the media element has neither a src attribute nor a source element child: set the
   networkState to NETWORK_EMPTY, and abort these steps; the
   synchronous section ends.

7. ⌛ Set the media element’s networkState to NETWORK_LOADING.

8. ⌛ Queue a task to fire a simple event named loadstart at the media element.

9. If mode is attribute, then run these substeps:

   1. ⌛ If the src
      attribute’s value is the empty string, then end the synchronous section, and jump
      down to the failed with attribute step below.

   2. ⌛ Let absolute URL be the absolute URL that
      would have resulted from resolving the URL
      specified by the src attribute’s value relative to the
      media element when the src attribute was last
      changed.

   3. ⌛ If absolute URL was obtained successfully, set the currentSrc attribute to absolute
      URL.

   4. End the synchronous section, continuing the remaining steps
      asynchronously.

   5. If absolute URL was obtained successfully, run the resource fetch algorithm with absolute
      URL. If that algorithm returns without aborting this one, then the load
      failed.

   6. Failed with attribute: Reaching this step indicates that the media resource
      failed to load or that the given URL could not be resolved. Queue a task to run the following steps, using the
      DOM manipulation task source:

      1. Set the error attribute to a new
         MediaError object whose code attribute
         is set to MEDIA_ERR_SRC_NOT_SUPPORTED.

      2. Forget the media element’s media-resource-specific tracks.

      3. Set the element’s networkState attribute
         to the NETWORK_NO_SOURCE value.

      4. Set the element’s show poster flag to true.

      5. Fire a simple event named error at
         the media element.

      6. Set the element’s delaying-the-load-event flag to false. This stops delaying the load event.

   7. Wait for the task queued by the previous step to have
      executed.

   8. Abort these steps. Until the load() method is
      invoked or the src attribute is changed, the element won’t
      attempt to load another resource.

   Otherwise, the source elements will be used; run these substeps:

   1. ⌛ Let pointer be a position defined by two adjacent nodes in the
      media element’s child list, treating the start of the list (before the first
      child in the list, if any) and end of the list (after the last child in the list, if any) as
      nodes in their own right. One node is the node before pointer, and the
      other node is the node after pointer. Initially, let pointer be the position between the candidate node and the
      next node, if there are any, or the end of the list, if it is the last node.

      As nodes are inserted and removed into the media element, pointer must be updated as follows:

      If a new node is inserted between the two nodes that define pointer

      Let pointer be the point between the node before pointer and the new node. In other words, insertions at pointer go after pointer.

      If the node before pointer is removed

      Let pointer be the point between the node after pointer and the node before the node after pointer. In
      other words, pointer doesn’t move relative to the remaining nodes.

      If the node after pointer is removed

      Let pointer be the point between the node before pointer and the node after the node before pointer. Just
      as with the previous case, pointer doesn’t move relative to the remaining
      nodes.

      Other changes don’t affect pointer.

   2. ⌛ Process candidate: If candidate does not have a
      src attribute, or if its src attribute’s value is the empty string, then end the
      synchronous section, and jump down to the failed with elements step
      below.

   3. ⌛ Let absolute URL be the absolute URL that
      would have resulted from resolving the URL
      specified by candidate‘s src
      attribute’s value relative to the candidate when the src attribute was last changed.

   4. ⌛ If absolute URL was not obtained successfully, then end the
      synchronous section, and jump down to the failed with elements step
      below.

   5. ⌛ If candidate has a type attribute whose value, when parsed as a MIME
      type (including any codecs described by the codecs parameter, for
      types that define that parameter), represents a type that the user agent knows it cannot
      render, then end the synchronous section, and jump down to the failed with elements step below.

   6. ⌛ If candidate has a media attribute whose value does not match the environment, then end the synchronous section, and
      jump down to the failed with elements step below.

   7. ⌛ Set the currentSrc attribute to absolute URL.

   8. End the synchronous section, continuing the remaining steps
      asynchronously.

   9. Run the resource fetch algorithm with
      absolute URL. If that algorithm returns without aborting this one,
      then the load failed.

   10. Failed with elements: Queue a task, using the DOM
       manipulation task source, to fire a simple event named error at the candidate element.

   11. Asynchronously await a stable state. The synchronous section
       consists of all the remaining steps of this algorithm until the algorithm says the
       synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

   12. ⌛ Forget the media element’s media-resource-specific
       tracks.

   13. ⌛ Find next candidate: Let candidate be
       null.

   14. ⌛ Search loop: If the node after pointer is
       the end of the list, then jump to the waiting step below.

   15. ⌛ If the node after pointer is a source element,
       let candidate be that element.

   16. ⌛ Advance pointer so that the node before pointer is now the node that was after pointer, and the node
       after pointer is the node after the node that used to be after pointer, if any.

   17. ⌛ If candidate is null, jump back to the search
       loop step. Otherwise, jump back to the process candidate step.

   18. ⌛ Waiting: Set the element’s networkState attribute to the NETWORK_NO_SOURCE value.

   19. ⌛ Set the element’s show poster flag to true.

   20. ⌛ Set the element’s delaying-the-load-event flag to false. This
       stops delaying the load event.

   21. End the synchronous section, continuing the remaining steps
       asynchronously.

   22. Wait until the node after pointer is a node other than the end of
       the list. (This step might wait forever.)

   23. Asynchronously await a stable state. The synchronous section
       consists of all the remaining steps of this algorithm until the algorithm says the
       synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

   24. ⌛ Set the element’s delaying-the-load-event flag back to true (this
       delays the load event again, in case it hasn’t been
       fired yet).

   25. ⌛ Set the networkState back to NETWORK_LOADING.

   26. ⌛ Jump back to the find next candidate step above.

The resource fetch algorithm for a media
element and a given absolute URL is as follows:

1. Let the current media resource be the resource given by the
   absolute URL passed to this algorithm. This is now the element’s media
   resource.

2. Remove all media-resource-specific text
   tracks from the media element’s list of pending text tracks, if
   any.

3. Optionally, run the following substeps. This is the expected behavior if the user agent
   intends to not attempt to fetch the resource until the user requests it explicitly (e.g. as a way
   to implement the preload attribute’s none keyword).

   1. Set the networkState to NETWORK_IDLE.

   2. Queue a task to fire a simple event named suspend at the element, using the DOM manipulation
      task source.

   3. Set the element’s delaying-the-load-event flag to false. This stops delaying the load event.

   4. Wait for the task to be run.

   5. Wait for an implementation-defined event (e.g. the user requesting that the media
      element begin playback).

   6. Set the element’s delaying-the-load-event flag back to true (this delays the load event again, in case it hasn’t been fired
      yet).

   7. Set the networkState to NETWORK_LOADING.

4. Perform a potentially CORS-enabled fetch of the current media resource‘s absolute URL, with the mode being
   the state of the media element’s crossorigin content attribute, the origin
   being the origin of the media element’s Document, and the
   default origin behaviour set to taint.

   The resource obtained in this fashion, if any, contains the media data. It can
   be CORS-same-origin or CORS-cross-origin; this affects whether
   subtitles referenced in the media data are exposed in the API and, for
   video elements, whether a canvas gets tainted when the video is drawn
   on it.

   While the load is not suspended (see below), every 350ms (±200ms) or for every byte
   received, whichever is least frequent, queue a task to fire a simple
   event named progress at the element.

   The stall timeout is a user-agent defined length of time, which should be about
   three seconds. When a media element that is actively attempting to obtain
   media data has failed to receive any data for a duration equal to the stall
   timeout, the user agent must queue a task to fire a simple
   event named stalled at the element.

   User agents may allow users to selectively block or slow media data downloads.
   When a media element’s download has been blocked altogether, the user agent must
   act as if it was stalled (as opposed to acting as if the connection was closed). The rate of the
   download may also be throttled automatically by the user agent, e.g. to balance the download
   with other connections sharing the same bandwidth.

   User agents may decide to not download more content at any time, e.g.
   after buffering five minutes of a one hour media resource, while waiting for the user to decide
   whether to play the resource or not, while waiting for user input in an interactive resource, or
   when the user navigates away from the page. When a media element’s download has
   been suspended, the user agent must queue a task, using the DOM manipulation
   task source, to set the networkState to NETWORK_IDLE and fire a simple event named
   suspend at the element. If and when downloading of the
   resource resumes, the user agent must queue a task to set the networkState to NETWORK_LOADING. Between the queuing of these tasks,
   the load is suspended (so progress events don’t fire,
   as described above).

   The preload attribute provides a hint
   regarding how much buffering the author thinks is advisable, even in the absence of the autoplay attribute.

   When a user agent decides to completely stall a download, e.g. if it is waiting until the
   user starts playback before downloading any further content, the element’s
   delaying-the-load-event flag must be set to false. This stops delaying the load event.

   The user agent may use whatever means necessary to fetch the resource (within the constraints
   put forward by this and other specifications); for example, reconnecting to the server in the
   face of network errors, using HTTP range retrieval requests, or switching to a streaming
   protocol. The user agent must consider a resource erroneous only if it has given up trying to
   fetch it.

   This specification does not currently say whether or how to check the MIME
   types of the media resources, or whether or how to perform file type sniffing using the actual
   file data. Implementors differ in their intentions on this matter and it is therefore unclear
   what the right solution is. In the absence of any requirement here, the HTTP specification’s
   strict requirement to follow the Content-Type header prevails («Content-Type specifies the media
   type of the underlying data.» … «If and only if the media type is not given by a Content-Type
   field, the recipient MAY attempt to guess the media type via inspection of its content
   and/or the name extension(s) of the URI used to identify the resource.»).

   The networking task source tasks to process
   the data as it is being fetched must, when appropriate, include the relevant substeps from the
   following list:

   If the media data cannot be fetched at all, due to network errors, causing the
   user agent to give up trying to fetch the resource

   If the media data can be fetched but is found by inspection to be in an
   unsupported format, or can otherwise not be rendered at all

   DNS errors, HTTP 4xx and 5xx errors (and equivalents in other protocols), and other fatal
   network errors that occur before the user agent has established whether the current media resource is usable, as well as the file using an unsupported
   container format, or using unsupported codecs for all the data, must cause the user agent to
   execute the following steps:

   1. The user agent should cancel the fetching process.

   2. Abort this subalgorithm, returning to the resource selection algorithm.

   If the media resource is found to have an audio
   track

   1. Create an AudioTrack object to represent the audio track.

   2. Update the media element’s audioTracks attribute’s AudioTrackList
      object with the new AudioTrack object.

   3. Fire a trusted event with the name addtrack, that does not bubble and is not cancelable, and
      that uses the TrackEvent interface, with the track attribute initialized to the new
      AudioTrack object, at this AudioTrackList object.

   If the media resource is found to have a video
   track

   1. Create a VideoTrack object to represent the video track.

   2. Update the media element’s videoTracks attribute’s VideoTrackList
      object with the new VideoTrack object.

   3. Fire a trusted event with the name addtrack, that does not bubble and is not cancelable, and that
      uses the TrackEvent interface, with the track attribute initialized to the new
      VideoTrack object, at this VideoTrackList object.

   Once enough of the media data has been fetched to
   determine the duration of the media resource, its dimensions, and other
   metadata

   This indicates that the resource is usable. The user agent must follow these substeps:

   1. Establish the media timeline for the purposes of the current playback
      position, the earliest possible position, and the initial playback
      position, based on the media data.

   2. Update the timeline offset to the date and time that corresponds to the zero
      time in the media timeline established in the previous step, if any. If no
      explicit time and date is given by the media resource, the timeline
      offset must be set to Not-a-Number (NaN).

   3. Set the current playback position and the official playback
      position to the earliest possible position.

   4. Update the duration attribute with the time of
      the last frame of the resource, if known, on the media timeline established
      above. If it is not known (e.g. a stream that is in principle infinite), update the duration attribute to the value positive Infinity.

      The user agent will queue a task
      to fire a simple event named durationchange at the element at this point.

   5. For video elements, set the videoWidth and videoHeight attributes, and queue a task
      to fire a simple event named resize at
      the media element.

      Further resize events will be fired
      if the dimensions subsequently change.

   6. Set the readyState attribute to HAVE_METADATA.

      A loadedmetadata DOM event
      will be fired as part of setting the readyState attribute to a new value.

   7. Let jumped be false.

   8. If the media element’s default playback start position is
      greater than zero, then seek to that time, and let jumped be true.

   9. Let the media element’s default playback
      start position be zero.

   10. If either the media resource or the address of the current
       media resource indicate a particular start time, then set the initial playback
       position to that time and, if jumped is still false, seek to that time and let jumped be
       true.

       For example, with media formats that support the Media Fragments
       URI fragment identifier syntax, the fragment identifier can be used to indicate a
       start position. [MEDIAFRAG]

   11. If either the media resource or the address of the current
       media resource indicate a particular set of audio or video tracks to enable, then the
       selected audio tracks must be enabled in the element’s audioTracks object, and, of the selected video tracks,
       the one that is listed first in the element’s videoTracks object must be selected. All other tracks
       must be disabled.

       Again, this could be done, for example, using the Media Fragments
       URI fragment identifier syntax. [MEDIAFRAG]

   12. If the media element has a current media controller, then:
       if jumped is true and the initial playback position,
       relative to the current media controller’s timeline, is greater than the
       current media controller’s media controller position, then
       seek the media controller to the media element’s initial
       playback position, relative to the current media controller’s timeline;
       otherwise, seek the media element to the
       media controller position, relative to the media element’s
       timeline.

   Once the readyState attribute reaches HAVE_CURRENT_DATA, after
   the loadeddata event has been fired, set the
   element’s delaying-the-load-event flag to false. This stops delaying the load event.

   A user agent that is attempting to reduce network usage while still fetching
   the metadata for each media resource would also stop buffering at this point,
   following the rules described previously, which involve the
   networkState attribute switching to the NETWORK_IDLE value and a suspend event firing.

   The user agent is required to determine the duration of the
   media resource and go through this step before playing.

   Once the entire media resource has been fetched
   (but potentially before any of it has been decoded)

   Fire a simple event named progress
   at the media element.

   Set the networkState to NETWORK_IDLE and fire a simple event named
   suspend at the media element.

   If the user agent ever discards any media data and then needs to resume the
   network activity to obtain it again, then it must queue a task to set the networkState to NETWORK_LOADING.

   If the user agent can keep the media resource loaded, then the
   algorithm will continue to its final step below, which aborts the algorithm.

   If the connection is interrupted after some media data has been received,
   causing the user agent to give up trying to fetch the resource

   Fatal network errors that occur after the user agent has established whether the current media resource is usable (i.e. once the media element’s
   readyState attribute is no longer HAVE_NOTHING) must cause the user agent to execute the
   following steps:

   1. The user agent should cancel the fetching process.

   2. Set the error attribute to a new
      MediaError object whose code attribute
      is set to MEDIA_ERR_NETWORK.

   3. Fire a simple event named error at
      the media element.

   4. Set the element’s networkState attribute
      to the NETWORK_IDLE value.

   5. Set the element’s delaying-the-load-event flag to false. This stops delaying the load event.

   6. Abort the overall resource selection
      algorithm.

   If the media data is corrupted

   Fatal errors in decoding the media data that occur after the user agent has
   established whether the current media resource is usable must cause the
   user agent to execute the following steps:

   1. The user agent should cancel the fetching process.

   2. Set the error attribute to a new
      MediaError object whose code attribute
      is set to MEDIA_ERR_DECODE.

   3. Fire a simple event named error at
      the media element.

   4. If the media element’s readyState
      attribute has a value equal to HAVE_NOTHING, set
      the element’s networkState attribute to the
      NETWORK_EMPTY value, set the element’s
      show poster flag to true, and fire a simple event named emptied at the element.

      Otherwise, set the element’s networkState
      attribute to the NETWORK_IDLE value.

   5. Set the element’s delaying-the-load-event flag to false. This stops delaying the load event.

   6. Abort the overall resource selection
      algorithm.

   If the media data fetching process is aborted by the user

   The fetching process is aborted by the user, e.g. because the user
   pressed a «stop» button, the user agent must execute the following steps. These steps are not
   followed if the load() method itself is invoked while
   these steps are running, as the steps above handle that particular kind of abort.

   1. The user agent should cancel the fetching process.

   2. Set the error attribute to a new
      MediaError object whose code attribute
      is set to MEDIA_ERR_ABORTED.

   3. Fire a simple event named abort at
      the media element.

   4. If the media element’s readyState
      attribute has a value equal to HAVE_NOTHING, set
      the element’s networkState attribute to the
      NETWORK_EMPTY value, set the element’s
      show poster flag to true, and fire a simple event named emptied at the element.

      Otherwise, set the element’s networkState
      attribute to the NETWORK_IDLE value.

   5. Set the element’s delaying-the-load-event flag to false. This stops delaying the load event.

   6. Abort the overall resource selection
      algorithm.

   If the media data can be fetched but has non-fatal
   errors or uses, in part, codecs that are unsupported, preventing the user agent from rendering
   the content completely correctly but not preventing playback altogether

   The server returning data that is partially usable but cannot be optimally rendered must
   cause the user agent to render just the bits it can handle, and ignore the rest.

   If the media resource is
   found to declare a media-resource-specific text track that the user agent
   supports

   If the media data is CORS-same-origin, run the steps to
   expose a media-resource-specific text track with the relevant data.

   Cross-origin videos do not expose their subtitles, since that would allow
   attacks such as hostile sites reading subtitles from confidential videos on a user’s
   intranet.

   When the networking task source has queued the
   last task as part of fetching the
   media resource (i.e. once the download has completed), if the fetching process
   completes without errors, including decoding the media data, and if all of the data is available
   to the user agent without network access, then, the user agent must move on to the next step.
   This might never happen, e.g. when streaming an infinite resource such as Web radio, or if the
   resource is longer than the user agent’s ability to cache data.

   While the user agent might still need network access to obtain parts of the media
   resource, the user agent must remain on this step.

   For example, if the user agent has discarded the first half of a video, the
   user agent will remain at this step even once the playback has
   ended, because there is always the chance the user will seek back to the start. In fact,
   in this situation, once playback has ended, the user agent
   will end up firing a suspend event, as described
   earlier.

5. If the user agent ever reaches this step (which can only happen if the entire resource
   gets loaded and kept available): abort the overall resource selection algorithm.

When a media element is to forget the media element’s media-resource-specific
tracks, the user agent must remove from the media element’s list of text
tracks all the media-resource-specific
text tracks, then empty the media element’s audioTracks attribute’s AudioTrackList object,
then empty the media element’s videoTracks
attribute’s VideoTrackList object. No events (in particular, no removetrack events) are fired as part of this; the error and emptied
events, fired by the algorithms that invoke this one, can be used instead.

The preload attribute is intended to provide a hint to
the user agent about what the author thinks will lead to the best user experience. The attribute
may be ignored altogether, for example based on explicit user preferences or based on the
available connectivity.

The preload IDL attribute must
reflect the content attribute of the same name, limited to only known
values.

The buffered attribute must return a new
static normalized TimeRanges object that represents the ranges of the
media resource, if any, that the user agent has buffered, at the time the attribute
is evaluated. Users agents must accurately determine the ranges available, even for media streams
where this can only be determined by tedious inspection.

Typically this will be a single range anchored at the zero point, but if, e.g. the
user agent uses HTTP range requests in response to seeking, then there could be multiple
ranges.

User agents may discard previously buffered data.

Thus, a time position included within a range of the objects return by the buffered attribute at one time can end up being not included in
the range(s) of objects returned by the same attribute at later times.

A media resource has a media timeline that maps times (in seconds) to
positions in the media resource. The origin of a timeline is its earliest defined
position. The duration of a timeline is its last defined position.

Establishing the media
timeline: If the media resource somehow specifies an explicit timeline whose
origin is not negative (i.e. gives each frame a specific time offset and gives the first frame a
zero or positive offset), then the media timeline should be that timeline. (Whether
the media resource can specify a timeline or not depends on the media resource’s format.) If the media resource specifies an
explicit start time and date, then that time and date should be considered the zero point
in the media timeline; the timeline offset will be the time and date,
exposed using the getStartDate() method.

If the media resource has a discontinuous timeline, the user agent must extend the
timeline used at the start of the resource across the entire resource, so that the media
timeline of the media resource increases linearly starting from the
earliest possible position (as defined below), even if the underlying media
data has out-of-order or even overlapping time codes.

For example, if two clips have been concatenated into one video file, but the
video format exposes the original times for the two clips, the video data might expose a timeline
that goes, say, 00:15..00:29 and then 00:05..00:38. However, the user agent would not expose those
times; it would instead expose the times as 00:15..00:29 and 00:29..01:02, as a single video.

In the rare case of a media resource that does not have an explicit timeline, the
zero time on the media timeline should correspond to the first frame of the
media resource. In the even rarer case of a media resource with no
explicit timings of any kind, not even frame durations, the user agent must itself determine the
time for each frame in a user-agent-defined manner.

An example of a file format with no explicit timeline but with explicit frame
durations is the Animated GIF format. An example of a file format with no explicit timings at all
is the JPEG-push format (multipart/x-mixed-replace with JPEG frames, often
used as the format for MJPEG streams).

If, in the case of a resource with no timing information, the user agent will nonetheless be
able to seek to an earlier point than the first frame originally provided by the server, then the
zero time should correspond to the earliest seekable time of the media resource;
otherwise, it should correspond to the first frame received from the server (the point in the
media resource at which the user agent began receiving the stream).

At the time of writing, there is no known format that lacks explicit frame time
offsets yet still supports seeking to a frame before the first frame sent by the server.

In any case, the user agent must ensure that the earliest possible position (as
defined below) using the established media timeline, is greater than or equal to
zero.

The media timeline also has an associated clock. Which clock is used is user-agent
defined, and may be media resource-dependent, but it should approximate the user’s
wall clock.

All the media elements that share current
media controller use the same clock for their media timeline.

Media elements have a current playback position,
which must initially (i.e. in the absence of media data) be zero seconds. The
current playback position is a time on the media timeline.

Media elements also have an official playback
position, which must initially be set to zero seconds. The official playback
position is an approximation of the current playback position that is kept
stable while scripts are running.

Media elements also have a default playback start
position, which must initially be set to zero seconds. This time is used to allow the
element to be seeked even before the media is loaded.

Each media element has a show poster flag. When a media
element is created, this flag must be set to true. This flag is used to control when the
user agent is to show a poster frame for a video element instead of showing the video
contents.

The currentTime attribute must, on
getting, return the media element’s default playback start position,
unless that is zero, in which case it must return the element’s official playback
position. The returned value must be expressed in seconds. On setting, if the media
element has a current media controller, then the user agent must throw an
InvalidStateError exception; otherwise, if the media element’s readyState is HAVE_NOTHING, then it must set the media
element’s default playback start position to the new value; otherwise, it must
set the official playback position to the new value and then seek to the new value. The new value must be interpreted as being in
seconds.

Media elements have an initial playback position,
which must initially (i.e. in the absence of media data) be zero seconds. The
initial playback position is updated when a media resource is loaded.
The initial playback position is a time on the media timeline.

If the media resource is a streaming resource, then the user agent might be unable
to obtain certain parts of the resource after it has expired from its buffer. Similarly, some
media resources might have a media timeline that
doesn’t start at zero. The earliest possible position is the earliest position in the
stream or resource that the user agent can ever obtain again. It is also a time on the media
timeline.

The earliest possible position is not explicitly exposed in the API;
it corresponds to the start time of the first range in the seekable attribute’s TimeRanges object, if any, or
the current playback position otherwise.

When the earliest possible position changes, then: if the current playback
position is before the earliest possible position, the user agent must seek to the earliest possible position; otherwise, if
the user agent has not fired a timeupdate event at the
element in the past 15 to 250ms and is not still running event handlers for such an event, then
the user agent must queue a task to fire a simple event named timeupdate at the element.

Because of the above requirement and the requirement in the resource fetch algorithm that kicks in when the metadata of the clip becomes known, the current
playback position can never be less than the earliest possible position.

If at any time the user agent learns that an audio or video track has ended and all media
data relating to that track corresponds to parts of the media timeline that
are before the earliest possible position, the user agent may queue a
task to first remove the track from the audioTracks
attribute’s AudioTrackList object or the videoTracks attribute’s VideoTrackList object as
appropriate and then fire a trusted event with the name removetrack, that does not bubble and is not cancelable, and that
uses the TrackEvent interface, with the track attribute initialized to the AudioTrack or
VideoTrack object representing the track, at the media element’s
aforementioned AudioTrackList or VideoTrackList object.

The duration attribute must return the time
of the end of the media resource, in seconds, on the media timeline. If
no media data is available, then the attributes must return the Not-a-Number (NaN)
value. If the media resource is not known to be bounded (e.g. streaming radio, or a
live event with no announced end time), then the attribute must return the positive Infinity
value.

The user agent must determine the duration of the media resource before playing
any part of the media data and before setting readyState to a value equal to or greater than HAVE_METADATA, even if doing so requires fetching multiple
parts of the resource.

When the length of the media resource changes to a known value
(e.g. from being unknown to known, or from a previously established length to a new length) the
user agent must queue a task to fire a simple event named durationchange at the media element. (The
event is not fired when the duration is reset as part of loading a new media resource.) If the
duration is changed such that the current playback position ends up being greater
than the time of the end of the media resource, then the user agent must also seek to the time of the end of the media resource.

If an «infinite» stream ends for some reason, then the duration would change
from positive Infinity to the time of the last frame or sample in the stream, and the durationchange event would be fired. Similarly, if the
user agent initially estimated the media resource’s duration instead of determining
it precisely, and later revises the estimate based on new information, then the duration would
change and the durationchange event would be
fired.

Some video files also have an explicit date and time corresponding to the zero time in the
media timeline, known as the timeline offset. Initially, the
timeline offset must be set to Not-a-Number (NaN).

The getStartDate() method must return a new Date object representing the current
timeline offset.

When the ready state of a media element whose networkState is not NETWORK_EMPTY changes, the user agent must follow the steps
given below:

1. Apply the first applicable set of substeps from the following list:

   If the previous ready state was HAVE_NOTHING,
   and the new ready state is HAVE_METADATA

   Queue a task to fire a simple event named loadedmetadata at the element.

   Before this task is run, as part of the event loop mechanism, the
   rendering will have been updated to resize the video element if appropriate.

   If the previous ready state was HAVE_METADATA and the new ready state is HAVE_CURRENT_DATA or greater

   If this is the first time this occurs for this media
   element since the load() algorithm was last
   invoked, the user agent must queue a task to fire a simple event
   named loadeddata at the element.

   If the new ready state is HAVE_FUTURE_DATA
   or HAVE_ENOUGH_DATA, then the relevant steps
   below must then be run also.

   If the previous ready state was HAVE_FUTURE_DATA or more, and the new ready state is
   HAVE_CURRENT_DATA or less

   If the media element was potentially
   playing before its readyState attribute
   changed to a value lower than HAVE_FUTURE_DATA, and the element has not
   ended playback, and playback has not stopped due to errors,
   paused for user interaction, or paused for in-band content, the user
   agent must queue a task to fire a simple event named timeupdate at the element, and queue a task
   to fire a simple event named waiting at
   the element.

   If the previous ready state was HAVE_CURRENT_DATA or less, and the new ready state
   is HAVE_FUTURE_DATA

   The user agent must queue a task to fire a simple event named
   canplay at the element.

   If the element’s paused attribute is false, the user
   agent must queue a task to fire a simple event named playing at the element.

   If the new ready state is HAVE_ENOUGH_DATA

   If the previous ready state was HAVE_CURRENT_DATA or less, the user agent must
   queue a task to fire a simple event named canplay at the element, and, if the element’s paused attribute is false, queue a task to
   fire a simple event named playing
   at the element.

   If the autoplaying flag is true, and the paused attribute is true, and the media element
   has an autoplay attribute specified, and the
   media element’s Document‘s active sandboxing flag set
   does not have the sandboxed automatic features browsing context flag set, then
   the user agent may also run the following substeps:

   1. Set the paused attribute to false.
   2. If the element’s show poster flag is true, set it to false and run the
      time marches on steps.
   3. Queue a task to fire a simple event named play at the element.
   4. Queue a task to fire a simple event named playing at the element.

   User agents do not need to support autoplay, and it is suggested that user
   agents honor user preferences on the matter. Authors are urged to use the autoplay attribute rather than using script to force the
   video to play, so as to allow the user to override the behavior if so desired.

   In any case, the user agent must finally queue a task to fire a simple
   event named canplaythrough at the element.

2. If the media element has a current media controller, then
   report the controller state for the media element’s current media
   controller.

The paused attribute represents whether the
media element is paused or not. The attribute must initially be true.

A media element is a blocked media element if its readyState attribute is in the HAVE_NOTHING state, the HAVE_METADATA state, or the HAVE_CURRENT_DATA state, or if the element has
paused for user interaction or paused for in-band content.

A media element is said to be potentially playing when its paused attribute is false, the element has not ended
playback, playback has not stopped due to errors, the element either has no
current media controller or has a current media controller but is not
blocked on its media controller, and the element is not a blocked media
element.

A waiting DOM event can be fired as a result of an element that is
potentially playing stopping playback due to its readyState attribute changing to a value lower than HAVE_FUTURE_DATA.

A media element is said to have ended playback when:

• The element’s readyState attribute is HAVE_METADATA or greater, and

• Either:

  • The current playback position is the end of the media resource,
    and
  • The direction of playback is forwards, and
  • Either the media element does not have a loop attribute specified, or the media element has
    a current media controller.

  Or:

  • The current playback position is the earliest possible position,
    and
  • The direction of playback is backwards.

The ended attribute must return true if, the
last time the event loop reached step 1, the media element had
ended playback and the direction of playback was forwards, and false
otherwise.

A media element is said to have stopped due to errors when the
element’s readyState attribute is HAVE_METADATA or greater, and the user agent encounters a non-fatal error during the processing of the
media data, and due to that error, is not able to play the content at the
current playback position.

A media element is said to have paused for user interaction when its
paused attribute is false, the readyState attribute is either HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA and the user agent has reached a point
in the media resource where the user has to make a selection for the resource to
continue. If the media element has a current media controller when this
happens, then the user agent must report the controller state for the media
element’s current media controller. If the media element has a
current media controller when the user makes a selection, allowing playback to
resume, the user agent must similarly report the controller state for the media
element’s current media controller.

It is possible for a media element to have both ended playback and
paused for user interaction at the same time.

When a media element that is potentially playing stops playing
because it has paused for user interaction, the user agent must queue a
task to fire a simple event named timeupdate at the element.

A media element is said to have paused for in-band content when its
paused attribute is false, the readyState attribute is either HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA and the user agent has suspended
playback of the media resource in order to play content that is temporally anchored
to the media resource and has a non-zero length, or to play content that is
temporally anchored to a segment of the media resource but has a length longer than
that segment. If the media element has a current media controller when
this happens, then the user agent must report the controller state for the
media element’s current media controller. If the media
element has a current media controller when the user agent unsuspends
playback, the user agent must similarly report the controller state for the
media element’s current media controller.

One example of when a media element would be paused for
in-band content is when the user agent is playing audio descriptions from an external WebVTT file, and
the synthesized speech generated for a cue is longer than the time between the text track
cue start time and the text track cue end time.

When the current playback position reaches the end of the media
resource when the direction of playback is forwards, then the user agent must
follow these steps:

1. If the media element has a loop
   attribute specified and does not have a current media controller, then seek to the earliest possible position of the
   media resource and abort these steps.

2. As defined above, the ended IDL attribute starts
   returning true once the event loop’s current task
   ends.

3. Queue a task to fire a simple event named timeupdate at the media element.

4. Queue a task that, if the media element does not have a
   current media controller, and the media element has still ended
   playback, and the direction of playback is still forwards, and paused is false, changes paused to true and fires a
   simple event named pause at the media
   element.

5. Queue a task to fire a simple event named ended at the media element.

6. If the media element has a current media controller, then
   report the controller state for the media element’s current media
   controller.

When the current playback position reaches the earliest possible
position of the media resource when the direction of playback is
backwards, then the user agent must only queue a task to fire a simple
event named timeupdate at the element.

The defaultPlaybackRate attribute
gives the desired speed at which the media resource is to play, as a multiple of its
intrinsic speed. The attribute is mutable: on getting it must return the last value it was set to,
or 1.0 if it hasn’t yet been set; on setting the attribute must be set to the new value.

The defaultPlaybackRate is used
by the user agent when it exposes a user
interface to the user.

The playbackRate attribute gives the
effective playback rate (assuming there is no current media controller
overriding it), which is the speed at which the media resource plays, as a multiple
of its intrinsic speed. If it is not equal to the defaultPlaybackRate, then the implication is that the
user is using a feature such as fast forward or slow motion playback. The attribute is mutable: on
getting it must return the last value it was set to, or 1.0 if it hasn’t yet been set; on setting
the attribute must be set to the new value, and the playback will change speed (if the element is
potentially playing and there is no current media controller).

When the defaultPlaybackRate
or playbackRate attributes change value (either by
being set by script or by being changed directly by the user agent, e.g. in response to user
control) the user agent must queue a task to fire a simple event named
ratechange at the media element.

The defaultPlaybackRate and
playbackRate attributes have no effect when the
media element has a current media controller; the namesake attributes on
the MediaController object are used instead in that situation.

The played attribute must return a new static
normalized TimeRanges object that represents the ranges of points on the
media timeline of the media resource reached through the usual monotonic
increase of the current playback position during normal playback, if any, at the time
the attribute is evaluated.

When the play() method on a media
element is invoked, the user agent must run the following steps.

1. If the media element’s networkState attribute has the value NETWORK_EMPTY, invoke the media element’s
   resource selection algorithm.

2. If the playback has ended and the direction of
   playback is forwards, and the media element does not have a current
   media controller, seek to the earliest possible
   position of the media resource.

   This will cause the user agent to queue a
   task to fire a simple event named timeupdate at the media element.

3. If the media element has a current media controller, then
   bring the media element up to speed with its new media controller.

4. If the media element’s paused attribute is
   true, run the following substeps:

   1. Change the value of paused to false.

   2. If the show poster flag is true, set the element’s show poster
      flag to false and run the time marches on steps.

   3. Queue a task to fire a simple event named play at the element.

   4. If the media element’s readyState
      attribute has the value HAVE_NOTHING, HAVE_METADATA, or HAVE_CURRENT_DATA, queue a task to
      fire a simple event named waiting at the
      element.

      Otherwise, the media element’s readyState attribute has the value HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA: queue a task to
      fire a simple event named playing at the
      element.

5. Set the media element’s autoplaying flag to false.

6. If the media element has a current media controller, then
   report the controller state for the media element’s current media
   controller.

When the pause() method is invoked, and when
the user agent is required to pause the media element, the user agent must run the
following steps:

1. If the media element’s networkState attribute has the value NETWORK_EMPTY, invoke the media element’s
   resource selection algorithm.

2. Set the media element’s autoplaying flag to false.

3. If the media element’s paused attribute
   is false, run the following steps:

   1. Change the value of paused to true.

   2. Queue a task to fire a simple
      event named timeupdate at the
      element.

   3. Queue a task to fire a simple
      event named pause
      at the element.

   4. Set the official playback position to the current playback
      position.

4. If the media element has a current media controller, then
   report the controller state for the media element’s current media
   controller.

The effective playback rate is not necessarily the element’s playbackRate. When a media element has a
current media controller, its effective playback rate is the
MediaController‘s media controller playback rate. Otherwise, the
effective playback rate is just the element’s playbackRate. Thus, the current media
controller overrides the media element.

If the effective playback rate is positive or zero, then the direction of
playback is forwards. Otherwise, it is backwards.

When a media element is potentially playing and
its Document is a fully active Document, its current
playback position must increase monotonically at effective playback rate units
of media time per unit time of the media timeline’s clock. (This specification always
refers to this as an increase, but that increase could actually be a decrease if
the effective playback rate is negative.)

The effective playback rate can be 0.0, in which case the
current playback position doesn’t move, despite playback not being paused (paused doesn’t become true, and the pause event doesn’t fire).

This specification doesn’t define how the user agent achieves the appropriate
playback rate — depending on the protocol and media available, it is plausible that the user
agent could negotiate with the server to have the server provide the media data at the appropriate
rate, so that (except for the period between when the rate is changed and when the server updates
the stream’s playback rate) the client doesn’t actually have to drop or interpolate any
frames.

Any time the user agent provides a stable state,
the official playback position must be set to the current playback
position.

When the direction of playback is backwards, any corresponding audio must be
muted. When the effective playback rate is so low or so high that the user agent
cannot play audio usefully, the corresponding audio must also be muted. If the effective
playback rate is not 1.0, the user agent may apply pitch adjustments to the audio as
necessary to render it faithfully.

Media elements that are potentially playing
while not in a Document must not play any video, but should play any
audio component. Media elements must not stop playing just because all references to them have
been removed; only once a media element is in a state where no further audio could ever be played
by that element may the element be garbage collected.

It is possible for an element to which no explicit references exist to play audio,
even if such an element is not still actively playing: for instance, it could have a current
media controller that still has references and can still be unpaused, or it could be
unpaused but stalled waiting for content to buffer.

Each media element has a list of newly introduced cues, which must be
initially empty. Whenever a text track cue is added to the list of cues of a text track that is in the list of text
tracks for a media element, that cue must
be added to the media element’s list of newly introduced cues. Whenever
a text track is added to the list of text tracks for a media
element, all of the cues in that text
track’s list of cues must be added to the
media element’s list of newly introduced cues. When a media
element’s list of newly introduced cues has new cues added while the
media element’s show poster flag is not set, then the user agent must
run the time marches on steps.

When a text track cue is removed from the list of cues of a text track that is in the list of text
tracks for a media element, and whenever a text track is removed
from the list of text tracks of a media element, if the media
element’s show poster flag is not set, then the user agent must run the
time marches on steps.

When the current playback position of a media element changes (e.g.
due to playback or seeking), the user agent must run the time marches on steps. If the
current playback position changes while the steps are running, then the user agent
must wait for the steps to complete, and then must immediately rerun the steps. (These steps are
thus run as often as possible or needed — if one iteration takes a long time, this can cause
certain cues to be skipped over as the user agent rushes ahead
to «catch up».)

The time marches on steps are as follows:

1. Let current cues be a list of cues, initialized to contain all the cues of all
   the hidden or showing text tracks of the media
   element (not the disabled ones) whose start times are less than or equal to the current
   playback position and whose end times are
   greater than the current playback position.

2. Let other cues be a list of cues,
   initialized to contain all the cues of hidden and showing text tracks of the media element that are not present in current cues.

3. Let last time be the current playback position at the
   time this algorithm was last run for this media element, if this is not the first
   time it has run.

4. If the current playback position has, since the last time this algorithm was
   run, only changed through its usual monotonic increase during normal playback, then let missed cues be the list of cues in other cues whose start times are
   greater than or equal to last time and whose end times are less than or equal to the current playback position.
   Otherwise, let missed cues be an empty list.

5. Remove all the cues in missed cues
   that are also in the media element’s list of newly introduced cues, and
   then empty the element’s list of newly introduced cues.

6. If the time was reached through the usual monotonic increase of the current playback
   position during normal playback, and if the user agent has not fired a timeupdate event at the element in the past 15 to 250ms and
   is not still running event handlers for such an event, then the user agent must queue a
   task to fire a simple event named timeupdate at the element. (In the other cases, such as
   explicit seeks, relevant events get fired as part of the overall process of changing the
   current playback position.)

   The event thus is not to be fired faster than about 66Hz or slower than 4Hz
   (assuming the event handlers don’t take longer than 250ms to run). User agents are encouraged to
   vary the frequency of the event based on the system load and the average cost of processing the
   event each time, so that the UI updates are not any more frequent than the user agent can
   comfortably handle while decoding the video.

7. If all of the cues in current cues
   have their text track cue active flag set, none of the cues in other cues have their text track cue active
   flag set, and missed cues is empty, then abort these steps.

8. If the time was reached through the usual monotonic increase of the current playback
   position during normal playback, and there are cues
   in other cues that have their text track cue pause-on-exit flag
   set and that either have their text track cue active flag set or are also in missed cues, then immediately pause the
   media element.

   In the other cases, such as explicit seeks, playback is not paused by going past
   the end time of a cue, even if that cue has its text track cue pause-on-exit flag set.

9. Let events be a list of tasks,
   initially empty. Each task in this list will be associated
   with a text track, a text track cue, and a time, which are used to
   sort the list before the tasks are queued.

   Let affected tracks be a list of text
   tracks, initially empty.

   When the steps below say to prepare an event named event for a
   text track cue target with a time time, the
   user agent must run these substeps:

   1. Let track be the text track with which the text
      track cue target is associated.

   2. Create a task to fire a simple event
      named event at target.

   3. Add the newly created task to events, associated with the time time, the text
      track track, and the text track cue target.

   4. Add track to affected tracks.

10. For each text track cue in missed
    cues, prepare an event named enter for the
    TextTrackCue object with the text track cue start time.

11. For each text track cue in other
    cues that either has its text track cue active flag set or is in missed cues, prepare an event named exit for the TextTrackCue object with the later of the
    text track cue end time and the text track cue start time.

12. For each text track cue in current
    cues that does not have its text track cue active flag set, prepare an
    event named enter for the TextTrackCue
    object with the text track cue start time.

13. Sort the tasks in events in ascending
    time order (tasks with earlier times first).

    Further sort tasks in events that have
    the same time by the relative text track cue order of the text track cues associated with these tasks.

    Finally, sort tasks in events that have
    the same time and same text track cue order by placing tasks that fire enter events before
    those that fire exit events.

14. Queue each task in
    events, in list order.

15. Sort affected tracks in the same order as the text tracks appear in the media element’s list of text
    tracks, and remove duplicates.

16. For each text track in affected tracks, in the list
    order, queue a task to fire a simple event named cuechange at the TextTrack object, and, if the
    text track has a corresponding track element, to then fire a
    simple event named cuechange at the
    track element as well.

17. Set the text track cue active flag of all the cues in the current cues, and unset the text track cue
    active flag of all the cues in the other
    cues.

18. Run the rules for updating the text track rendering of each of the text tracks in affected tracks that are showing. For example, for text
    tracks based on WebVTT, the rules for updating the display of WebVTT
    text tracks. [WEBVTT]

For the purposes of the algorithm above, a text track cue is considered to be part
of a text track only if it is listed in the text track list of cues, not
merely if it is associated with the text track.

If the media element’s Document stops being a
fully active document, then the playback will stop
until the document is active again.

When a media element is removed
from a Document, the user agent must run the following steps:

1. Asynchronously await a stable state, allowing the task that removed the media element from the
   Document to continue. The synchronous section consists of all the
   remaining steps of this algorithm. (Steps in the synchronous section are marked with
   ⌛.)

2. ⌛ If the media element is in a Document,
   abort these steps.

3. ⌛ If the media element’s networkState attribute has the value NETWORK_EMPTY, abort these steps.

4. ⌛ Pause the media element.

The seeking attribute must initially have the
value false.

When the user agent is required to seek to a particular new playback position in the media resource, optionally with the
approximate-for-speed flag set, it means that the user agent must run the following steps.
This algorithm interacts closely with the event loop mechanism; in particular, it has
a synchronous section (which is triggered as part of the event loop
algorithm). Steps in that section are marked with ⌛.

1. Set the media element’s show poster flag to false.

2. If the media element’s readyState
   is HAVE_NOTHING, abort these steps.

3. If the element’s seeking IDL attribute is true,
   then another instance of this algorithm is already running. Abort that other instance of the
   algorithm without waiting for the step that it is running to complete.

4. Set the seeking IDL attribute to true.

5. If the seek was in response to a DOM method call or setting of an IDL attribute, then
   continue the script. The remainder of these steps must be run asynchronously. With the exception
   of the steps marked with ⌛, they could be aborted at any time by another instance of this
   algorithm being invoked.

6. If the new playback position is later than the end of the media
   resource, then let it be the end of the media resource instead.

7. If the new playback position is less than the earliest possible
   position, let it be that position instead.

8. If the (possibly now changed) new playback position is not in one of
   the ranges given in the seekable attribute, then let it
   be the position in one of the ranges given in the seekable attribute that is the nearest to the new
   playback position. If two positions both satisfy that constraint (i.e. the new playback position is exactly in the middle between two ranges in the seekable attribute) then use the position that is closest to
   the current playback position. If there are no ranges given in the seekable attribute then set the seeking IDL attribute to false and abort these steps.

9. If the approximate-for-speed flag is set, adjust the new playback
   position to a value that will allow for playback to resume promptly. If new
   playback position before this step is before current playback position, then
   the adjusted new playback position must also be before the current
   playback position. Similarly, if the new playback position before
   this step is after current playback position, then the adjusted new
   playback position must also be after the current playback position.

   For example, the user agent could snap to the nearest key frame, so that it
   doesn’t have to spend time decoding then discarding intermediate frames before resuming
   playback.

10. Queue a task to fire a simple event named seeking at the element.

11. Set the current playback position to the given new playback
    position.

    If the media element was potentially playing
    immediately before it started seeking, but seeking caused its readyState attribute to change to a value lower than HAVE_FUTURE_DATA, then a waiting will be
    fired at the element.

    The currentTime attribute does not
    get updated asynchronously, as it returns the official playback position, not the
    current playback position.

12. Wait until the user agent has established whether or not the media data for
    the new playback position is available, and, if it is, until it has decoded
    enough data to play back that position.

13. Await a stable state. The synchronous section consists of all
    the remaining steps of this algorithm. (Steps in the synchronous section are marked
    with ⌛.)

14. ⌛ Set the seeking IDL attribute to
    false.

15. ⌛ Run the time marches on steps.

16. ⌛ Queue a task to fire a simple event
    named timeupdate at the element.

17. ⌛ Queue a task to fire a simple event named seeked at the element.

The seekable attribute must return a new
static normalized TimeRanges object that represents the ranges of the
media resource, if any, that the user agent is able to seek to, at the time the
attribute is evaluated.

If the user agent can seek to anywhere in the media resource, e.g.
because it is a simple movie file and the user agent and the server support HTTP Range requests,
then the attribute would return an object with one range, whose start is the time of the first
frame (the earliest possible position, typically zero), and whose end is the same as
the time of the first frame plus the duration attribute’s
value (which would equal the time of the last frame, and might be positive Infinity).

The range might be continuously changing, e.g. if the user agent is buffering a
sliding window on an infinite stream. This is the behavior seen with DVRs viewing live TV, for
instance.

Media resources might be internally scripted or
interactive. Thus, a media element could play in a non-linear fashion. If this
happens, the user agent must act as if the algorithm for seeking was used whenever the current playback position
changes in a discontinuous fashion (so that the relevant events fire). If the media
element has a current media controller, then the user agent must seek
the media controller appropriately instead.

The audioTracks attribute of a
media element must return a live AudioTrackList object
representing the audio tracks available in the media element’s media
resource. The same object must be returned each time.

The videoTracks attribute of a
media element must return a live VideoTrackList object
representing the video tracks available in the media element’s media
resource. The same object must be returned each time.

There are only ever one AudioTrackList object and one
VideoTrackList object per media element, even if another media
resource is loaded into the element: the objects are reused. (The AudioTrack
and VideoTrack objects are not, though.)

In this example, a script defines a function that takes a URL to a video and a reference to an
element where the video is to be placed. That function then tries to load the video, and, once it
is loaded, checks to see if there is a sign-language track available. If there is, it also
displays that track. Both tracks are just placed in the given container; it’s assumed that styles
have been applied to make this work in a pretty way!

<script>
 function loadVideo(url, container) {
   var controller = new MediaController();
   var video = document.createElement('video');
   video.src = url;
   video.autoplay = true;
   video.controls = true;
   video.controller = controller;
   container.appendChild(video);
   video.onloadedmetadata = function (event) {
     for (var i = 0; i < video.videoTracks.length; i += 1) {
       if (video.videoTracks[i].kind == 'sign') {
         var sign = document.createElement('video');
         sign.src = url + '#track=' + video.videoTracks[i].id; 
         sign.autoplay = true;
         sign.controller = controller;
         container.appendChild(sign);
         return;
       }
     }
   };
 }
</script>

An AudioTrackList object represents a dynamic list of zero or more audio tracks,
of which zero or more can be enabled at a time. Each audio track is represented by an
AudioTrack object.

A VideoTrackList object represents a dynamic list of zero or more video tracks, of
which zero or one can be selected at a time. Each video track is represented by a
VideoTrack object.

Tracks in AudioTrackList and VideoTrackList objects must be
consistently ordered. If the media resource is in a format that defines an order,
then that order must be used; otherwise, the order must be the relative order in which the tracks
are declared in the media resource. The order used is called the natural order
of the list.

Each track in a TrackList thus has an index; the first has the index
0, and each subsequent track is numbered one higher than the previous one. If a media
resource dynamically adds or removes audio or video tracks, then the indices of the tracks
will change dynamically. If the media resource changes entirely, then all the
previous tracks will be removed and replaced with new tracks.

The AudioTrackList.length and VideoTrackList.length attributes must return
the number of tracks represented by their objects at the time of getting.

The supported property indices of AudioTrackList and
VideoTrackList objects at any instant are the numbers from zero to the number of
tracks represented by the respective object minus one, if any tracks are represented. If an
AudioTrackList or VideoTrackList object represents no tracks, it has no
supported property indices.

To determine the value of an indexed property for a given index index in an AudioTrackList or VideoTrackList object list, the user agent must return the AudioTrack or
VideoTrack object that represents the indexth track in list.

The AudioTrackList.getTrackById(id) and VideoTrackList.getTrackById(id) methods must return the first AudioTrack or
VideoTrack object (respectively) in the AudioTrackList or
VideoTrackList object (respectively) whose identifier is equal to the value of the
id argument (in the natural order of the list, as defined above). When no
tracks match the given argument, the methods must return null.

The AudioTrack and VideoTrack objects represent specific tracks of a
media resource. Each track can have an identifier, category, label, and language.
These aspects of a track are permanent for the lifetime of the track; even if a track is removed
from a media resource’s AudioTrackList or VideoTrackList
objects, those aspects do not change.

In addition, AudioTrack objects can each be enabled or disabled; this is the audio
track’s enabled state. When an AudioTrack is created, its enabled state
must be set to false (disabled). The resource fetch
algorithm can override this.

Similarly, a single VideoTrack object per VideoTrackList object can
be selected, this is the video track’s selection state. When a VideoTrack is
created, its selection state must be set to false (not selected). The resource fetch algorithm can override this.

The AudioTrack.id and VideoTrack.id attributes must return the identifier
of the track, if it has one, or the empty string otherwise. If the media resource is
in a format that supports the Media Fragments URI fragment identifier syntax, the
identifier returned for a particular track must be the same identifier that would enable the track
if used as the name of a track in the track dimension of such a fragment identifier. [MEDIAFRAG]

For example, in Ogg files, this would be the Name header field of the track. [OGGSKELETONHEADERS]

The AudioTrack.kind and VideoTrack.kind attributes must return the category
of the track, if it has one, or the empty string otherwise.

The category of a track is the string given in the first column of the table below that is the
most appropriate for the track based on the definitions in the table’s second and third columns,
as determined by the metadata included in the track in the media resource. The cell
in the third column of a row says what the category given in the cell in the first column of that
row applies to; a category is only appropriate for an audio track if it applies to audio tracks,
and a category is only appropriate for video tracks if it applies to video tracks. Categories must
only be returned for AudioTrack objects if they are appropriate for audio, and must
only be returned for VideoTrack objects if they are appropriate for video.

For Ogg files, the Role header field of the track gives the relevant metadata. For DASH media
resources, the Role element conveys the information. For WebM, only the
FlagDefault element currently maps to a value. [OGGSKELETONHEADERS] [DASH] [WEBMCG]

The AudioTrack.label and VideoTrack.label attributes must return the label
of the track, if it has one, or the empty string otherwise.

The AudioTrack.language and VideoTrack.language attributes must return the
BCP 47 language tag of the language of the track, if it has one, or the empty string otherwise. If
the user agent is not able to express that language as a BCP 47 language tag (for example because
the language information in the media resource’s format is a free-form string without
a defined interpretation), then the method must return the empty string, as if the track had no
language.

The AudioTrack.enabled attribute, on
getting, must return true if the track is currently enabled, and false otherwise. On setting, it
must enable the track if the new value is true, and disable it otherwise. (If the track is no
longer in an AudioTrackList object, then the track being enabled or disabled has no
effect beyond changing the value of the attribute on the AudioTrack object.)

Whenever an audio track in an AudioTrackList is enabled or disabled, the user
agent must queue a task to fire a simple event named change at the AudioTrackList object.

The VideoTrackList.selectedIndex attribute
must return the index of the currently selected track, if any. If the VideoTrackList
object does not currently represent any tracks, or if none of the tracks are selected, it must
instead return −1.

The VideoTrack.selected attribute, on
getting, must return true if the track is currently selected, and false otherwise. On setting, it
must select the track if the new value is true, and unselect it otherwise. If the track is in a
VideoTrackList, then all the other VideoTrack objects in that list must
be unselected. (If the track is no longer in a VideoTrackList object, then the track
being selected or unselected has no effect beyond changing the value of the attribute on the
VideoTrack object.)

Whenever a track in a VideoTrackList that was previously not selected is selected,
the user agent must queue a task to fire a simple event named change at the VideoTrackList object. This task must be queued before the
task that fires the resize event, if any.

The following are the event handlers (and their corresponding event handler event types) that must be supported, as event handler IDL attributes,
by all objects implementing the AudioTrackList and VideoTrackList
interfaces:

The task source for the tasks listed in this
section is the DOM manipulation task source.

In this example, a video that uses a format that supports the Media Fragments URI
fragment identifier syntax is embedded in such a way that the alternative angles labeled
«Alternative» are enabled instead of the default video track. [MEDIAFRAG]

<video src="myvideo#track=Alternative"></video>