video
elementaudio
elementsource
elementvideo
elementStatus: Last call for comments. ISSUE-9 (video-accessibility) blocks progress to Last Call
controls
attribute: Interactive content.src
attribute:
transparent, but with no media element descendants.src
attribute: one or more source
elements, then
transparent, but with no media element descendants.src
poster
preload
autoplay
loop
controls
width
height
interface HTMLVideoElement : HTMLMediaElement { attribute DOMString width; attribute DOMString height; readonly attribute unsigned long videoWidth; readonly attribute unsigned long videoHeight; attribute DOMString poster; };
A video
element is used for playing videos or
movies.
Content may be provided inside the video
element. User agents should not show this content
to the user; it is intended for older Web browsers which do
not support video
, so that legacy video plugins can be
tried, or to show text to the users of these older browsers informing
them of how to access the video contents.
In particular, this content is not intended to address accessibility concerns. To make video content accessible to the blind, deaf, and those with other physical or cognitive disabilities, authors are expected to provide alternative media streams and/or to embed accessibility aids (such as caption or subtitle tracks, audio description tracks, or sign-language overlays) into their media streams.
The video
element is a media element
whose media data is ostensibly video data, possibly
with associated audio data.
The src
, preload
, autoplay
, loop
, and controls
attributes are the attributes common to all media
elements.
The poster
attribute gives the address of an image file that the user agent can
show while no video data is available. The attribute, if present,
must contain a valid non-empty URL potentially surrounded by
spaces. If the specified resource is to be
used, then, when the element is created or when the poster
attribute is set, if its
value is not the empty string, its value must be resolved relative to the element, and
if that is successful, the resulting absolute URL must
be fetched, from the element's
Document
's origin; this must delay
the load event of the element's document. The poster
frame is then the image obtained from that resource, if
any.
The image given by the poster
attribute, the poster
frame, is intended to be a representative frame of the video
(typically one of the first non-blank frames) that gives the user an
idea of what the video is like.
The poster
IDL
attribute must reflect the poster
content attribute.
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), the video
element
represents either the poster frame, or
nothing.
When a video
element is paused and the current playback position is the first
frame of video, the element represents either the frame
of video corresponding to the current playback position or the poster
frame, at the discretion of the user agent.
Notwithstanding the above, the poster frame should be preferred over nothing, but the poster frame should not be shown again after a frame of video has been shown.
When a video
element is paused at any other position, the
element represents the frame of video corresponding to
the current playback
position, or, if that is not yet available (e.g. because the
video is seeking or buffering), the last frame of the video to have
been rendered.
When a video
element is potentially
playing, it 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. Similarly, any audio associated with the video must, if
played, be played synchronized with the current playback
position, at the specified volume with the specified mute state.
When a video
element is neither potentially
playing nor paused
(e.g. when seeking or stalled), the element represents
the last frame of the video to have been rendered.
Which frame in a video stream corresponds to a particular playback position is defined by the video stream's format.
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.
videoWidth
videoHeight
These attributes return the intrinsic dimensions of the video, or zero if the dimensions are not known.
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.
The video
element supports dimension
attributes.
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.
The intrinsic width of a video
element's playback
area is the intrinsic
width of the video resource, if that is available; otherwise
it is the intrinsic width of the poster frame, if that
is available; otherwise it is 300 CSS pixels.
The intrinsic height of a video
element's playback
area is the intrinsic
height of the video resource, if that is available; otherwise
it is the intrinsic height of the poster frame, if that
is available; otherwise it is 150 CSS pixels.
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.
User agents should not provide a public API to cause videos to be shown full-screen. A script, combined with a carefully crafted video file, could trick the user into thinking a system-modal dialog had been shown, and prompt the user for a password. There is also the danger of "mere" annoyance, with pages launching full-screen videos when links are clicked or pages navigated. Instead, user-agent-specific interface features may be provided to easily allow the user to obtain a full-screen playback mode.
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>
audio
elementStatus: Last call for comments
controls
attribute: Interactive content.src
attribute:
transparent, but with no media element descendants.src
attribute: one or more source
elements, then
transparent, but with no media element descendants.src
preload
autoplay
loop
controls
[NamedConstructor=Audio(), NamedConstructor=Audio(in DOMString src)] interface HTMLAudioElement : HTMLMediaElement {};
An audio
element represents a sound or
audio stream.
Content may be provided inside the audio
element. User agents should not show this content
to the user; it is intended for older Web browsers which do
not support audio
, so that legacy audio plugins can be
tried, or to show text to the users of these older browsers informing
them of how to access the audio contents.
In particular, this content is not intended to address accessibility concerns. To make audio content accessible to the deaf or to those with other physical or cognitive disabilities, authors are expected to provide alternative media streams and/or to embed accessibility aids (such as transcriptions) into their media streams.
The audio
element is a media element
whose media data is ostensibly audio data.
The src
, preload
, autoplay
, loop
, and controls
attributes are the attributes common to all media
elements.
When an audio
element is potentially
playing, it must have its audio data played synchronized with
the current playback position, at the specified volume with the specified mute state.
When an audio
element is not potentially
playing, audio must not play for the element.
Audio
( [ url ] )Returns a new audio
element, with the src
attribute set to the value
passed in the argument, if applicable.
Two constructors are provided for creating
HTMLAudioElement
objects (in addition to the factory
methods from DOM Core such as createElement()
): Audio()
and Audio(src)
. When invoked as constructors,
these must return a new HTMLAudioElement
object (a new
audio
element). The element must have its preload
attribute set to the
literal value "auto
". If the src argument is present, the object created must have
its src
content attribute set to
the provided value, and the user agent must invoke the object's
resource selection
algorithm before returning. 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.
source
elementStatus: Last call for comments
src
type
media
interface HTMLSourceElement : HTMLElement { attribute DOMString src; attribute DOMString type; attribute DOMString media; };
The source
element allows authors to specify
multiple alternative media
resources for media
elements. It does not represent anything on its own.
The src
attribute
gives the address of the media resource. The value must
be a valid non-empty URL potentially surrounded by
spaces. This attribute must be present.
The type
attribute gives the type of the media resource, to help
the user agent determine if it can play this media
resource before fetching it. If specified, its value must be
a valid MIME type. The codecs
parameter may be specified and might be necessary to specify exactly
how the resource is encoded. [RFC4281]
The following list shows some examples of how to use the codecs=
MIME parameter in the type
attribute.
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
<source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
<source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>
<source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
<source src='video.ogv' type='video/ogg; codecs="theora, speex"'>
<source src='audio.ogg' type='audio/ogg; codecs=vorbis'>
<source src='audio.spx' type='audio/ogg; codecs=speex'>
<source src='audio.oga' type='audio/ogg; codecs=flac'>
<source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'>
<source src='video.mkv' type='video/x-matroska; codecs="theora, vorbis"'>
The media
attribute gives the intended media type of the media
resource, to help the user agent determine if this
media resource is useful to the user before fetching
it. Its value must be a valid media query.
The default, if the media
attribute is omitted, is
"all
", meaning that by default the media
resource is suitable for all media.
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 the 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>
Status: Last call for comments
Media elements implement the following interface:
interface HTMLMediaElement : HTMLElement { // error state readonly attribute MediaError error; // network state attribute DOMString src; readonly attribute DOMString currentSrc; const unsigned short NETWORK_EMPTY = 0; const unsigned short NETWORK_IDLE = 1; const unsigned short NETWORK_LOADING = 2; const unsigned short NETWORK_NO_SOURCE = 3; readonly attribute unsigned short networkState; attribute DOMString preload; readonly attribute TimeRanges buffered; void load(); DOMString canPlayType(in DOMString type); // ready state const unsigned short HAVE_NOTHING = 0; const unsigned short HAVE_METADATA = 1; const unsigned short HAVE_CURRENT_DATA = 2; const unsigned short HAVE_FUTURE_DATA = 3; const unsigned short HAVE_ENOUGH_DATA = 4; readonly attribute unsigned short readyState; readonly attribute boolean seeking; // playback state attribute float currentTime; readonly attribute float startTime; readonly attribute float duration; readonly attribute boolean paused; attribute float defaultPlaybackRate; attribute float playbackRate; readonly attribute TimeRanges played; readonly attribute TimeRanges seekable; readonly attribute boolean ended; attribute boolean autoplay; attribute boolean loop; void play(); void pause(); // controls attribute boolean controls; attribute float volume; attribute boolean muted; };
The media element attributes, src
, preload
, autoplay
, loop
, and controls
, apply to all media elements. They are defined in
this section.
Media elements are used to present audio data, or video and audio data, to the user. This is referred to as media data in this section, since this section applies equally to media elements for audio or for video. The term media resource is used to refer to the complete set of media data, e.g. the complete video file, or complete audio file.
Except where otherwise specified, the task source for all the tasks queued in this section and its subsections is the media element event task source.
Status: Last call for comments
error
Returns a MediaError
object representing the
current error state of the element.
Returns null if there is no error.
All media elements have an
associated error status, which records the last error the element
encountered since its resource selection
algorithm was last invoked. The error
attribute, on
getting, must return the MediaError
object created for
this last error, or null if there has not been an error.
interface MediaError { const unsigned short MEDIA_ERR_ABORTED = 1; const unsigned short MEDIA_ERR_NETWORK = 2; const unsigned short MEDIA_ERR_DECODE = 3; const unsigned short MEDIA_ERR_SRC_NOT_SUPPORTED = 4; readonly attribute unsigned short code; };
error
. code
Returns the current error's error code, from the list below.
The code
attribute of a MediaError
object must return the code
for the error, which must be one of the following:
MEDIA_ERR_ABORTED
(numeric value 1)MEDIA_ERR_NETWORK
(numeric value 2)MEDIA_ERR_DECODE
(numeric value 3)MEDIA_ERR_SRC_NOT_SUPPORTED
(numeric value 4)src
attribute was not suitable.Status: Last call for comments
The src
content
attribute on media elements gives
the address of the media resource (video, audio) to show. The
attribute, if present, must contain a valid non-empty
URL potentially surrounded by spaces.
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.
currentSrc
Returns the address of the current media resource.
Returns the empty string when there is no media resource.
The currentSrc
IDL
attribute is initially the empty string. Its value is changed by the
resource selection
algorithm defined below.
There are two ways to specify a media
resource, the src
attribute, or source
elements. The attribute overrides
the elements.
Status: Last call for comments
A media resource can be described in terms of its
type, specifically a MIME type, optionally
with a codecs
parameter. [RFC4281]
Types are usually somewhat incomplete descriptions; for example
"video/mpeg
" doesn't say anything except what
the container type is, and even a type like "video/mp4; codecs="avc1.42E01E,
mp4a.40.2"
" doesn't include information like the actual
bitrate (only the maximum bitrate). Thus, given a type, a user agent
can often only know whether it might be able to play
media of that type (with varying levels of confidence), or whether
it definitely cannot play media of that type.
A type that the user agent knows it cannot render is one that describes a resource that the user agent definitely does not support, for example because it doesn't recognize the container type, or it doesn't support the listed codecs.
The MIME type "application/octet-stream
" with no parameters is
never a type that the user agent knows it cannot
render. User agents must treat that type as equivalent to the
lack of any explicit Content-Type
metadata when it is used to label a potential media
resource.
In the absence of a
specification to the contrary, the MIME type "application/octet-stream
" when used with
parameters, e.g. "application/octet-stream;codecs=theora
", is
a type that the user agent knows it cannot render.
canPlayType
(type)Returns the empty string (a negative response), "maybe", or "probably" based on how confident the user agent is that it can play media resources of the given type.
The canPlayType(type)
method must return the empty
string if type is a type that the user
agent knows it cannot render; it must return "probably
" if the user agent is confident that the
type represents a media resource that it can render if
used in with this audio
or video
element;
and it must return "maybe
"
otherwise. Implementors are encouraged to return "maybe
" unless the type can be confidently
established as being supported or not. Generally, a user agent
should never return "probably
" if the type
doesn't have a codecs
parameter.
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 Plug-in" 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>
The type
attribute of the source
element allows the user agent
to avoid downloading resources that use formats it cannot
render.
Status: Last call for comments
networkState
Returns the current state of network activity for the element, from the codes in the list below.
As media elements interact
with the network, their current network activity is represented by
the networkState
attribute. On getting, it must return the current network state of
the element, which must be one of the following values:
NETWORK_EMPTY
(numeric value 0)NETWORK_IDLE
(numeric value 1)NETWORK_LOADING
(numeric value 2)NETWORK_NO_SOURCE
(numeric value 3)The resource selection
algorithm defined below describes exactly when the networkState
attribute changes
value and what events fire to indicate changes in this state.
Status: Last call for comments
load
()Causes the element to reset and start selecting and loading a new media resource from scratch.
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.
Abort any already-running instance of the resource selection algorithm for this element.
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.
Basically, pending events and callbacks for the media element are discarded when the media element starts loading a new resource.
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.
If the media element's networkState
is not set to
NETWORK_EMPTY
, then
run these substeps:
If a fetching process is in progress for the media element, the user agent should stop it.
Set the networkState
attribute to
NETWORK_EMPTY
.
If readyState
is
not set to HAVE_NOTHING
, then set it
to that state.
If the paused
attribute is false, then set to true.
If seeking
is true,
set it to false.
Set the current playback position to 0.
Queue a task to fire a simple
event named emptied
at the media
element.
Set the playbackRate
attribute to the
value of the defaultPlaybackRate
attribute.
Set the error
attribute
to null and the autoplaying flag to true.
Invoke the media element's resource selection algorithm.
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 ⌛.
Set the networkState
to NETWORK_NO_SOURCE
.
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 ⌛.)
⌛ 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.
⌛ Set the media element's
delaying-the-load-event flag to true (this delays the load event), and set
its networkState
to
NETWORK_LOADING
.
⌛ Queue a task to fire a simple
event named loadstart
at the media
element.
If mode is attribute, then run these substeps:
⌛ Process candidate: If the src
attribute's value is the empty
string, then end the synchronous section, and jump
down to the failed step below.
⌛ 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.
⌛ If absolute URL was obtained
successfully, set the currentSrc
attribute to absolute URL.
End the synchronous section, continuing the remaining steps asynchronously.
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.
Failed: Reaching this step indicates that the media resource failed to load or that the given URL could not be resolved. In one atomic operation, run the following steps:
Set the error
attribute to a new MediaError
object whose code
attribute is set to
MEDIA_ERR_SRC_NOT_SUPPORTED
.
Set the element's networkState
attribute to
the NETWORK_NO_SOURCE
value.
Queue a task to fire a simple
event named error
at the media element.
Set the element's delaying-the-load-event flag to false. This stops delaying the load event.
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:
⌛ 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:
Other changes don't affect pointer.
⌛ 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 step below.
⌛ 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.
⌛ If absolute URL was not obtained successfully, then end the synchronous section, and jump down to the failed step below.
⌛ If candidate has a type
attribute whose value, when
parsed as a MIME type (including any codecs
described by the codecs
parameter),
represents a type that the user agent knows it cannot
render, then end the synchronous section, and
jump down to the failed step below.
⌛ If candidate has a media
attribute whose value does
not match the
environment, then end the synchronous
section, and jump down to the failed step
below.
⌛ Set the currentSrc
attribute to absolute URL.
End the synchronous section, continuing the remaining steps asynchronously.
Run the resource fetch algorithm with absolute URL. If that algorithm returns without aborting this one, then the load failed.
Failed: Queue a task to
fire a simple event named error
at the candidate element, in the context of the fetching process that was used to try to
obtain candidate's corresponding media
resource in the resource fetch
algorithm.
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 ⌛.)
⌛ Find next candidate: Let candidate be null.
⌛ Search loop: If the node after pointer is the end of the list, then jump to the waiting step below.
⌛ If the node after pointer is
a source
element, let candidate
be that element.
⌛ 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.
⌛ If candidate is null, jump back to the search loop step. Otherwise, jump back to the process candidate step.
⌛ Waiting: Set the element's networkState
attribute to
the NETWORK_NO_SOURCE
value.
⌛ Set the element's delaying-the-load-event flag to false. This stops delaying the load event.
End the synchronous section, continuing the remaining steps asynchronously.
Wait until the node after pointer is a node other than the end of the list. (This step might wait forever.)
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 ⌛.)
⌛ 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).
⌛ Set the networkState
back to NETWORK_LOADING
.
⌛ 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:
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.
Begin to fetch the current media
resource, from the media element's
Document
's origin.
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.
If at any point the user agent has received no data for more
than about three seconds, then 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, or while waiting for user input in an interactive
resource. When a media element's download has been
suspended, the user agent must set the networkState
to NETWORK_IDLE
and queue
a task to fire a simple event named suspend
at the element. If and
when downloading of the resource resumes, the user agent must set
the networkState
to
NETWORK_LOADING
.
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.
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:
codecs
parameter),
represents a type that the user agent knows it cannot
render (even if the actual media data is in a
supported format)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:
The user agent should cancel the fetching process.
Abort this subalgorithm, returning to the resource selection algorithm.
This indicates that the resource is usable. The user agent must follow these substeps:
Set the current playback position to the earliest possible position.
Set the readyState
attribute to
HAVE_METADATA
.
For video
elements, set the videoWidth
and videoHeight
attributes.
Set the duration
attribute to the duration of the resource.
The user agent will queue a task to
fire a simple event named durationchange
at the
element at this point.
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 either the media resource or the address of the current media resource indicate a particular start time, then seek to that time. Ignore any resulting exceptions (if the position is out of range, it is effectively ignored).
For example, a fragment identifier could be used to indicate a start position.
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, causing the networkState
attribute
to switch to the NETWORK_IDLE
value.
The user agent is required to determine the duration of the media resource and go through this step before playing.
Queue a task to fire a simple event
named progress
at the
media element.
Fatal network errors 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:
The user agent should cancel the fetching process.
Set the error
attribute to a new MediaError
object whose code
attribute is set to
MEDIA_ERR_NETWORK
.
Queue a task to fire a simple
event named error
at the media element.
Set the element's networkState
attribute to
the NETWORK_EMPTY
value and queue a task to fire a simple
event named emptied
at the
element.
Set the element's delaying-the-load-event flag to false. This stops delaying the load event.
Abort the overall resource selection algorithm.
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:
The user agent should cancel the fetching process.
Set the error
attribute to a new MediaError
object whose code
attribute is set to
MEDIA_ERR_DECODE
.
Queue a task to fire a simple
event named error
at the media element.
Set the element's networkState
attribute to
the NETWORK_EMPTY
value and queue a task to fire a simple
event named emptied
at the
element.
Set the element's delaying-the-load-event flag to false. This stops delaying the load event.
Abort the overall resource selection algorithm.
The fetching process is aborted by the user, e.g. because the
user navigated the browsing context to another page, 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.
The user agent should cancel the fetching process.
Set the error
attribute to a new MediaError
object whose code
attribute is set to
MEDIA_ERR_ABORTED
.
Queue a task to fire a simple
event named abort
at the media element.
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 and queue a task to fire a simple
event named emptied
at the element. Otherwise, set the element's networkState
attribute to
the NETWORK_IDLE
value.
Set the element's delaying-the-load-event flag to false. This stops delaying the load event.
Abort the overall resource selection algorithm.
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.
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 dispatching a stalled
event, as described
earlier.
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.
The preload
attribute is an enumerated attribute. The following table
lists the keywords and states for the attribute — the keywords
in the left column map to the states in the cell in the second
column on the same row as the keyword.
Keyword | State | Brief description |
---|---|---|
none
| None | Hints to the user agent that either the author does not expect the user to need the media resource, or that the server wants to minimise unnecessary traffic. |
metadata
| Metadata | Hints to the user agent that the author does not expect the user to need the media resource, but that fetching the resource metadata (dimensions, first frame, track list, duration, etc) is reasonable. |
auto
| Automatic | Hints to the user agent that the user agent can put the user's needs first without risk to the server, up to and including optimistically downloading the entire resource. |
The empty string is also a valid keyword, and maps to the Automatic state. The attribute's missing value default is user-agent defined, though the Metadata state is suggested as a compromise between reducing server load and providing an optimal user experience.
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.
The autoplay
attribute can overrride
the preload
attribute (since
if the media plays, it naturally has to buffer first, regardless of
the hint given by the preload
attribute). Including
both is not an error, however.
buffered
Returns a TimeRanges
object that represents the
ranges of the media resource that the user agent has
buffered.
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.
Status: Last call for comments
duration
Returns the length of the media resource, in seconds.
Returns NaN if the duration isn't available.
Returns Infinity for unbounded streams.
currentTime
[ = value ]Returns the current playback position, in seconds.
Can be set, to seek to the given time.
Will throw an INVALID_STATE_ERR
exception if there
is no selected media resource. Will throw an
INDEX_SIZE_ERR
exception if the given time is not
within the ranges to which the user agent can seek.
startTime
Returns the earliest possible position, in seconds. This is the time for the start of the current clip. It might not be zero if the clip's timeline is not zero-based, or if the resource is a streaming resource (in which case it gives the earliest time that the user agent is able to seek back to).
The duration
attribute must return the length of the media resource,
in seconds. If no media data is available, then the
attributes must return the Not-a-Number (NaN) value. If the
media resource is known to be unbounded (e.g. a
streaming radio), 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 seeking to multiple parts of the resource.
When the length of the media
resource changes (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.
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.
Media elements have a current playback position, which must initially be zero. The current position is a time.
The currentTime
attribute must, on getting, return the current playback
position, expressed in seconds. On setting, the user agent
must seek to the new value
(which might raise an exception).
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 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.
The startTime
attribute must, on getting, return the earliest possible
position, expressed in seconds.
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.
User agents must act as if the timeline of the media resource increases linearly starting from the earliest possible position, 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.
The loop
attribute is a boolean attribute that, if specified,
indicates that the media element is to seek back to the
start of the media resource upon reaching the end.
The loop
IDL
attribute must reflect the content attribute of the
same name.
Status: Last call for comments
readyState
Returns a value that expresses the current state of the element with respect to rendering the current playback position, from the codes in the list below.
Media elements have a ready state, which describes to what degree they are ready to be rendered at the current playback position. The possible values are as follows; the ready state of a media element at any particular time is the greatest value describing the state of the element:
HAVE_NOTHING
(numeric value 0)networkState
attribute are set to NETWORK_EMPTY
are always in
the HAVE_NOTHING
state.HAVE_METADATA
(numeric value 1)video
element, the dimensions of the video are also available. The API
will no longer raise an exception when seeking. No media
data is available for the immediate current playback
position.
HAVE_CURRENT_DATA
(numeric value 2)HAVE_METADATA
state, or
there is no more data to obtain in the direction of
playback. For example, in video this corresponds to the user
agent having data from the current frame, but not the next frame;
and to when playback has
ended.HAVE_FUTURE_DATA
(numeric value 3)HAVE_METADATA
state. For example, in video this corresponds to the user agent
having data for at least the current frame and the next frame. The
user agent cannot be in this state if playback has ended, as the current playback
position can never advance in this case.HAVE_ENOUGH_DATA
(numeric value 4)HAVE_FUTURE_DATA
state
are met, and, in addition, the user agent estimates that data is
being fetched at a rate where the current playback
position, if it were to advance at the rate given by the
defaultPlaybackRate
attribute, would not overtake the available data before playback
reaches the end of the media resource.When the ready state of a media element whose networkState
is not NETWORK_EMPTY
changes, the
user agent must follow the steps given below:
HAVE_NOTHING
, and the new
ready state is HAVE_METADATA
A loadedmetadata
DOM event will be fired as part of the load()
algorithm.
HAVE_METADATA
and
the new ready state is HAVE_CURRENT_DATA
or
greaterIf 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.
HAVE_FUTURE_DATA
or more,
and the new ready state is HAVE_CURRENT_DATA
or
lessA waiting
DOM
event can be fired,
depending on the current state of playback.
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
.
If the element is potentially playing, the user
agent must queue a task to fire a simple
event named playing
.
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
, and, if the element is also
potentially playing, queue a task to
fire a simple event named playing
.
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 is in a Document
whose browsing context did not have the
sandboxed automatic features browsing context flag
set when the Document
was created, then the user
agent may also set the paused
attribute to false,
queue a task to fire a simple event
named play
, and queue
a task to fire a simple event named playing
.
User agents are not required to 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
.
It is possible for the ready state of a media
element to jump between these states discontinuously. For example,
the state of a media element can jump straight from HAVE_METADATA
to HAVE_ENOUGH_DATA
without
passing through the HAVE_CURRENT_DATA
and
HAVE_FUTURE_DATA
states.
The readyState
IDL
attribute must, on getting, return the value described above that
describes the current ready state of the media
element.
The autoplay
attribute is a boolean attribute. When present, the
user agent (as described in the algorithm
described herein) will automatically begin playback of the
media resource as soon as it can do so without
stopping.
Authors are urged to use the autoplay
attribute rather than
using script to trigger automatic playback, as this allows the user
to override the automatic playback when it is not desired, e.g. when
using a screen reader. Authors are also encouraged to consider not
using the automatic playback behavior at all, and instead to let the
user agent wait for the user to start playback explicitly.
The autoplay
IDL attribute must reflect the content attribute of the
same name.
Status: Last call for comments
paused
Returns true if playback is paused; false otherwise.
ended
Returns true if playback has reached the end of the media resource.
defaultPlaybackRate
[ = value ]Returns the default rate of playback, for when the user is not fast-forwarding or reversing through the media resource.
Can be set, to change the default rate of playback.
The default rate has no direct effect on playback, but if the user switches to a fast-forward mode, when they return to the normal playback mode, it is expected that the rate of playback will be returned to the default rate of playback.
playbackRate
[ = value ]Returns the current rate playback, where 1.0 is normal speed.
Can be set, to change the rate of playback.
played
Returns a TimeRanges
object that represents the
ranges of the media resource that the user agent has
played.
play
()Sets the paused
attribute
to false, loading the media resource and beginning
playback if necessary. If the playback had ended, will restart it
from the start.
pause
()Sets the paused
attribute
to true, loading the media resource if necessary.
The paused
attribute represents whether the media element is
paused or not. The attribute must initially be true.
A media element is said to be potentially
playing when its paused
attribute is false, the readyState
attribute is either
HAVE_FUTURE_DATA
or
HAVE_ENOUGH_DATA
,
the element has not ended playback, playback has not
stopped due to errors, and the element has not paused
for user interaction.
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 the media element does
not have a loop
attribute
specified, 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 media element has
ended playback and the direction of
playback is 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.
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.
When a media element
that is potentially playing stops playing because its
readyState
attribute
changes to a value lower than HAVE_FUTURE_DATA
, without
the element having ended playback, or playback having
stopped due to errors, or playback having paused
for user interaction, or the seeking algorithm being invoked, 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.
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:
If the media element has a loop
attribute specified, then seek to the earliest possible
position of the media resource and abort these
steps.
Stop playback.
The ended
attribute becomes
true.
The user agent must queue a task to fire
a simple event named timeupdate
at the element.
The user agent must queue a task to fire
a simple event named ended
at the element.
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 follow these steps:
Stop playback.
The user agent must 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 playbackRate
attribute gives 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 must change speed (if the element is
potentially playing).
If the playbackRate
is positive or zero, then the direction of playback is
forwards. Otherwise, it is backwards.
The "play" function in a user agent's interface must set the
playbackRate
attribute
to the value of the defaultPlaybackRate
attribute before invoking the play()
method's steps. Features such
as fast-forward or rewind must be implemented by only changing the
playbackRate
attribute.
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 played
attribute must return a new static normalized
TimeRanges
object that represents the ranges of
the media resource, if any, that the user agent has so
far rendered, 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.
If the media element's networkState
attribute has
the value NETWORK_EMPTY
, invoke the
media element's resource selection
algorithm.
If the playback has ended and the direction of playback is forwards, 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.
If the media element's paused
attribute is true, run
the following substeps:
Change the value of paused
to false.
Queue a task to fire a simple event
named play
at the element.
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.
Set the media element's autoplaying flag to false.
When the pause()
method is invoked, the user agent must run the following steps:
If the media element's networkState
attribute has
the value NETWORK_EMPTY
, invoke the
media element's resource selection
algorithm.
Set the media element's autoplaying flag to false.
If the media element's paused
attribute is false, run the
following steps:
Change the value of paused
to true.
Queue a task to fire a simple
event named timeupdate
at the
element.
Queue a task to fire a simple
event named pause
at the element.
When a media element is
potentially playing and its Document
is a
fully active Document
, its current
playback position must increase monotonically at playbackRate
units of media
time per unit time of wall clock time.
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.
When the playbackRate
is negative (playback is backwards), any corresponding audio must be
muted. When the playbackRate
is so low or so
high that the user agent cannot play audio usefully, the
corresponding audio must also be muted. If the playbackRate
is not 1.0, the
user agent may apply pitch adjustments to the audio as necessary to
render it faithfully.
The playbackRate
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).
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 to which no references exist has reached a point where no
further audio remains to be played for that element (e.g. because
the element is paused, or because the end of the clip has been
reached, or because its playbackRate
is 0.0) may the
element be garbage collected.
When the current playback position of a media element changes (e.g. due to playback or seeking), the user agent must run the following 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 ranges to be skipped over as the user agent rushes ahead to "catch up".)
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.
When a media element is removed from a
Document
, if the media element's
networkState
attribute
has a value other than NETWORK_EMPTY
then the user
agent must act as if the pause()
method had been invoked.
If the media element's
Document
stops being a fully active
document, then the playback will stop
until the document is active again.
Status: Last call for comments
seeking
Returns true if the user agent is currently seeking.
seekable
Returns a TimeRanges
object that represents the
ranges of the media resource to which it is possible
for the user agent to seek.
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, 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 ⌛.
If the media element's readyState
is HAVE_NOTHING
, then raise an
INVALID_STATE_ERR
exception (if the seek was in
response to a DOM method call or setting of an IDL attribute), and
abort these steps.
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.
Set the seeking
IDL
attribute to true.
Queue a task to fire a
simple event named timeupdate
at the
element.
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.
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.
If the new playback position is less than the earliest possible position, let it be that position instead.
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.
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
queue a task to fire a simple event named
waiting
at the
element.
If, when it reaches this step, the user agent has still not
established whether or not the media data for the new playback position is available, and, if it is,
decoded enough data to play back that position, then queue a
task to fire a simple event named seeking
at the element.
Wait until it 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.
Await a stable state. The synchronous section consists of all the remaining steps of this algorithm. (Steps in the synchronous section are marked with ⌛.)
⌛ Set the seeking
IDL attribute to
false.
⌛ 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 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 (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).
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).
Status: Last call for comments
The controls
attribute is a boolean attribute. If present, it
indicates that the author has not provided a scripted controller and
would like the user agent to provide its own set of controls.
If the attribute is present, or if scripting is disabled for the media element, then the user agent should expose a user interface to the user. This user interface should include features to begin playback, pause playback, seek to an arbitrary position in the content (if the content supports arbitrary seeking), change the volume, change the display of closed captions or embedded sign-language tracks, select different audio tracks or turn on audio descriptions, and show the media content in manners more suitable to the user (e.g. full-screen video or in an independent resizable window). Other controls may also be made available.
Even when the attribute is absent, however, user agents may provide controls to affect playback of the media resource (e.g. play, pause, seeking, and volume controls), but such features should not interfere with the page's normal rendering. For example, such features could be exposed in the media element's context menu.
Where possible (specifically, for starting, stopping, pausing, and unpausing playback, for muting or changing the volume of the audio, and for seeking), user interface features exposed by the user agent must be implemented in terms of the DOM API described above, so that, e.g., all the same events fire.
The controls
IDL attribute must reflect the content attribute of the
same name.
volume
[ = value ]Returns the current playback volume, as a number in the range 0.0 to 1.0, where 0.0 is the quietest and 1.0 the loudest.
Can be set, to change the volume.
Throws an INDEX_SIZE_ERR
if the new value is not
in the range 0.0 .. 1.0.
muted
[ = value ]Returns true if audio is muted, overriding the volume
attribute, and false if the
volume
attribute is being
honored.
Can be set, to change whether the audio is muted or not.
The volume
attribute must return the playback volume of any audio portions of
the media element, in the range 0.0 (silent) to 1.0
(loudest). Initially, the volume must be 1.0, but user agents may
remember the last set value across sessions, on a per-site basis or
otherwise, so the volume may start at other values. On setting, if
the new value is in the range 0.0 to 1.0 inclusive, the attribute
must be set to the new value and the playback volume must be
correspondingly adjusted as soon as possible after setting the
attribute, with 0.0 being silent, and 1.0 being the loudest setting,
values in between increasing in loudness. The range need not be
linear. The loudest setting may be lower than the system's loudest
possible setting; for example the user could have set a maximum
volume. If the new value is outside the range 0.0 to 1.0 inclusive,
then, on setting, an INDEX_SIZE_ERR
exception must be
raised instead.
The muted
attribute must return true if the audio channels are muted and false
otherwise. Initially, the audio channels should not be muted
(false), but user agents may remember the last set value across
sessions, on a per-site basis or otherwise, so the muted state may
start as muted (true). On setting, the attribute must be set to the
new value; if the new value is true, audio playback for this
media resource must then be muted, and if false, audio
playback must then be enabled.
Whenever either the muted
or
volume
attributes are changed,
the user agent must queue a task to fire a simple
event named volumechange
at the media
element.
Status: Last call for comments
Objects implementing the TimeRanges
interface
represent a list of ranges (periods) of time.
interface TimeRanges { readonly attribute unsigned long length; float start(in unsigned long index); float end(in unsigned long index); };
length
Returns the number of ranges in the object.
start
(index)Returns the time for the start of the range with the given index.
Throws an INDEX_SIZE_ERR
if the index is out of range.
end
(index)Returns the time for the end of the range with the given index.
Throws an INDEX_SIZE_ERR
if the index is out of range.
The length
IDL attribute must return the number of ranges represented by the object.
The start(index)
method must return the position
of the start of the indexth range represented by
the object, in seconds measured from the start of the timeline that
the object covers.
The end(index)
method must return the position
of the end of the indexth range represented by
the object, in seconds measured from the start of the timeline that
the object covers.
These methods must raise INDEX_SIZE_ERR
exceptions
if called with an index argument greater than or
equal to the number of ranges represented by the object.
When a TimeRanges
object is said to be a
normalized TimeRanges
object, the ranges it
represents must obey the following criteria:
In other words, the ranges in such an object are ordered, don't overlap, aren't empty, and don't touch (adjacent ranges are folded into one bigger range).
The timelines used by the objects returned by the buffered
, seekable
and played
IDL attributes of media elements must be the same as that
element's media resource's timeline.
Status: Last call for comments
This section is non-normative.
The following events fire on media elements as part of the processing model described above:
Event name | Interface | Dispatched when... | Preconditions |
---|---|---|---|
loadstart
| Event
| The user agent begins looking for media data, as part of the resource selection algorithm. | networkState equals NETWORK_LOADING
|
progress
| Event
| The user agent is fetching media data. | networkState equals NETWORK_LOADING
|
suspend
| Event
| The user agent is intentionally not currently fetching media data, but does not have the entire media resource downloaded. | networkState equals NETWORK_IDLE
|
abort
| Event
| The user agent stops fetching the media data before it is completely downloaded, but not due to an error. | error is an object with the code MEDIA_ERR_ABORTED .
networkState equals either NETWORK_EMPTY or NETWORK_IDLE , depending on when the download was aborted.
|
error
| Event
| An error occurs while fetching the media data. | error is an object with the code MEDIA_ERR_NETWORK or higher.
networkState equals either NETWORK_EMPTY or NETWORK_IDLE , depending on when the download was aborted.
|
emptied
| Event
| A media element whose networkState was previously not in the NETWORK_EMPTY state has just switched to that state (either because of a fatal error during load that's about to be reported, or because the load() method was invoked while the resource selection algorithm was already running).
| networkState is NETWORK_EMPTY ; all the IDL attributes are in their initial states.
|
stalled
| Event
| The user agent is trying to fetch media data, but data is unexpectedly not forthcoming. | networkState is NETWORK_LOADING .
|
play
| Event
| Playback has begun. Fired after the play() method has returned, or when the autoplay attribute has caused playback to begin.
| paused is newly false.
|
pause
| Event
| Playback has been paused. Fired after the pause() method has returned.
| paused is newly true.
|
loadedmetadata
| Event
| The user agent has just determined the duration and dimensions of the media resource | readyState is newly equal to HAVE_METADATA or greater for the first time.
|
loadeddata
| Event
| The user agent can render the media data at the current playback position for the first time. | readyState newly increased to HAVE_CURRENT_DATA or greater for the first time.
|
waiting
| Event
| Playback has stopped because the next frame is not available, but the user agent expects that frame to become available in due course. | readyState is newly equal to or less than HAVE_CURRENT_DATA , and paused is false. Either seeking is true, or the current playback position is not contained in any of the ranges in buffered . It is possible for playback to stop for two other reasons without paused being false, but those two reasons do not fire this event: maybe playback ended, or playback stopped due to errors.
|
playing
| Event
| Playback has started. | readyState is newly equal to or greater than HAVE_FUTURE_DATA , paused is false, seeking is false, or the current playback position is contained in one of the ranges in buffered .
|
canplay
| Event
| The user agent can resume playback of the media data, but estimates that if playback were to be started now, the media resource could not be rendered at the current playback rate up to its end without having to stop for further buffering of content. | readyState newly increased to HAVE_FUTURE_DATA or greater.
|
canplaythrough
| Event
| The user agent estimates that if playback were to be started now, the media resource could be rendered at the current playback rate all the way to its end without having to stop for further buffering. | readyState is newly equal to HAVE_ENOUGH_DATA .
|
seeking
| Event
| The seeking IDL attribute changed to true and the seek operation is taking long enough that the user agent has time to fire the event.
| |
seeked
| Event
| The seeking IDL attribute changed to false.
| |
timeupdate
| Event
| The current playback position changed as part of normal playback or in an especially interesting way, for example discontinuously. | |
ended
| Event
| Playback has stopped because the end of the media resource was reached. | currentTime equals the end of the media resource; ended is true.
|
ratechange
| Event
| Either the defaultPlaybackRate or the playbackRate attribute has just been updated.
| |
durationchange
| Event
| The duration attribute has just been updated.
| |
volumechange
| Event
| Either the volume attribute or the muted attribute has changed. Fired after the relevant attribute's setter has returned.
|
Status: Last call for comments
The main security and privacy implications of the
video
and audio
elements come from the
ability to embed media cross-origin. There are two directions that
threats can flow: from hostile content to a victim page, and from a
hostile page to victim content.
If a victim page embeds hostile content, the threat is that the
content might contain scripted code that attempts to interact with
the Document
that embeds the content. To avoid this,
user agents must ensure that there is no access from the content to
the embedding page. In the case of media content that uses DOM
concepts, the embedded content must be treated as if it was in its
own unrelated top-level browsing context.
For instance, if an SVG animation was embedded in
a video
element, the user agent would not give it
access to the DOM of the outer page. From the perspective of scripts
in the SVG resource, the SVG file would appear to be in a lone
top-level browsing context with no parent.
If a hostile page embeds victim content, the threat is that the
embedding page could obtain information from the content that it
would not otherwise have access to. The API does expose some
information: the existence of the media, its type, its duration, its
size, and the performance characteristics of its host. Such
information is already potentially problematic, but in practice the
same information can more or less be obtained using the
img
element, and so it has been deemed acceptable.
However, significantly more sensitive information could be obtained if the user agent further exposes metadata within the content such as subtitles or chapter titles. This version of the API does not expose such information. Future extensions to this API will likely reuse a mechanism such as CORS to check that the embedded content's site has opted in to exposing such information. [CORS]
An attacker could trick a user running within a corporate network into visiting a site that attempts to load a video from a previously leaked location on the corporation's intranet. If such a video included confidential plans for a new product, then being able to read the subtitles would present a confidentiality breach.