CINXE.COM

<html lang="en-US-x-Hixie"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>4.8.6 The video element — HTML5 </title><style type="text/css"> pre { margin-left: 2em; white-space: pre-wrap; } h2 { margin: 3em 0 1em 0; } h3 { margin: 2.5em 0 1em 0; } h4 { margin: 2.5em 0 0.75em 0; } h5, h6 { margin: 2.5em 0 1em; } h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; } h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; } p { margin: 1em 0; } hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; } dl, dd { margin-top: 0; margin-bottom: 0; } dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; } dt + dt { margin-top: 0; } dd dt { margin-top: 0.25em; margin-bottom: 0; } dd p { margin-top: 0; } dd dl + p { margin-top: 1em; } dd table + p { margin-top: 1em; } p + * > li, dd li { margin: 1em 0; } dt, dfn { font-weight: bold; font-style: normal; } dt dfn { font-style: italic; } pre, code { font-size: inherit; font-family: monospace; font-variant: normal; } pre strong { color: black; font: inherit; font-weight: bold; background: yellow; } pre em { font-weight: bolder; font-style: normal; } @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } } var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; } table { border-collapse: collapse; border-style: hidden hidden none hidden; } table thead, table tbody { border-bottom: solid; } table tbody th:first-child { border-left: solid; } table tbody th { text-align: left; } table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; } blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; } .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; } .matrix, .matrix td { border: none; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; } img.extra { float: right; } pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; } pre.idl :link, pre.idl :visited { color: inherit; background: transparent; } pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; } pre.css:first-line { color: #AAAA50; } dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; } hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; } dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; } dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } dl.domintro dd p { margin: 0.5em 0; } dl.switch { padding-left: 2em; } dl.switch > dt { text-indent: -1.5em; } dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; } dl.triple { padding: 0 0 0 1em; } dl.triple dt, dl.triple dd { margin: 0; display: inline } dl.triple dt:after { content: ':'; } dl.triple dd:after { content: '\A'; white-space: pre; } .diff-old { text-decoration: line-through; color: silver; background: transparent; } .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; } a .diff-new { border-bottom: 1px blue solid; } h2 { page-break-before: always; } h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } h1 + h2, hr + h2.no-toc { page-break-before: auto; } p > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]), { border-bottom: solid #9999CC; } div.head { margin: 0 0 1em; padding: 1em 0 0 0; } div.head p { margin: 0; } div.head h1 { margin: 0; } div.head .logo { float: right; margin: 0 1em; } div.head .logo img { border: none } /* remove border from top image */ div.head dl { margin: 1em 0; } div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; } body > .toc > li { margin-top: 1em; margin-bottom: 1em; } body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; } body > .toc > li > * { margin-bottom: 0.5em; } body > .toc > li > * > li > * { margin-bottom: 0.25em; } .toc, .toc li { list-style: none; } .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; } .brief li { margin: 0; padding: 0; } .brief li p { margin: 0; padding: 0; } .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; } .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; } .category-list li { display: inline; } .category-list li:not(:last-child)::after { content: ', '; } .category-list li > span, .category-list li > a { text-transform: lowercase; } .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */ .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; } .XXX > :first-child { margin-top: 0; } p .XXX { line-height: 3em; } .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; } .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; } .annotation :link, .annotation :visited { color: inherit; } .annotation :link:hover, .annotation :visited:hover { background: transparent; } .annotation span { border: none ! important; } .note { color: green; background: transparent; font-family: sans-serif; } .warning { color: red; background: transparent; } .note, .warning { font-weight: bolder; font-style: italic; } p.note, div.note { padding: 0.5em 2em; } span.note { padding: 0 2em; } .note p:first-child, .warning p:first-child { margin-top: 0; } .note p:last-child, .warning p:last-child { margin-bottom: 0; } .warning:before { font-style: normal; } p.note:before { content: 'Note: '; } p.warning:before { content: '\26A0 Warning! '; } .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; } .bookkeeping { font-size: 0.8em; margin: 2em 0; } .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; } .bookkeeping dt { margin: 0.5em 2em 0; } .bookkeeping dd { margin: 0 3em 0.5em; } h4 { position: relative; z-index: 3; } h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; } .element { background: #EEEEFF; color: black; margin: 0 0 1em 0.15em; padding: 0 1em 0.25em 0.75em; border-left: solid #9999FF 0.25em; position: relative; z-index: 1; } .element:before { position: absolute; z-index: 2; top: 0; left: -1.15em; height: 2em; width: 0.9em; background: #EEEEFF; content: ' '; border-style: none none solid solid; border-color: #9999FF; border-width: 0.25em; } .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; } td > .example:only-child { margin: 0 0 0 0.1em; } ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; } ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; } ul.domTree li li { list-style: none; } ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; } ul.domTree span { font-style: italic; font-family: serif; } ul.domTree .t1 code { color: purple; font-weight: bold; } ul.domTree .t2 { font-style: normal; font-family: monospace; } ul.domTree .t2 .name { color: black; font-weight: bold; } ul.domTree .t2 .value { color: blue; font-weight: normal; } ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; } ul.domTree .t7 code, .domTree .t8 code { color: green; } ul.domTree .t10 code { color: teal; } body.dfnEnabled dfn { cursor: pointer; } .dfnPanel { display: inline; position: absolute; z-index: 10; height: auto; width: auto; padding: 0.5em 0.75em; font: small sans-serif, Droid Sans Fallback; background: #DDDDDD; color: black; border: outset 0.2em; } .dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; } .dfnPanel :link, .dfnPanel :visited { color: black; } .dfnPanel p { font-weight: bolder; } .dfnPanel * + p { margin-top: 0.25em; } .dfnPanel li { list-style-position: inside; } #configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; } #configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; } #configUI p label { display: block; } #configUI #updateUI, #configUI .loginUI { text-align: center; } #configUI input[type=button] { display: block; margin: auto; } fieldset { margin: 1em; padding: 0.5em 1em; } fieldset > legend + * { margin-top: 0; } fieldset > :last-child { margin-bottom: 0; } fieldset p { margin: 0.5em 0; } .stability { position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto 0 auto; width: 50%; background: maroon; color: yellow; -webkit-border-radius: 1em 1em 0 0; -moz-border-radius: 1em 1em 0 0; border-radius: 1em 1em 0 0; -moz-box-shadow: 0 0 1em #500; -webkit-box-shadow: 0 0 1em #500; box-shadow: 0 0 1em red; padding: 0.5em 1em; text-align: center; } .stability strong { display: block; } .stability input { appearance: none; margin: 0; border: 0; padding: 0.25em 0.5em; background: transparent; color: black; position: absolute; top: -0.5em; right: 0; font: 1.25em sans-serif; text-align: center; } .stability input:hover { color: white; text-shadow: 0 0 2px black; } .stability input:active { padding: 0.3em 0.45em 0.2em 0.55em; } .stability :link, .stability :visited, .stability :link:hover, .stability :visited:hover { background: transparent; color: white; } </style><link href="https://www.w3.org/StyleSheets/TR/W3C-WD" rel="stylesheet" type="text/css"><style type="text/css"> .applies thead th > * { display: block; } .applies thead code { display: block; } .applies tbody th { whitespace: nowrap; } .applies td { text-align: center; } .applies .yes { background: yellow; } .matrix, .matrix td { border: hidden; text-align: right; } .matrix { margin-left: 2em; } .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; } .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; } .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; } td.eg { border-width: thin; text-align: center; } #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; } #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; } #table-example-1 caption { padding-bottom: 0.5em; } #table-example-1 thead, #table-example-1 tbody { border: none; } #table-example-1 th, #table-example-1 td { border: solid thin; } #table-example-1 th { font-weight: normal; } #table-example-1 td { border-style: none solid; vertical-align: top; } #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; } #table-example-1 tbody tr:first-child td { padding-top: 0.5em; } #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; } #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; } #table-example-1 tbody td:first-child::after { content: leader(". "); } #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; } #table-example-1 tbody td:first-child + td { width: 10em; } #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; } #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; } .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; } .apple-table-examples * { font-family: "Times", serif; } .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; } .apple-table-examples tbody th:first-child { border-left: none; width: 100%; } .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; } .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") } .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; } .apple-table-examples td { text-align: right; vertical-align: top; } .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; } .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; } .apple-table-examples.e2 th[scope=row] { padding-left: 1em; } .apple-table-examples sup { line-height: 0; } .details-example img { vertical-align: top; } #named-character-references-table { white-space: nowrap; font-size: 0.6em; column-width: 30em; column-gap: 1em; -moz-column-width: 30em; -moz-column-gap: 1em; -webkit-column-width: 30em; -webkit-column-gap: 1em; } #named-character-references-table > table > tbody > tr > td:first-child + td, #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; } #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; } #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; } .glyph.control { color: red; } @font-face { font-family: 'Essays1743'; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf'); } @font-face { font-family: 'Essays1743'; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf'); } @font-face { font-family: 'Essays1743'; font-style: italic; font-weight: bold; src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf'); } </style><style type="text/css"> .domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; } </style><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="style.css" rel="stylesheet"><link href="the-iframe-element.html" title="4.8.2 The iframe element" rel="prev"><link href="spec.html#contents" title="Table of contents" rel="index"><link href="the-canvas-element.html" title="4.8.11 The canvas element" rel="next"></head><body onload="fixBrokenLink(); init()"><div class="head" id="head"> <a href="https://www.w3.org/"><img alt="W3C" height="48" src="https://www.w3.org/Icons/w3c_home" width="72"></a> <h1>HTML5</h1> <script type="text/javascript"> function closeWarning(element) { element.parentNode.removeChild(element); var date = new Date(); date.setDate(date.getDate()+4); document.cookie = 'hide-obsolescence-warning=1; expires=' + date.toGMTString(); } if (getCookie('hide-obsolescence-warning') == '1') setTimeout(function () { document.getElementById('wip').parentNode.removeChild(document.getElementById('wip')); }, 2000); </script> </div><div> <a href="the-iframe-element.html" class="prev">4.8.2 The iframe element</a> – <a href="spec.html#contents">Table of contents</a> – <a href="the-canvas-element.html" class="next">4.8.11 The canvas element</a> <ol class="toc"><li><ol><li><ol><li><a href="video.html#video">4.8.6 The <code>video</code> element</a></li><li><a href="video.html#audio">4.8.7 The <code>audio</code> element</a></li><li><a href="video.html#the-source-element">4.8.8 The <code>source</code> element</a></li><li><a href="video.html#the-track-element">4.8.9 The <code>track</code> element</a></li><li><a href="video.html#media-elements">4.8.10 Media elements</a> <ol><li><a href="video.html#error-codes">4.8.10.1 Error codes</a></li><li><a href="video.html#location-of-the-media-resource">4.8.10.2 Location of the media resource</a></li><li><a href="video.html#mime-types">4.8.10.3 MIME types</a></li><li><a href="video.html#network-states">4.8.10.4 Network states</a></li><li><a href="video.html#loading-the-media-resource">4.8.10.5 Loading the media resource</a></li><li><a href="video.html#offsets-into-the-media-resource">4.8.10.6 Offsets into the media resource</a></li><li><a href="video.html#the-ready-states">4.8.10.7 The ready states</a></li><li><a href="video.html#playing-the-media-resource">4.8.10.8 Playing the media resource</a></li><li><a href="video.html#seeking">4.8.10.9 Seeking</a></li><li><a href="video.html#timed-text-tracks">4.8.10.10 Timed text tracks</a> <ol><li><a href="video.html#text-track-model">4.8.10.10.1 Text track model</a></li><li><a href="video.html#sourcing-in-band-text-tracks">4.8.10.10.2 Sourcing in-band text tracks</a></li><li><a href="video.html#sourcing-out-of-band-text-tracks">4.8.10.10.3 Sourcing out-of-band text tracks</a></li><li><a href="video.html#text-track-api">4.8.10.10.4 Text track API</a></li><li><a href="video.html#cue-events">4.8.10.10.5 Event definitions</a></li></ol></li><li><a href="video.html#user-interface">4.8.10.11 User interface</a></li><li><a href="video.html#time-ranges">4.8.10.12 Time ranges</a></li><li><a href="video.html#mediaevents">4.8.10.13 Event summary</a></li><li><a href="video.html#security-and-privacy-considerations">4.8.10.14 Security and privacy considerations</a></li><li><a href="video.html#best-practices-for-authors-using-media-elements">4.8.10.15 Best practices for authors using media elements</a></li><li><a href="video.html#best-practices-for-implementors-of-media-elements">4.8.10.16 Best practices for implementors of media elements</a></li></ol></li></ol></li></ol></li></ol></div>This is a work in progress! For the latest updates from the HTML WG, possibly including important bug fixes, please look at the <a href="http://dev.w3.org/html5/spec/Overview.html">editor's draft</a> instead. <input onclick="closeWarning(this.parentNode)" type="button" value="╳⃝"><h4 id="video">4.8.6 The <dfn><code>video</code></dfn> element</h4><a href="https://www.w3.org/html/wg/tracker/issues/9">ISSUE-9</a> (video-accessibility) blocks progress to Last Call<dl class="element"><dt>Categories</dt> <dd><a href="content-models.html#flow-content">Flow content</a>.</dd> <dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd> <dd><a href="content-models.html#embedded-content">Embedded content</a>.</dd> <dd>If the element has a <code title="attr-media-controls"><a href="#attr-media-controls">controls</a></code> attribute: <a href="content-models.html#interactive-content">Interactive content</a>.</dd> <dt>Contexts in which this element can be used:</dt> <dd>Where <a href="content-models.html#embedded-content">embedded content</a> is expected.</dd> <dt>Content model:</dt> <dd>If the element has a <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute:  zero or more <code><a href="#the-track-element">track</a></code> elements, then  <a href="content-models.html#transparent">transparent</a>, but with no <a href="#media-element">media element</a> descendants.</dd> <dd>If the element does not have a <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute: one or more <code><a href="#the-source-element">source</a></code> elements, then  zero or more <code><a href="#the-track-element">track</a></code> elements, then  <a href="content-models.html#transparent">transparent</a>, but with no <a href="#media-element">media element</a> descendants.</dd> <dt>Content attributes:</dt> <dd><a href="elements.html#global-attributes">Global attributes</a></dd> <dd><code title="attr-media-src"><a href="#attr-media-src">src</a></code></dd> <dd><code title="attr-video-poster"><a href="#attr-video-poster">poster</a></code></dd> <dd><code title="attr-media-preload"><a href="#attr-media-preload">preload</a></code></dd> <dd><code title="attr-media-autoplay"><a href="#attr-media-autoplay">autoplay</a></code></dd> <dd><code title="attr-media-loop"><a href="#attr-media-loop">loop</a></code></dd> <dd><code title="attr-media-audio"><a href="#attr-media-audio">audio</a></code></dd> <dd><code title="attr-media-controls"><a href="#attr-media-controls">controls</a></code></dd> <dd><code title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code></dd> <dd><code title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code></dd> <dt>DOM interface:</dt> <dd> <pre class="idl">interface <dfn id="htmlvideoelement">HTMLVideoElement</dfn> : <a href="#htmlmediaelement">HTMLMediaElement</a> { attribute unsigned long <a href="the-map-element.html#dom-dim-width" title="dom-dim-width">width</a>; attribute unsigned long <a href="the-map-element.html#dom-dim-height" title="dom-dim-height">height</a>; readonly attribute unsigned long <a href="#dom-video-videowidth" title="dom-video-videoWidth">videoWidth</a>; readonly attribute unsigned long <a href="#dom-video-videoheight" title="dom-video-videoHeight">videoHeight</a>; attribute DOMString <a href="#dom-video-poster" title="dom-video-poster">poster</a>; [PutForwards=<a href="common-dom-interfaces.html#dom-domsettabletokenlist-value" title="dom-DOMSettableTokenList-value">value</a> attribute <a href="common-dom-interfaces.html#domsettabletokenlist">DOMSettableTokenList</a> <a href="#dom-media-audio" title="dom-media-audio">audio</a>;  };</pre> </dd> </dl>A <code><a href="#video">video</a></code> element is used for playing videos or movies.Content may be provided inside the <code><a href="#video">video</a></code> element. User agents should not show this content to the user; it is intended for older Web browsers which do not support <code><a href="#video">video</a></code>, 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 <code><a href="#video">video</a></code> element is a <a href="#media-element">media element</a> whose <a href="#media-data">media data</a> is ostensibly video data, possibly with associated audio data.The <code title="attr-media-src"><a href="#attr-media-src">src</a></code>, <code title="attr-media-preload"><a href="#attr-media-preload">preload</a></code>, <code title="attr-media-autoplay"><a href="#attr-media-autoplay">autoplay</a></code>, <code title="attr-media-loop"><a href="#attr-media-loop">loop</a></code>, and <code title="attr-media-controls"><a href="#attr-media-controls">controls</a></code> attributes are <a href="#media-element-attributes" title="media element attributes">the attributes common to all media elements</a>. The <code title="attr-media-audio"><a href="#attr-media-audio">audio</a></code> attribute <a href="#attr-media-audio" title="attr-media-audio">controls the audio channel</a>.The <dfn id="attr-video-poster" title="attr-video-poster"><code>poster</code></dfn> 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 <a href="urls.html#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially surrounded by spaces</a>.<div class="impl"> If the specified resource is to be used, then, when the element is created or when the <code title="attr-video-poster"><a href="#attr-video-poster">poster</a></code> attribute is set, changed, or removed, the user agent must run the following steps to determine the element's <dfn id="poster-frame">poster frame</dfn>:  <ol><li>If there is an existing instance of this algorithm running for this <code><a href="#video">video</a></code> element, abort that instance of this algorithm without changing the <a href="#poster-frame">poster frame</a>.</li> <li>If the <code title="attr-video-poster"><a href="#attr-video-poster">poster</a></code> attribute's value is the empty string, then there is no <a href="#poster-frame">poster frame</a>; abort these steps.</li> <li><a href="urls.html#resolve-a-url" title="resolve a url">Resolve</a> the <code title="attr-video-poster"><a href="#attr-video-poster">poster</a></code> attribute's value relative to the element. If this fails, then there is no <a href="#poster-frame">poster frame</a>; abort these steps.</li> <li><a href="fetching-resources.html#fetch">Fetch</a> the resulting <a href="urls.html#absolute-url">absolute URL</a>, from the element's <code><a href="infrastructure.html#document">Document</a></code>'s <a href="origin-0.html#origin">origin</a>. This must <a href="the-end.html#delay-the-load-event">delay the load event</a> of the element's document.</li>  <li>If an image is thus obtained, the <a href="#poster-frame">poster frame</a> is that image. Otherwise, there is no <a href="#poster-frame">poster frame</a>.</li> </ol></div>The image given by the <code title="attr-video-poster"><a href="#attr-video-poster">poster</a></code> attribute, the <a href="#poster-frame">poster frame</a>, 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.<div class="impl"> <hr>When no video data is available (the element's <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> attribute is either <code title="dom-media-HAVE_NOTHING"><a href="#dom-media-have_nothing">HAVE_NOTHING</a></code>, or <code title="dom-media-HAVE_METADATA"><a href="#dom-media-have_metadata">HAVE_METADATA</a></code> but no video data has yet been obtained at all), the <code><a href="#video">video</a></code> element <a href="rendering.html#represents">represents</a> either the <a href="#poster-frame">poster frame</a>, or nothing. When a <code><a href="#video">video</a></code> element is <a href="#dom-media-paused" title="dom-media-paused">paused</a> and the <a href="#current-playback-position" title="current playback position">current playback position</a> is the first frame of video, the element <a href="rendering.html#represents">represents</a> either the frame of video corresponding to the <a href="#current-playback-position" title="current playback position">current playback position</a> or the <a href="#poster-frame">poster frame</a>, at the discretion of the user agent. Notwithstanding the above, the <a href="#poster-frame">poster frame</a> should be preferred over nothing, but the <a href="#poster-frame">poster frame</a> should not be shown again after a frame of video has been shown. When a <code><a href="#video">video</a></code> element is <a href="#dom-media-paused" title="dom-media-paused">paused</a> at any other position, the element <a href="rendering.html#represents">represents</a> the frame of video corresponding to the <a href="#current-playback-position" title="current playback position">current playback position</a>, 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 <code><a href="#video">video</a></code> element is <a href="#potentially-playing">potentially playing</a>, it <a href="rendering.html#represents">represents</a> the frame of video at the continuously increasing <a href="#current-playback-position" title="current playback position">"current" position</a>. When the <a href="#current-playback-position">current playback position</a> changes such that the last frame rendered is no longer the frame corresponding to the <a href="#current-playback-position">current playback position</a> in the video, the new frame must be rendered. Similarly, any audio associated with the video must, if played, be played synchronized with the <a href="#current-playback-position">current playback position</a>, at the specified <a href="#dom-media-volume" title="dom-media-volume">volume</a> with the specified <a href="#dom-media-muted" title="dom-media-muted">mute state</a>. When a <code><a href="#video">video</a></code> element is neither <a href="#potentially-playing">potentially playing</a> nor <a href="#dom-media-paused" title="dom-media-paused">paused</a> (e.g. when seeking or stalled), the element <a href="rendering.html#represents">represents</a> 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.  The <code><a href="#video">video</a></code> element also <a href="rendering.html#represents">represents</a> any <a href="#text-track-cue" title="text track cue">text track cues</a> whose <a href="#text-track-cue-active-flag">text track cue active flag</a> is set and whose <a href="#text-track">text track</a> is in the <a href="#text-track-showing" title="text track showing">showing</a> or <a href="#text-track-showing-by-default" title="text track showing by default">showing by default</a> modes.  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 <a href="rendering.html#represents" title="represents">represent</a> a link to an external video playback utility or to the video data itself. <hr></div><dl class="domintro"><dt><var title="">video</var> . <code title="dom-video-videoWidth"><a href="#dom-video-videowidth">videoWidth</a></code></dt> <dt><var title="">video</var> . <code title="dom-video-videoHeight"><a href="#dom-video-videoheight">videoHeight</a></code></dt> <dd> These attributes return the intrinsic dimensions of the video, or zero if the dimensions are not known. </dd> </dl><div class="impl"> The <dfn id="concept-video-intrinsic-width" title="concept-video-intrinsic-width">intrinsic width</dfn> and <dfn id="concept-video-intrinsic-height" title="concept-video-intrinsic-height">intrinsic height</dfn> of the <a href="#media-resource">media resource</a> 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 <dfn id="dom-video-videowidth" title="dom-video-videoWidth"><code>videoWidth</code></dfn> IDL attribute must return the <a href="#concept-video-intrinsic-width" title="concept-video-intrinsic-width">intrinsic width</a> of the video in CSS pixels. The <dfn id="dom-video-videoheight" title="dom-video-videoHeight"><code>videoHeight</code></dfn> IDL attribute must return the <a href="#concept-video-intrinsic-height" title="concept-video-intrinsic-height">intrinsic height</a> of the video in CSS pixels. If the element's <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> attribute is <code title="dom-media-HAVE_NOTHING"><a href="#dom-media-have_nothing">HAVE_NOTHING</a></code>, then the attributes must return 0. </div>The <code><a href="#video">video</a></code> element supports <a href="the-map-element.html#dimension-attributes">dimension attributes</a>.<div class="impl"> 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 <code><a href="#video">video</a></code> element's playback area is the <a href="#concept-video-intrinsic-width" title="concept-video-intrinsic-width">intrinsic width</a> of the video resource, if that is available; otherwise it is the intrinsic width of the <a href="#poster-frame">poster frame</a>, if that is available; otherwise it is 300 CSS pixels. The intrinsic height of a <code><a href="#video">video</a></code> element's playback area is the <a href="#concept-video-intrinsic-height" title="concept-video-intrinsic-height">intrinsic height</a> of the video resource, if that is available; otherwise it is the intrinsic height of the <a href="#poster-frame">poster frame</a>, if that is available; otherwise it is 150 CSS pixels. <hr>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 <a href="#expose-a-user-interface-to-the-user" title="expose a user interface to the user">exposing a user interface</a>. 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 <code title="attr-media-controls"><a href="#attr-media-controls">controls</a></code> 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. <hr>The <dfn id="dom-video-poster" title="dom-video-poster"><code>poster</code></dfn> IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-video-poster"><a href="#attr-video-poster">poster</a></code> content attribute. The <dfn id="dom-media-audio" title="dom-media-audio"><code>audio</code></dfn> IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-media-audio"><a href="#attr-media-audio">audio</a></code> content attribute. </div><div class="example"> This example shows how to detect when a video has failed to play correctly: <pre><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> <video src="tgif.vid" autoplay controls onerror="failed(event)"></video> <a href="tgif.vid">Download the video file</a>.</pre> </div><h4 id="audio">4.8.7 The <dfn><code>audio</code></dfn> element</h4><dl class="element"><dt>Categories</dt> <dd><a href="content-models.html#flow-content">Flow content</a>.</dd> <dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd> <dd><a href="content-models.html#embedded-content">Embedded content</a>.</dd> <dd>If the element has a <code title="attr-media-controls"><a href="#attr-media-controls">controls</a></code> attribute: <a href="content-models.html#interactive-content">Interactive content</a>.</dd> <dt>Contexts in which this element can be used:</dt> <dd>Where <a href="content-models.html#embedded-content">embedded content</a> is expected.</dd> <dt>Content model:</dt> <dd>If the element has a <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute:  zero or more <code><a href="#the-track-element">track</a></code> elements, then  <a href="content-models.html#transparent">transparent</a>, but with no <a href="#media-element">media element</a> descendants.</dd> <dd>If the element does not have a <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute: one or more <code><a href="#the-source-element">source</a></code> elements, then  zero or more <code><a href="#the-track-element">track</a></code> elements, then  <a href="content-models.html#transparent">transparent</a>, but with no <a href="#media-element">media element</a> descendants.</dd> <dt>Content attributes:</dt> <dd><a href="elements.html#global-attributes">Global attributes</a></dd> <dd><code title="attr-media-src"><a href="#attr-media-src">src</a></code></dd> <dd><code title="attr-media-preload"><a href="#attr-media-preload">preload</a></code></dd> <dd><code title="attr-media-autoplay"><a href="#attr-media-autoplay">autoplay</a></code></dd> <dd><code title="attr-media-loop"><a href="#attr-media-loop">loop</a></code></dd> <dd><code title="attr-media-controls"><a href="#attr-media-controls">controls</a></code></dd> <dt>DOM interface:</dt> <dd> <pre class="idl">[NamedConstructor=<a href="#dom-audio" title="dom-Audio">Audio</a>(), NamedConstructor=<a href="#dom-audio-s" title="dom-Audio-s">Audio</a>(in DOMString src)] interface <dfn id="htmlaudioelement">HTMLAudioElement</dfn> : <a href="#htmlmediaelement">HTMLMediaElement</a> {};</pre> </dd> </dl>An <code><a href="#audio">audio</a></code> element <a href="rendering.html#represents">represents</a> a sound or audio stream.Content may be provided inside the <code><a href="#audio">audio</a></code> element. User agents should not show this content to the user; it is intended for older Web browsers which do not support <code><a href="#audio">audio</a></code>, 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 <code><a href="#audio">audio</a></code> element is a <a href="#media-element">media element</a> whose <a href="#media-data">media data</a> is ostensibly audio data.The <code title="attr-media-src"><a href="#attr-media-src">src</a></code>, <code title="attr-media-preload"><a href="#attr-media-preload">preload</a></code>, <code title="attr-media-autoplay"><a href="#attr-media-autoplay">autoplay</a></code>, <code title="attr-media-loop"><a href="#attr-media-loop">loop</a></code>, and <code title="attr-media-controls"><a href="#attr-media-controls">controls</a></code> attributes are <a href="#media-element-attributes" title="media element attributes">the attributes common to all media elements</a>.<div class="impl"> When an <code><a href="#audio">audio</a></code> element is <a href="#potentially-playing">potentially playing</a>, it must have its audio data played synchronized with the <a href="#current-playback-position">current playback position</a>, at the specified <a href="#dom-media-volume" title="dom-media-volume">volume</a> with the specified <a href="#dom-media-muted" title="dom-media-muted">mute state</a>. When an <code><a href="#audio">audio</a></code> element is not <a href="#potentially-playing">potentially playing</a>, audio must not play for the element. </div><dl class="domintro"><dt><var title="">audio</var> = new <code title="dom-Audio"><a href="#dom-audio">Audio</a></code>( [ <var title="">url</var> ] )</dt> <dd> Returns a new <code><a href="#audio">audio</a></code> element, with the <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute set to the value passed in the argument, if applicable. </dd> </dl><div class="impl"> Two constructors are provided for creating <code><a href="#htmlaudioelement">HTMLAudioElement</a></code> objects (in addition to the factory methods from DOM Core such as <code title="">createElement()</code>): <dfn id="dom-audio" title="dom-Audio"><code>Audio()</code></dfn> and <dfn id="dom-audio-s" title="dom-Audio-s"><code>Audio(<var title="">src</var>)</code></dfn>. When invoked as constructors, these must return a new <code><a href="#htmlaudioelement">HTMLAudioElement</a></code> object (a new <code><a href="#audio">audio</a></code> element). The element must have its <code title="attr-media-preload"><a href="#attr-media-preload">preload</a></code> attribute set to the literal value "<code title="attr-media-preload-auto"><a href="#attr-media-preload-auto">auto</a></code>". If the <var title="">src</var> argument is present, the object created must have its <code title="attr-media-src"><a href="#attr-media-src">src</a></code> content attribute set to the provided value, and the user agent must invoke the object's <a href="#concept-media-load-algorithm" title="concept-media-load-algorithm">resource selection algorithm</a> before returning. The element's document must be the <a href="browsers.html#active-document">active document</a> of the <a href="browsers.html#browsing-context">browsing context</a> of the <code><a href="browsers.html#window">Window</a></code> object on which the interface object of the invoked constructor is found. </div><h4 id="the-source-element">4.8.8 The <dfn><code>source</code></dfn> element</h4><dl class="element"><dt>Categories</dt> <dd>None.</dd> <dt>Contexts in which this element can be used:</dt> <dd>As a child of a <a href="#media-element">media element</a>, before any <a href="content-models.html#flow-content">flow content</a>  or <code><a href="#the-track-element">track</a></code> elements.</dd>  <dt>Content model:</dt> <dd>Empty.</dd> <dt>Content attributes:</dt> <dd><a href="elements.html#global-attributes">Global attributes</a></dd> <dd><code title="attr-source-src"><a href="#attr-source-src">src</a></code></dd> <dd><code title="attr-source-type"><a href="#attr-source-type">type</a></code></dd> <dd><code title="attr-source-media"><a href="#attr-source-media">media</a></code></dd> <dt>DOM interface:</dt> <dd> <pre class="idl">interface <dfn id="htmlsourceelement">HTMLSourceElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { attribute DOMString <a href="#dom-source-src" title="dom-source-src">src</a>; attribute DOMString <a href="#dom-source-type" title="dom-source-type">type</a>; attribute DOMString <a href="#dom-source-media" title="dom-source-media">media</a>; };</pre> </dd> </dl>The <code><a href="#the-source-element">source</a></code> element allows authors to specify multiple alternative <a href="#media-resource" title="media resource">media resources</a> for <a href="#media-element" title="media element">media elements</a>. It does not <a href="rendering.html#represents" title="represents">represent</a> anything on its own.The <dfn id="attr-source-src" title="attr-source-src"><code>src</code></dfn> attribute gives the address of the <a href="#media-resource">media resource</a>. The value must be a <a href="urls.html#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially surrounded by spaces</a>. This attribute must be present.Dynamically modifying a <code><a href="#the-source-element">source</a></code> element and its attribute when the element is already inserted in a <code><a href="#video">video</a></code> or <code><a href="#audio">audio</a></code> element will have no effect. To change what is playing, either just use the <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute on the <a href="#media-element">media element</a> directly, or call the <code title="dom-media-load"><a href="#dom-media-load">load()</a></code> method on the <a href="#media-element">media element</a> after manipulating the <code><a href="#the-source-element">source</a></code> elements.The <dfn id="attr-source-type" title="attr-source-type"><code>type</code></dfn> attribute gives the type of the <a href="#media-resource">media resource</a>, to help the user agent determine if it can play this <a href="#media-resource">media resource</a> before fetching it. If specified, its value must be a <a href="infrastructure.html#valid-mime-type">valid MIME type</a>. The <code title="">codecs</code> parameter, which certain MIME types define, might be necessary to specify exactly how the resource is encoded. <a href="references.html#refsRFC4281">[RFC4281]</a><div class="example"> The following list shows some examples of how to use the <code title="">codecs=</code> MIME parameter in the <code title="attr-source-type"><a href="#attr-source-type">type</a></code> attribute. <dl><dt>H.264 Constrained baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container</dt> <dd><pre><source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></pre></dd> <dt>H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container</dt> <dd><pre><source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'></pre></dd> <dt>H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container</dt> <dd><pre><source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'></pre></dd> <dt>H.264 'High' profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container</dt> <dd><pre><source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'></pre></dd> <dt>MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container</dt> <dd><pre><source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'></pre></dd> <dt>MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container</dt> <dd><pre><source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'></pre></dd> <dt>MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container</dt> <dd><pre><source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'></pre></dd> <dt>Theora video and Vorbis audio in Ogg container</dt> <dd><pre><source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'></pre></dd> <dt>Theora video and Speex audio in Ogg container</dt> <dd><pre><source src='video.ogv' type='video/ogg; codecs="theora, speex"'></pre></dd> <dt>Vorbis audio alone in Ogg container</dt> <dd><pre><source src='audio.ogg' type='audio/ogg; codecs=vorbis'></pre></dd> <dt>Speex audio alone in Ogg container</dt> <dd><pre><source src='audio.spx' type='audio/ogg; codecs=speex'></pre></dd> <dt>FLAC audio alone in Ogg container</dt> <dd><pre><source src='audio.oga' type='audio/ogg; codecs=flac'></pre></dd> <dt>Dirac video and Vorbis audio in Ogg container</dt> <dd><pre><source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'></pre></dd> <dt>Theora video and Vorbis audio in Matroska container</dt> <dd><pre><source src='video.mkv' type='video/x-matroska; codecs="theora, vorbis"'></pre></dd>     </dl></div>The <dfn id="attr-source-media" title="attr-source-media"><code>media</code></dfn> attribute gives the intended media type of the <a href="#media-resource">media resource</a>, to help the user agent determine if this <a href="#media-resource">media resource</a> is useful to the user before fetching it. Its value must be a <a href="common-microsyntaxes.html#valid-media-query">valid media query</a>.The default, if the <code title="attr-srouce-media">media</code> attribute is omitted, is "<code title="">all</code>", meaning that by default the <a href="#media-resource">media resource</a> is suitable for all media.<div class="impl"> If a <code><a href="#the-source-element">source</a></code> element is inserted as a child of a <a href="#media-element">media element</a> that has no <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute and whose <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> has the value <code title="dom-media-NETWORK_EMPTY"><a href="#dom-media-network_empty">NETWORK_EMPTY</a></code>, the user agent must invoke the <a href="#media-element">media element</a>'s <a href="#concept-media-load-algorithm" title="concept-media-load-algorithm">resource selection algorithm</a>. The IDL attributes <dfn id="dom-source-src" title="dom-source-src"><code>src</code></dfn>, <dfn id="dom-source-type" title="dom-source-type"><code>type</code></dfn>, and <dfn id="dom-source-media" title="dom-source-media"><code>media</code></dfn> must <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the same name. </div><div class="example"> 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 <code title="event-error">error</code> event on the last <code><a href="#the-source-element">source</a></code> element and trigger fallback behavior: <pre><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></pre> </div><h4 id="the-track-element">4.8.9 The <dfn><code>track</code></dfn> element</h4><a href="https://www.w3.org/html/wg/tracker/issues/9">ISSUE-9</a> (video-accessibility) blocks progress to Last Call<dl class="element"><dt>Categories</dt> <dd>None.</dd> <dt>Contexts in which this element can be used:</dt> <dd>As a child of a <a href="#media-element">media element</a>, before any <a href="content-models.html#flow-content">flow content</a>.</dd> <dt>Content model:</dt> <dd>Empty.</dd> <dt>Content attributes:</dt> <dd><a href="elements.html#global-attributes">Global attributes</a></dd> <dd><code title="attr-track-kind"><a href="#attr-track-kind">kind</a></code></dd> <dd><code title="attr-track-src"><a href="#attr-track-src">src</a></code></dd> <dd><code title="attr-track-srclang"><a href="#attr-track-srclang">srclang</a></code></dd> <dd><code title="attr-track-label"><a href="#attr-track-label">label</a></code></dd> <dd><code title="attr-track-default"><a href="#attr-track-default">default</a></code></dd> <dt>DOM interface:</dt> <dd> <pre class="idl">interface <dfn id="htmltrackelement">HTMLTrackElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { attribute DOMString <a href="#dom-track-kind" title="dom-track-kind">kind</a>; attribute DOMString <a href="#dom-track-src" title="dom-track-src">src</a>; attribute DOMString <a href="#dom-track-srclang" title="dom-track-srclang">srclang</a>; attribute DOMString <a href="#dom-track-label" title="dom-track-label">label</a>; attribute boolean <a href="#dom-track-default" title="dom-track-default">default</a>; readonly attribute <a href="#texttrack">TextTrack</a> <a href="#dom-track-track" title="dom-track-track">track</a>; };</pre> </dd> </dl>The <code><a href="#the-track-element">track</a></code> element allows authors to specify explicit external timed <a href="#text-track" title="text track">text tracks</a> for <a href="#media-element" title="media element">media elements</a>. It does not <a href="rendering.html#represents" title="represents">represent</a> anything on its own.The <dfn id="attr-track-kind" title="attr-track-kind"><code>kind</code></dfn> attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a>. The following table lists the keywords defined for this attribute. The keyword given in the first cell of each row maps to the state given in the second cell.<table><thead><tr><th>Keyword </th><th>State </th><th>Brief description </th></tr></thead><tbody><tr><td><dfn id="attr-track-kind-keyword-subtitles" title="attr-track-kind-keyword-subtitles"><code>subtitles</code></dfn> </td><td><dfn id="attr-track-kind-subtitles" title="attr-track-kind-subtitles">Subtitles</dfn> </td><td> Transcription or translation of the dialogue, suitable for when the sound is available but not understood (e.g. because the user does not understand the language of the <a href="#media-resource">media resource</a>'s soundtrack). Displayed over the video. </td></tr><tr><td><dfn id="attr-track-kind-keyword-captions" title="attr-track-kind-keyword-captions"><code>captions</code></dfn> </td><td><dfn id="attr-track-kind-captions" title="attr-track-kind-captions">Captions</dfn> </td><td> Transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when the soundtrack is unavailable (e.g. because it is muted or because the user is deaf). Displayed over the video; labeled as appropriate for the hard-of-hearing. </td></tr><tr><td><dfn id="attr-track-kind-keyword-descriptions" title="attr-track-kind-keyword-descriptions"><code>descriptions</code></dfn> </td><td><dfn id="attr-track-kind-descriptions" title="attr-track-kind-descriptions">Descriptions</dfn> </td><td> Textual descriptions of the video component of the <a href="#media-resource">media resource</a>, intended for audio synthesis when the visual component is unavailable (e.g. because the user is interacting with the application without a screen while driving, or because the user is blind). Synthesized as separate audio track. </td></tr><tr><td><dfn id="attr-track-kind-keyword-chapters" title="attr-track-kind-keyword-chapters"><code>chapters</code></dfn> </td><td><dfn id="attr-track-kind-chapters" title="attr-track-kind-chapters">Chapters</dfn> </td><td> Chapter titles, intended to be used for navigating the <a href="#media-resource">media resource</a>. Displayed as an interactive list in the user agent's interface. </td></tr><tr><td><dfn id="attr-track-kind-keyword-metadata" title="attr-track-kind-keyword-metadata"><code>metadata</code></dfn> </td><td><dfn id="attr-track-kind-metadata" title="attr-track-kind-metadata">Metadata</dfn> </td><td> Tracks intended for use from script. Not displayed by the user agent. </td></tr></tbody></table>The attribute may be omitted. The missing value default is the <a href="#attr-track-kind-subtitles" title="attr-track-kind-subtitles">subtitles</a> state.The <dfn id="attr-track-src" title="attr-track-src"><code>src</code></dfn> attribute gives the address of the text track data. The value must be a <a href="urls.html#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially surrounded by spaces</a>. This attribute must be present.<div class="impl"> If the element has a <code title="attr-track-src"><a href="#attr-track-src">src</a></code> attribute whose value is not the empty string and whose value, when the attribute was set, could be successfully <a href="urls.html#resolve-a-url" title="resolve a url">resolved</a> relative to the element, then the element's <dfn id="track-url">track URL</dfn> is the resulting <a href="urls.html#absolute-url">absolute URL</a>. Otherwise, the element's <a href="#track-url">track URL</a> is the empty string. </div>The <dfn id="attr-track-srclang" title="attr-track-srclang"><code>srclang</code></dfn> attribute gives the language of the text track data. The value must be a valid BCP 47 language tag. This attribute must be present if the element's <code title="attr-track-kind"><a href="#attr-track-kind">kind</a></code> attribute is in the <a href="#attr-track-kind-subtitles" title="attr-track-kind-subtitles">subtitles</a> state. <a href="references.html#refsBCP47">[BCP47]</a><div class="impl"> If the element has a <code title="attr-track-srclang"><a href="#attr-track-srclang">srclang</a></code> attribute whose value is not the empty string, then the element's <dfn id="track-language">track language</dfn> is the value of the attribute. Otherwise, the element has no <a href="#track-language">track language</a>. </div>The <dfn id="attr-track-label" title="attr-track-label"><code>label</code></dfn> attribute gives a user-readable title for the track. This title is used by user agents when listing <a href="#attr-track-kind-subtitles" title="attr-track-kind-subtitles">subtitle</a>, <a href="#attr-track-kind-captions" title="attr-track-kind-captions">caption</a>, and <a href="#attr-track-kind-descriptions" title="attr-track-kind-descriptions">audio description</a> tracks in their user interface.The value of the <code title="attr-track-label"><a href="#attr-track-label">label</a></code> attribute, if the attribute is present, must not be the empty string. Furthermore, there must not be two <code><a href="#the-track-element">track</a></code> element children of the same <a href="#media-element">media element</a> whose <code title="attr-track-kind"><a href="#attr-track-kind">kind</a></code> attributes are in the same state, whose <code title="attr-track-srclang"><a href="#attr-track-srclang">srclang</a></code> attributes are both missing or have values that represent the same language, and whose <code title="attr-track-label"><a href="#attr-track-label">label</a></code> attributes are again both missing or both have the same value.<div class="impl"> If the element has a <code title="attr-track-label"><a href="#attr-track-label">label</a></code> attribute whose value is not the empty string, then the element's <dfn id="track-label">track label</dfn> is the value of the attribute. Otherwise, the element's <a href="#track-label">track label</a> is a user-agent defined string (e.g. the string "untitled" in the user's locale, or a value automatically generated from the other attributes). </div>The <dfn id="attr-track-default" title="attr-track-default"><code>default</code></dfn> attribute, if specified, indicates that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate. There must not be more than one <code><a href="#the-track-element">track</a></code> element with the same parent node with the <code title="attr-track-default"><a href="#attr-track-default">default</a></code> attribute specified.<dl class="domintro"><dt><var title="">track</var> . <code title="dom-track-track"><a href="#dom-track-track">track</a></code></dt> <dd> Returns the <code><a href="#texttrack">TextTrack</a></code> object corresponding to the <a href="#text-track">text track</a> of the <code><a href="#the-track-element">track</a></code> element. </dd> </dl><div class="impl"> The <dfn id="dom-track-track" title="dom-track-track"><code>track</code></dfn> IDL attribute must, on getting, return the <code><a href="#the-track-element">track</a></code> element's <a href="#text-track">text track</a>'s corresponding <code><a href="#texttrack">TextTrack</a></code> object. The <dfn id="dom-track-src" title="dom-track-src"><code>src</code></dfn>, <dfn id="dom-track-srclang" title="dom-track-srclang"><code>srclang</code></dfn>, <dfn id="dom-track-label" title="dom-track-label"><code>label</code></dfn>, and <dfn id="dom-track-default" title="dom-track-default"><code>default</code></dfn> IDL attributes must <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the same name. The <dfn id="dom-track-kind" title="dom-track-kind"><code>kind</code></dfn> IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the same name, <a href="common-dom-interfaces.html#limited-to-only-known-values">limited to only known values</a>. </div><div class="example"> This video has subtitles in several languages: <pre><video src="brave.webm"> <track kind=subtitles src=brave.en.vtt srclang=en label="English"> <track kind=captions src=brave.en.vtt srclang=en label="English for the Hard of Hearing"> <track kind=subtitles src=brave.fr.vtt srclang=fr label="Français"> <track kind=subtitles src=brave.de.vtt srclang=de label="Deutsch"> </video></pre> </div><h4 id="media-elements">4.8.10 Media elements</h4><dfn id="media-element" title="media element">Media elements</dfn> (<code><a href="#audio">audio</a></code> and <code><a href="#video">video</a></code>, in this specification) implement the following interface:<pre class="idl">interface <dfn id="htmlmediaelement">HTMLMediaElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> { // error state readonly attribute <a href="#mediaerror">MediaError</a> <a href="#dom-media-error" title="dom-media-error">error</a>; // network state attribute DOMString <a href="#dom-media-src" title="dom-media-src">src</a>; readonly attribute DOMString <a href="#dom-media-currentsrc" title="dom-media-currentSrc">currentSrc</a>; const unsigned short <a href="#dom-media-network_empty" title="dom-media-NETWORK_EMPTY">NETWORK_EMPTY</a> = 0; const unsigned short <a href="#dom-media-network_idle" title="dom-media-NETWORK_IDLE">NETWORK_IDLE</a> = 1; const unsigned short <a href="#dom-media-network_loading" title="dom-media-NETWORK_LOADING">NETWORK_LOADING</a> = 2; const unsigned short <a href="#dom-media-network_no_source" title="dom-media-NETWORK_NO_SOURCE">NETWORK_NO_SOURCE</a> = 3; readonly attribute unsigned short <a href="#dom-media-networkstate" title="dom-media-networkState">networkState</a>; attribute DOMString <a href="#dom-media-preload" title="dom-media-preload">preload</a>;  readonly attribute <a href="#timeranges">TimeRanges</a> <a href="#dom-media-buffered" title="dom-media-buffered">buffered</a>; void <a href="#dom-media-load" title="dom-media-load">load</a>(); DOMString <a href="#dom-navigator-canplaytype" title="dom-navigator-canPlayType">canPlayType</a>(in DOMString type); // ready state const unsigned short <a href="#dom-media-have_nothing" title="dom-media-HAVE_NOTHING">HAVE_NOTHING</a> = 0; const unsigned short <a href="#dom-media-have_metadata" title="dom-media-HAVE_METADATA">HAVE_METADATA</a> = 1; const unsigned short <a href="#dom-media-have_current_data" title="dom-media-HAVE_CURRENT_DATA">HAVE_CURRENT_DATA</a> = 2; const unsigned short <a href="#dom-media-have_future_data" title="dom-media-HAVE_FUTURE_DATA">HAVE_FUTURE_DATA</a> = 3; const unsigned short <a href="#dom-media-have_enough_data" title="dom-media-HAVE_ENOUGH_DATA">HAVE_ENOUGH_DATA</a> = 4; readonly attribute unsigned short <a href="#dom-media-readystate" title="dom-media-readyState">readyState</a>; readonly attribute boolean <a href="#dom-media-seeking" title="dom-media-seeking">seeking</a>; // playback state attribute double <a href="#dom-media-currenttime" title="dom-media-currentTime">currentTime</a>; readonly attribute double <a href="#dom-media-initialtime" title="dom-media-initialTime">initialTime</a>; readonly attribute double <a href="#dom-media-duration" title="dom-media-duration">duration</a>; readonly attribute Date <a href="#dom-media-startoffsettime" title="dom-media-startOffsetTime">startOffsetTime</a>; readonly attribute boolean <a href="#dom-media-paused" title="dom-media-paused">paused</a>; attribute double <a href="#dom-media-defaultplaybackrate" title="dom-media-defaultPlaybackRate">defaultPlaybackRate</a>; attribute double <a href="#dom-media-playbackrate" title="dom-media-playbackRate">playbackRate</a>; readonly attribute <a href="#timeranges">TimeRanges</a> <a href="#dom-media-played" title="dom-media-played">played</a>; readonly attribute <a href="#timeranges">TimeRanges</a> <a href="#dom-media-seekable" title="dom-media-seekable">seekable</a>; readonly attribute boolean <a href="#dom-media-ended" title="dom-media-ended">ended</a>; attribute boolean <a href="#dom-media-autoplay" title="dom-media-autoplay">autoplay</a>; attribute boolean <a href="#dom-media-loop" title="dom-media-loop">loop</a>; void <a href="#dom-media-play" title="dom-media-play">play</a>(); void <a href="#dom-media-pause" title="dom-media-pause">pause</a>(); // controls attribute boolean <a href="#dom-media-controls" title="dom-media-controls">controls</a>; attribute double <a href="#dom-media-volume" title="dom-media-volume">volume</a>; attribute boolean <a href="#dom-media-muted" title="dom-media-muted">muted</a>;  // text tracks readonly attribute <a href="#texttrack">TextTrack</a>[] <a href="#dom-media-tracks" title="dom-media-tracks">tracks</a>; <a href="#mutabletexttrack">MutableTextTrack</a> <a href="#dom-media-addtrack" title="dom-media-addTrack">addTrack</a>(in DOMString kind, in optional DOMString label, in optional DOMString language);  };</pre>The <dfn id="media-element-attributes">media element attributes</dfn>, <code title="attr-media-src"><a href="#attr-media-src">src</a></code>, <code title="attr-media-preload"><a href="#attr-media-preload">preload</a></code>, <code title="attr-media-autoplay"><a href="#attr-media-autoplay">autoplay</a></code>, <code title="attr-media-loop"><a href="#attr-media-loop">loop</a></code>, and <code title="attr-media-controls"><a href="#attr-media-controls">controls</a></code>, apply to all <a href="#media-element" title="media element">media elements</a>. They are defined in this section.<a href="#media-element" title="media element">Media elements</a> are used to present audio data, or video and audio data, to the user. This is referred to as <dfn id="media-data">media data</dfn> in this section, since this section applies equally to <a href="#media-element" title="media element">media elements</a> for audio or for video. The term <dfn id="media-resource">media resource</dfn> is used to refer to the complete set of media data, e.g. the complete video file, or complete audio file.<div class="impl"> Except where otherwise specified, the <a href="webappapis.html#task-source">task source</a> for all the tasks <a href="webappapis.html#queue-a-task" title="queue a task">queued</a> in this section and its subsections is the <dfn id="media-element-event-task-source">media element event task source</dfn>. </div><h5 id="error-codes">4.8.10.1 Error codes</h5><dl class="domintro"><dt><var title="">media</var> . <code title="dom-media-error"><a href="#dom-media-error">error</a></code></dt> <dd> Returns a <code><a href="#mediaerror">MediaError</a></code> object representing the current error state of the element. Returns null if there is no error. </dd> </dl><div class="impl"> All <a href="#media-element" title="media element">media elements</a> have an associated error status, which records the last error the element encountered since its <a href="#concept-media-load-algorithm" title="concept-media-load-algorithm">resource selection algorithm</a> was last invoked. The <dfn id="dom-media-error" title="dom-media-error"><code>error</code></dfn> attribute, on getting, must return the <code><a href="#mediaerror">MediaError</a></code> object created for this last error, or null if there has not been an error. </div><pre class="idl">interface <dfn id="mediaerror">MediaError</dfn> { const unsigned short <a href="#dom-mediaerror-media_err_aborted" title="dom-MediaError-MEDIA_ERR_ABORTED">MEDIA_ERR_ABORTED</a> = 1; const unsigned short <a href="#dom-mediaerror-media_err_network" title="dom-MediaError-MEDIA_ERR_NETWORK">MEDIA_ERR_NETWORK</a> = 2; const unsigned short <a href="#dom-mediaerror-media_err_decode" title="dom-MediaError-MEDIA_ERR_DECODE">MEDIA_ERR_DECODE</a> = 3; const unsigned short <a href="#dom-mediaerror-media_err_src_not_supported" title="dom-MediaError-MEDIA_ERR_SRC_NOT_SUPPORTED">MEDIA_ERR_SRC_NOT_SUPPORTED</a> = 4; readonly attribute unsigned short <a href="#dom-mediaerror-code" title="dom-MediaError-code">code</a>; };</pre><dl class="domintro"><dt><var title="">media</var> . <code title="dom-media-error"><a href="#dom-media-error">error</a></code> . <code title="dom-MediaError-code"><a href="#dom-mediaerror-code">code</a></code></dt> <dd> Returns the current error's error code, from the list below. </dd> </dl><div class="impl"> The <dfn id="dom-mediaerror-code" title="dom-MediaError-code"><code>code</code></dfn> attribute of a <code><a href="#mediaerror">MediaError</a></code> object must return the code for the error, which must be one of the following: </div><dl><dt><dfn id="dom-mediaerror-media_err_aborted" title="dom-MediaError-MEDIA_ERR_ABORTED"><code>MEDIA_ERR_ABORTED</code></dfn> (numeric value 1)</dt> <dd>The fetching process for the <a href="#media-resource">media resource</a> was aborted by the user agent at the user's request.</dd> <dt><dfn id="dom-mediaerror-media_err_network" title="dom-MediaError-MEDIA_ERR_NETWORK"><code>MEDIA_ERR_NETWORK</code></dfn> (numeric value 2)</dt> <dd>A network error of some description caused the user agent to stop fetching the <a href="#media-resource">media resource</a>, after the resource was established to be usable.</dd> <dt><dfn id="dom-mediaerror-media_err_decode" title="dom-MediaError-MEDIA_ERR_DECODE"><code>MEDIA_ERR_DECODE</code></dfn> (numeric value 3)</dt> <dd>An error of some description occurred while decoding the <a href="#media-resource">media resource</a>, after the resource was established to be usable.</dd> <dt><dfn id="dom-mediaerror-media_err_src_not_supported" title="dom-MediaError-MEDIA_ERR_SRC_NOT_SUPPORTED"><code>MEDIA_ERR_SRC_NOT_SUPPORTED</code></dfn> (numeric value 4)</dt> <dd>The <a href="#media-resource">media resource</a> indicated by the <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute was not suitable.</dd> </dl><h5 id="location-of-the-media-resource">4.8.10.2 Location of the media resource</h5>The <dfn id="attr-media-src" title="attr-media-src"><code>src</code></dfn> content attribute on <a href="#media-element" title="media element">media elements</a> gives the address of the media resource (video, audio) to show. The attribute, if present, must contain a <a href="urls.html#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially surrounded by spaces</a>.<div class="impl"> If a <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute of a <a href="#media-element">media element</a> is set or changed, the user agent must invoke the <a href="#media-element">media element</a>'s <a href="#media-element-load-algorithm">media element load algorithm</a>. (Removing the <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute does not do this, even if there are <code><a href="#the-source-element">source</a></code> elements present.) The <dfn id="dom-media-src" title="dom-media-src"><code>src</code></dfn> IDL attribute on <a href="#media-element" title="media element">media elements</a> must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the same name. </div><dl class="domintro"><dt><var title="">media</var> . <code title="dom-media-currentSrc"><a href="#dom-media-currentsrc">currentSrc</a></code></dt> <dd> Returns the address of the current <a href="#media-resource">media resource</a>. Returns the empty string when there is no <a href="#media-resource">media resource</a>. </dd> </dl><div class="impl"> The <dfn id="dom-media-currentsrc" title="dom-media-currentSrc"><code>currentSrc</code></dfn> IDL attribute is initially the empty string. Its value is changed by the <a href="#concept-media-load-algorithm" title="concept-media-load-algorithm">resource selection algorithm</a> defined below. </div>There are two ways to specify a <a href="#media-resource">media resource</a>, the <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute, or <code><a href="#the-source-element">source</a></code> elements. The attribute overrides the elements.<h5 id="mime-types">4.8.10.3 MIME types</h5>A <a href="#media-resource">media resource</a> can be described in terms of its type, specifically a <a href="infrastructure.html#mime-type">MIME type</a>, in some cases with a <code title="">codecs</code> parameter. (Whether the <code title="">codecs</code> parameter is allowed or not depends on the MIME type.) <a href="references.html#refsRFC4281">[RFC4281]</a>Types are usually somewhat incomplete descriptions; for example "<code title="">video/mpeg</code>" doesn't say anything except what the container type is, and even a type like "<code title="">video/mp4; codecs="avc1.42E01E, mp4a.40.2"</code>" 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.<dfn id="a-type-that-the-user-agent-knows-it-cannot-render">A type that the user agent knows it cannot render</dfn> 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 <a href="infrastructure.html#mime-type">MIME type</a> "<code>application/octet-stream</code>" with no parameters is never <a href="#a-type-that-the-user-agent-knows-it-cannot-render">a type that the user agent knows it cannot render</a>. User agents must treat that type as equivalent to the lack of any explicit <a href="fetching-resources.html#content-type" title="Content-Type">Content-Type metadata</a> when it is used to label a potential <a href="#media-resource">media resource</a>.In the absence of a  specification to the contrary, the <a href="infrastructure.html#mime-type">MIME type</a> "<code>application/octet-stream</code>" when used with parameters, e.g. "<code>application/octet-stream;codecs=theora</code>", is <a href="#a-type-that-the-user-agent-knows-it-cannot-render">a type that the user agent knows it cannot render</a>, since that parameter is not defined for that type.<dl class="domintro"><dt><var title="">media</var> . <code title="dom-navigator-canPlayType"><a href="#dom-navigator-canplaytype">canPlayType</a></code>(<var title="">type</var>)</dt> <dd> 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. </dd> </dl><div class="impl"> The <dfn id="dom-navigator-canplaytype" title="dom-navigator-canPlayType"><code>canPlayType(<var title="">type</var>)</code></dfn> method must return the empty string if <var title="">type</var> is <a href="#a-type-that-the-user-agent-knows-it-cannot-render">a type that the user agent knows it cannot render</a> or is the type "<code>application/octet-stream</code>"; it must return "<code title="">probably</code>" if the user agent is confident that the type represents a <a href="#media-resource">media resource</a> that it can render if used in with this <code><a href="#audio">audio</a></code> or <code><a href="#video">video</a></code> element; and it must return "<code title="">maybe</code>" otherwise. Implementors are encouraged to return "<code title="">maybe</code>" unless the type can be confidently established as being supported or not. Generally, a user agent should never return "<code title="">probably</code>" for a type that allows the <code title="">codecs</code> parameter if that parameter is not present. </div><div class="example"> This script tests to see if the user agent supports a (fictional) new format to dynamically decide whether to use a <code><a href="#video">video</a></code> element or a plugin: <pre><section id="video"> <a href="playing-cats.nfv">Download video</a> </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></pre> </div>The <code title="attr-source-type"><a href="#attr-source-type">type</a></code> attribute of the <code><a href="#the-source-element">source</a></code> element allows the user agent to avoid downloading resources that use formats it cannot render.<h5 id="network-states">4.8.10.4 Network states</h5><dl class="domintro"><dt><var title="">media</var> . <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code></dt> <dd> Returns the current state of network activity for the element, from the codes in the list below. </dd> </dl><div class="impl"> As <a href="#media-element" title="media element">media elements</a> interact with the network, their current network activity is represented by the <dfn id="dom-media-networkstate" title="dom-media-networkState"><code>networkState</code></dfn> attribute. On getting, it must return the current network state of the element, which must be one of the following values: </div><dl><dt><dfn id="dom-media-network_empty" title="dom-media-NETWORK_EMPTY"><code>NETWORK_EMPTY</code></dfn> (numeric value 0)</dt> <dd>The element has not yet been initialized. All attributes are in their initial states.</dd> <dt><dfn id="dom-media-network_idle" title="dom-media-NETWORK_IDLE"><code>NETWORK_IDLE</code></dfn> (numeric value 1)</dt> <dd>The element's <a href="#concept-media-load-algorithm" title="concept-media-load-algorithm">resource selection algorithm</a> is active and has selected a <a href="#media-resource" title="media resource">resource</a>, but it is not actually using the network at this time.</dd> <dt><dfn id="dom-media-network_loading" title="dom-media-NETWORK_LOADING"><code>NETWORK_LOADING</code></dfn> (numeric value 2)</dt> <dd>The user agent is actively trying to download data.</dd> <dt><dfn id="dom-media-network_no_source" title="dom-media-NETWORK_NO_SOURCE"><code>NETWORK_NO_SOURCE</code></dfn> (numeric value 3)</dt> <dd>The element's <a href="#concept-media-load-algorithm" title="concept-media-load-algorithm">resource selection algorithm</a> is active, but it has so not yet found a <a href="#media-resource" title="media resource">resource</a> to use.</dd> </dl><div class="impl"> The <a href="#concept-media-load-algorithm" title="concept-media-load-algorithm">resource selection algorithm</a> defined below describes exactly when the <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> attribute changes value and what events fire to indicate changes in this state. </div><h5 id="loading-the-media-resource">4.8.10.5 Loading the media resource</h5><dl class="domintro"><dt><var title="">media</var> . <code title="dom-media-load"><a href="#dom-media-load">load</a></code>()</dt> <dd> Causes the element to reset and start selecting and loading a new <a href="#media-resource">media resource</a> from scratch. </dd> </dl><div class="impl"> All <a href="#media-element" title="media element">media elements</a> have an <dfn id="autoplaying-flag">autoplaying flag</dfn>, which must begin in the true state, and a <dfn id="delaying-the-load-event-flag">delaying-the-load-event flag</dfn>, which must begin in the false state. While the <a href="#delaying-the-load-event-flag">delaying-the-load-event flag</a> is true, the element must <a href="the-end.html#delay-the-load-event">delay the load event</a> of its document. When the <dfn id="dom-media-load" title="dom-media-load"><code>load()</code></dfn> method on a <a href="#media-element">media element</a> is invoked, the user agent must run the <a href="#media-element-load-algorithm">media element load algorithm</a>. The <dfn id="media-element-load-algorithm">media element load algorithm</dfn> consists of the following steps. <ol><li>Abort any already-running instance of the <a href="#concept-media-load-algorithm" title="concept-media-load-algorithm">resource selection algorithm</a> for this element.</li> <li> If there are any <a href="webappapis.html#concept-task" title="concept-task">tasks</a> from the <a href="#media-element">media element</a>'s <a href="#media-element-event-task-source">media element event task source</a> in one of the <a href="webappapis.html#task-queue" title="task queue">task queues</a>, then remove those tasks. Basically, pending events and callbacks for the media element are discarded when the media element starts loading a new resource. </li> <li>If the <a href="#media-element">media element</a>'s <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> is set to <code title="dom-media-NETWORK_LOADING"><a href="#dom-media-network_loading">NETWORK_LOADING</a></code> or <code title="dom-media-NETWORK_IDLE"><a href="#dom-media-network_idle">NETWORK_IDLE</a></code>, <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-abort"><a href="#event-media-abort">abort</a></code> at the <a href="#media-element">media element</a>.</li> <li> If the <a href="#media-element">media element</a>'s <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> is not set to <code title="dom-media-NETWORK_EMPTY"><a href="#dom-media-network_empty">NETWORK_EMPTY</a></code>, then run these substeps: <ol><li>If a fetching process is in progress for the <a href="#media-element">media element</a>, the user agent should stop it.</li> <li>Set the <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> attribute to <code title="dom-media-NETWORK_EMPTY"><a href="#dom-media-network_empty">NETWORK_EMPTY</a></code>.</li>  <li><a href="#forget-the-media-element-s-media-resource-specific-text-tracks">Forget the media element's media-resource-specific text tracks</a>.</li>  <li>If <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> is not set to <code title="dom-media-HAVE_NOTHING"><a href="#dom-media-have_nothing">HAVE_NOTHING</a></code>, then set it to that state.</li> <li>If the <code title="dom-media-paused"><a href="#dom-media-paused">paused</a></code> attribute is false, then set to true.</li> <li>If <code title="dom-media-seeking"><a href="#dom-media-seeking">seeking</a></code> is true, set it to false.</li> <li> Set the <a href="#current-playback-position">current playback position</a> to 0. If this changed the <a href="#current-playback-position">current playback position</a>, then <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-timeupdate"><a href="#event-media-timeupdate">timeupdate</a></code> at the <a href="#media-element">media element</a>. </li> <li>Set the <a href="#initial-playback-position">initial playback position</a> to 0.</li> <li>Set the <a href="#timeline-offset">timeline offset</a> to Not-a-Number (NaN).</li> <li> Update the <code title="dom-media-duration"><a href="#dom-media-duration">duration</a></code> attribute to Not-a-Number (NaN). The user agent <a href="#durationChange">will not</a> fire a <code title="event-media-durationchange"><a href="#event-media-durationchange">durationchange</a></code> event for this particular change of the duration. </li> <li><a href="webappapis.html#queue-a-task">Queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-emptied"><a href="#event-media-emptied">emptied</a></code> at the <a href="#media-element">media element</a>.</li> </ol></li> <li>Set the <code title="dom-media-playbackRate"><a href="#dom-media-playbackrate">playbackRate</a></code> attribute to the value of the <code title="dom-media-defaultPlaybackRate"><a href="#dom-media-defaultplaybackrate">defaultPlaybackRate</a></code> attribute.</li> <li>Set the <code title="dom-media-error"><a href="#dom-media-error">error</a></code> attribute to null and the <a href="#autoplaying-flag">autoplaying flag</a> to true.</li> <li>Invoke the <a href="#media-element">media element</a>'s <a href="#concept-media-load-algorithm" title="concept-media-load-algorithm">resource selection algorithm</a>.</li> <li> Playback of any previously playing <a href="#media-resource">media resource</a> for this element stops. </li> </ol>The <dfn id="concept-media-load-algorithm" title="concept-media-load-algorithm">resource selection algorithm</dfn> for a <a href="#media-element">media element</a> 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 <a href="webappapis.html#concept-task" title="concept-task">tasks</a> running in parallel. In addition, this algorithm interacts closely with the <a href="webappapis.html#event-loop">event loop</a> mechanism; in particular, it has <a href="webappapis.html#synchronous-section" title="synchronous section">synchronous sections</a> (which are triggered as part of the <a href="webappapis.html#event-loop">event loop</a> algorithm). Steps in such sections are marked with ⌛. <ol><li>Set the <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> to <code title="dom-media-NETWORK_NO_SOURCE"><a href="#dom-media-network_no_source">NETWORK_NO_SOURCE</a></code>.</li> <li>Asynchronously <a href="webappapis.html#await-a-stable-state">await a stable state</a>, allowing the <a href="webappapis.html#concept-task" title="concept-task">task</a> that invoked this algorithm to continue. The <a href="webappapis.html#synchronous-section">synchronous section</a> consists of all the remaining steps of this algorithm until the algorithm says the <a href="webappapis.html#synchronous-section">synchronous section</a> has ended. (Steps in <a href="webappapis.html#synchronous-section" title="synchronous section">synchronous sections</a> are marked with ⌛.)</li> <li> ⌛ If the <a href="#media-element">media element</a> has a <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute, then let <var title="">mode</var> be attribute. ⌛ Otherwise, if the <a href="#media-element">media element</a> does not have a <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute but has a <code><a href="#the-source-element">source</a></code> element child, then let <var title="">mode</var> be children and let <var title="">candidate</var> be the first such <code><a href="#the-source-element">source</a></code> element child in <a href="infrastructure.html#tree-order">tree order</a>. ⌛ Otherwise the <a href="#media-element">media element</a> has neither a <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute nor a <code><a href="#the-source-element">source</a></code> element child: set the <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> to <code title="dom-media-NETWORK_EMPTY"><a href="#dom-media-network_empty">NETWORK_EMPTY</a></code>, and abort these steps; the <a href="webappapis.html#synchronous-section">synchronous section</a> ends. </li> <li>⌛ Set the <a href="#media-element">media element</a>'s <a href="#delaying-the-load-event-flag">delaying-the-load-event flag</a> to true (this <a href="the-end.html#delay-the-load-event" title="delay the load event">delays the load event</a>), and set its <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> to <code title="dom-media-NETWORK_LOADING"><a href="#dom-media-network_loading">NETWORK_LOADING</a></code>.</li> <li>⌛ <a href="webappapis.html#queue-a-task">Queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-loadstart"><a href="#event-media-loadstart">loadstart</a></code> at the <a href="#media-element">media element</a>.</li> <li> If <var title="">mode</var> is attribute, then run these substeps: <ol><li>⌛ Process candidate: If the <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute's value is the empty string, then end the <a href="webappapis.html#synchronous-section">synchronous section</a>, and jump down to the failed step below.</li> <li>⌛ Let <var title="">absolute URL</var> be the <a href="urls.html#absolute-url">absolute URL</a> that would have resulted from <a href="urls.html#resolve-a-url" title="resolve a url">resolving</a> the <a href="urls.html#url">URL</a> specified by the <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute's value relative to the <a href="#media-element">media element</a> when the <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute was last changed.  </li><li>⌛ If <var title="">absolute URL</var> was obtained successfully, set the <code title="dom-media-currentSrc"><a href="#dom-media-currentsrc">currentSrc</a></code> attribute to <var title="">absolute URL</var>.</li> <li>End the <a href="webappapis.html#synchronous-section">synchronous section</a>, continuing the remaining steps asynchronously.</li> <li>If <var title="">absolute URL</var> was obtained successfully, run the <a href="#concept-media-load-resource" title="concept-media-load-resource">resource fetch algorithm</a> with <var title="">absolute URL</var>. If that algorithm returns without aborting this one, then the load failed.</li> <li> Failed: Reaching this step indicates that the media resource failed to load or that the given <a href="urls.html#url">URL</a> could not be <a href="urls.html#resolve-a-url" title="resolve a url">resolved</a>. In one atomic operation, run the following steps: <ol><li>Set the <code title="dom-media-error"><a href="#dom-media-error">error</a></code> attribute to a new <code><a href="#mediaerror">MediaError</a></code> object whose <code title="dom-MediaError-code"><a href="#dom-mediaerror-code">code</a></code> attribute is set to <code title="dom-MediaError-MEDIA_ERR_SRC_NOT_SUPPORTED"><a href="#dom-mediaerror-media_err_src_not_supported">MEDIA_ERR_SRC_NOT_SUPPORTED</a></code>.</li>  <li><a href="#forget-the-media-element-s-media-resource-specific-text-tracks">Forget the media element's media-resource-specific text tracks</a>.</li>  <li>Set the element's <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> attribute to the <a href="#dom-media-network_no_source" title="dom-media-NETWORK_NO_SOURCE">NETWORK_NO_SOURCE</a> value.</li> </ol></li> <li><a href="webappapis.html#queue-a-task">Queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-error"><a href="#event-media-error">error</a></code> at the <a href="#media-element">media element</a>.</li> <li>Set the element's <a href="#delaying-the-load-event-flag">delaying-the-load-event flag</a> to false. This stops <a href="the-end.html#delay-the-load-event" title="delay the load event">delaying the load event</a>.</li> <li>Abort these steps. Until the <code title="dom-media-load"><a href="#dom-media-load">load()</a></code> method is invoked or the <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute is changed, the element won't attempt to load another resource.</li>  </ol>Otherwise, the <code><a href="#the-source-element">source</a></code> elements will be used; run these substeps: <ol><li> ⌛ Let <var title="">pointer</var> be a position defined by two adjacent nodes in the <a href="#media-element">media element</a>'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 <var title="">pointer</var>, and the other node is the node after <var title="">pointer</var>. Initially, let <var title="">pointer</var> be the position between the <var title="">candidate</var> 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 <a href="#media-element">media element</a>, <var title="">pointer</var> must be updated as follows: <dl><dt>If a new node is inserted between the two nodes that define <var title="">pointer</var></dt> <dd>Let <var title="">pointer</var> be the point between the node before <var title="">pointer</var> and the new node. In other words, insertions at <var title="">pointer</var> go after <var title="">pointer</var>.</dd> <dt>If the node before <var title="">pointer</var> is removed</dt> <dd>Let <var title="">pointer</var> be the point between the node after <var title="">pointer</var> and the node before the node after <var title="">pointer</var>. In other words, <var title="">pointer</var> doesn't move relative to the remaining nodes.</dd> <dt>If the node after <var title="">pointer</var> is removed</dt> <dd>Let <var title="">pointer</var> be the point between the node before <var title="">pointer</var> and the node after the node before <var title="">pointer</var>. Just as with the previous case, <var title="">pointer</var> doesn't move relative to the remaining nodes.</dd> </dl>Other changes don't affect <var title="">pointer</var>. </li> <li>⌛ Process candidate: If <var title="">candidate</var> does not have a <code title="attr-source-src"><a href="#attr-source-src">src</a></code> attribute, or if its <code title="attr-source-src"><a href="#attr-source-src">src</a></code> attribute's value is the empty string, then end the <a href="webappapis.html#synchronous-section">synchronous section</a>, and jump down to the failed step below.</li> <li>⌛ Let <var title="">absolute URL</var> be the <a href="urls.html#absolute-url">absolute URL</a> that would have resulted from <a href="urls.html#resolve-a-url" title="resolve a url">resolving</a> the <a href="urls.html#url">URL</a> specified by <var title="">candidate</var>'s <code title="attr-source-src"><a href="#attr-source-src">src</a></code> attribute's value relative to the <var title="">candidate</var> when the <code title="attr-source-src"><a href="#attr-source-src">src</a></code> attribute was last changed.  </li><li>⌛ If <var title="">absolute URL</var> was not obtained successfully, then end the <a href="webappapis.html#synchronous-section">synchronous section</a>, and jump down to the failed step below.</li> <li>⌛ If <var title="">candidate</var> has a <code title="attr-source-type"><a href="#attr-source-type">type</a></code> attribute whose value, when parsed as a <a href="infrastructure.html#mime-type">MIME type</a> (including any codecs described by the <code title="">codecs</code> parameter, for types that define that parameter), represents <a href="#a-type-that-the-user-agent-knows-it-cannot-render">a type that the user agent knows it cannot render</a>, then end the <a href="webappapis.html#synchronous-section">synchronous section</a>, and jump down to the failed step below.</li> <li>⌛ If <var title="">candidate</var> has a <code title="attr-source-media"><a href="#attr-source-media">media</a></code> attribute whose value does not <a href="common-microsyntaxes.html#matches-the-environment" title="matches the environment">match the environment</a>, then end the <a href="webappapis.html#synchronous-section">synchronous section</a>, and jump down to the failed step below.</li> <li>⌛ Set the <code title="dom-media-currentSrc"><a href="#dom-media-currentsrc">currentSrc</a></code> attribute to <var title="">absolute URL</var>.</li> <li>End the <a href="webappapis.html#synchronous-section">synchronous section</a>, continuing the remaining steps asynchronously.</li> <li>Run the <a href="#concept-media-load-resource" title="concept-media-load-resource">resource fetch algorithm</a> with <var title="">absolute URL</var>. If that algorithm returns without aborting this one, then the load failed.</li> <li>Failed: <a href="webappapis.html#queue-a-task">Queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-error">error</code> at the <var title="">candidate</var> element, in the context of the <a href="fetching-resources.html#fetch" title="fetch">fetching process</a> that was used to try to obtain <var title="">candidate</var>'s corresponding <a href="#media-resource">media resource</a> in the <a href="#concept-media-load-resource" title="concept-media-load-resource">resource fetch algorithm</a>.</li> <li>Asynchronously <a href="webappapis.html#await-a-stable-state">await a stable state</a>. The <a href="webappapis.html#synchronous-section">synchronous section</a> consists of all the remaining steps of this algorithm until the algorithm says the <a href="webappapis.html#synchronous-section">synchronous section</a> has ended. (Steps in <a href="webappapis.html#synchronous-section" title="synchronous section">synchronous sections</a> are marked with ⌛.)</li>  <li>⌛ <a href="#forget-the-media-element-s-media-resource-specific-text-tracks">Forget the media element's media-resource-specific text tracks</a>.</li>  <li>⌛ Find next candidate: Let <var title="">candidate</var> be null.</li> <li>⌛ Search loop: If the node after <var title="">pointer</var> is the end of the list, then jump to the waiting step below.</li> <li>⌛ If the node after <var title="">pointer</var> is a <code><a href="#the-source-element">source</a></code> element, let <var title="">candidate</var> be that element.</li> <li>⌛ Advance <var title="">pointer</var> so that the node before <var title="">pointer</var> is now the node that was after <var title="">pointer</var>, and the node after <var title="">pointer</var> is the node after the node that used to be after <var title="">pointer</var>, if any.</li> <li>⌛ If <var title="">candidate</var> is null, jump back to the search loop step. Otherwise, jump back to the process candidate step.</li> <li>⌛ Waiting: Set the element's <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> attribute to the <a href="#dom-media-network_no_source" title="dom-media-NETWORK_NO_SOURCE">NETWORK_NO_SOURCE</a> value.</li> <li>⌛ Set the element's <a href="#delaying-the-load-event-flag">delaying-the-load-event flag</a> to false. This stops <a href="the-end.html#delay-the-load-event" title="delay the load event">delaying the load event</a>.</li> <li>End the <a href="webappapis.html#synchronous-section">synchronous section</a>, continuing the remaining steps asynchronously.</li> <li>Wait until the node after <var title="">pointer</var> is a node other than the end of the list. (This step might wait forever.)</li> <li>Asynchronously <a href="webappapis.html#await-a-stable-state">await a stable state</a>. The <a href="webappapis.html#synchronous-section">synchronous section</a> consists of all the remaining steps of this algorithm until the algorithm says the <a href="webappapis.html#synchronous-section">synchronous section</a> has ended. (Steps in <a href="webappapis.html#synchronous-section" title="synchronous section">synchronous sections</a> are marked with ⌛.)</li> <li>⌛ Set the element's <a href="#delaying-the-load-event-flag">delaying-the-load-event flag</a> back to true (this <a href="the-end.html#delay-the-load-event" title="delay the load event">delays the load event</a> again, in case it hasn't been fired yet). </li><li>⌛ Set the <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> back to <code title="dom-media-NETWORK_LOADING"><a href="#dom-media-network_loading">NETWORK_LOADING</a></code>.</li> <li>⌛ Jump back to the find next candidate step above.</li> </ol></li> </ol>The <dfn id="concept-media-load-resource" title="concept-media-load-resource">resource fetch algorithm</dfn> for a <a href="#media-element">media element</a> and a given <a href="urls.html#absolute-url">absolute URL</a> is as follows: <ol><li>Let the <var title="">current media resource</var> be the resource given by the <a href="urls.html#absolute-url">absolute URL</a> passed to this algorithm. This is now the element's <a href="#media-resource">media resource</a>.</li> <li> Begin to <a href="fetching-resources.html#fetch">fetch</a> the <var title="">current media resource</var>, from the <a href="#media-element">media element</a>'s <code><a href="infrastructure.html#document">Document</a></code>'s <a href="origin-0.html#origin">origin</a>, with the force same-origin flag set.  Every 350ms (±200ms) or for every byte received, whichever is least frequent, <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-progress"><a href="#event-media-progress">progress</a></code> at the element. The <dfn id="stall-timeout">stall timeout</dfn> is a user-agent defined length of time, which should be about three seconds. When a <a href="#media-element">media element</a> that is actively attempting to obtain <a href="#media-data">media data</a> has failed to receive any data for a duration equal to the <a href="#stall-timeout">stall timeout</a>, the user agent must <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-stalled"><a href="#event-media-stalled">stalled</a></code> at the element. User agents may allow users to selectively block or slow <a href="#media-data">media data</a> downloads. When a <a href="#media-element">media element</a>'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 <a href="#media-element">media element</a>'s download has been suspended, the user agent must set the <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> to <code title="dom-media-NETWORK_IDLE"><a href="#dom-media-network_idle">NETWORK_IDLE</a></code> and <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-suspend"><a href="#event-media-suspend">suspend</a></code> at the element. If and when downloading of the resource resumes, the user agent must set the <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> to <code title="dom-media-NETWORK_LOADING"><a href="#dom-media-network_loading">NETWORK_LOADING</a></code>. The <code title="attr-media-preload"><a href="#attr-media-preload">preload</a></code> attribute provides a hint regarding how much buffering the author thinks is advisable, even in the absence of the <code title="attr-media-autoplay"><a href="#attr-media-autoplay">autoplay</a></code> 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 <a href="#delaying-the-load-event-flag">delaying-the-load-event flag</a> must be set to false. This stops <a href="the-end.html#delay-the-load-event" title="delay the load event">delaying the load event</a>. 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 <a href="webappapis.html#networking-task-source">networking task source</a> <a href="webappapis.html#concept-task" title="concept-task">tasks</a> to process the data as it is being fetched must, when appropriate, include the relevant substeps from the following list: <dl class="switch"><dt>If the <a href="#media-data">media data</a> cannot be fetched at all, due to network errors, causing the user agent to give up trying to fetch the resource</dt> <dt>If the <a href="#media-resource">media resource</a> is found to have <a href="fetching-resources.html#content-type" title="Content-Type">Content-Type metadata</a> that, when parsed as a <a href="infrastructure.html#mime-type">MIME type</a> (including any codecs described by the <code title="">codecs</code> parameter, if the parameter is defined for that type), represents <a href="#a-type-that-the-user-agent-knows-it-cannot-render">a type that the user agent knows it cannot render</a> (even if the actual <a href="#media-data">media data</a> is in a supported format)</dt> <dt>If the <a href="#media-data">media data</a> can be fetched but is found by inspection to be in an unsupported format, or can otherwise not be rendered at all</dt> <dd> 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 <var title="">current media resource</var> 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: <ol><li>The user agent should cancel the fetching process.</li> <li>Abort this subalgorithm, returning to the <a href="#concept-media-load-algorithm" title="concept-media-load-algorithm">resource selection algorithm</a>. </li></ol></dd>   <dt id="getting-media-metadata">Once enough of the <a href="#media-data">media data</a> has been fetched to determine the duration of the <a href="#media-resource">media resource</a>, its dimensions, and other metadata,  and once <a href="#the-text-tracks-are-ready">the text tracks are ready</a>  </dt> <dd> This indicates that the resource is usable. The user agent must follow these substeps: <ol><li> <a href="#defineTimeline">Establish the media timeline</a> for the purposes of the <a href="#current-playback-position">current playback position</a>, the <a href="#earliest-possible-position">earliest possible position</a>, and the <a href="#initial-playback-position">initial playback position</a>, based on the <a href="#media-data">media data</a>. </li> <li> Update the <a href="#timeline-offset">timeline offset</a> to the date and time that corresponds to the zero time in the <a href="#media-timeline">media timeline</a> established in the previous step, if any. If no explicit time and date is given by the <a href="#media-resource">media resource</a>, the <a href="#timeline-offset">timeline offset</a> must be set to Not-a-Number (NaN). </li> <li>Set the <a href="#current-playback-position">current playback position</a> to the <a href="#earliest-possible-position">earliest possible position</a>.</li> <li> Update the <code title="dom-media-duration"><a href="#dom-media-duration">duration</a></code> attribute with the time of the last frame of the resource, if known, on the <a href="#media-timeline">media timeline</a> established above. If it is not known (e.g. a stream that is in principle infinite), update the <code title="dom-media-duration"><a href="#dom-media-duration">duration</a></code> attribute to the value positive Infinity. The user agent <a href="#durationChange">will</a> <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-durationchange"><a href="#event-media-durationchange">durationchange</a></code> at the element at this point. </li> <li>Set the <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> attribute to <code title="dom-media-HAVE_METADATA"><a href="#dom-media-have_metadata">HAVE_METADATA</a></code>.</li> <li>For <code><a href="#video">video</a></code> elements, set the <code title="dom-video-videoWidth"><a href="#dom-video-videowidth">videoWidth</a></code> and <code title="dom-video-videoHeight"><a href="#dom-video-videoheight">videoHeight</a></code> attributes.</li> <li id="fire-loadedmetadata"> <a href="webappapis.html#queue-a-task">Queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-loadedmetadata"><a href="#event-media-loadedmetadata">loadedmetadata</a></code> at the element. Before this task is run, as part of the event loop mechanism, the rendering will have been updated to resize the <code><a href="#video">video</a></code> element if appropriate. </li> <li> If either the <a href="#media-resource">media resource</a> or the address of the <var title="">current media resource</var> indicate a particular start time, then set the <a href="#initial-playback-position">initial playback position</a> to that time and then seek <a href="#dom-media-seek" title="dom-media-seek">seek</a> 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. </li> <li> Once the <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> attribute reaches <code title="dom-media-HAVE_CURRENT_DATA"><a href="#dom-media-have_current_data">HAVE_CURRENT_DATA</a></code>, <a href="#fire-loadeddata">after the <code title="event-media-loadeddata">loadeddata</code> event has been fired</a>, set the element's <a href="#delaying-the-load-event-flag">delaying-the-load-event flag</a> to false. This stops <a href="the-end.html#delay-the-load-event" title="delay the load event">delaying the load event</a>. A user agent that is attempting to reduce network usage while still fetching the metadata for each <a href="#media-resource">media resource</a> would also stop buffering at this point, causing the <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> attribute to switch to the <code title="dom-media-NETWORK_IDLE"><a href="#dom-media-network_idle">NETWORK_IDLE</a></code> value. </li> </ol>The user agent is required to determine the duration of the <a href="#media-resource">media resource</a> and go through this step before playing.  </dd> <dt>Once the entire <a href="#media-resource">media resource</a> has been <a href="fetching-resources.html#fetch" title="fetch">fetched</a> (but potentially before any of it has been decoded)</dt> <dd> <a href="webappapis.html#queue-a-task">Queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-progress"><a href="#event-media-progress">progress</a></code> at the <a href="#media-element">media element</a>. </dd> <dt>If the connection is interrupted, causing the user agent to give up trying to fetch the resource</dt> <dd> Fatal network errors that occur after the user agent has established whether the <var title="">current media resource</var> is usable must cause the user agent to execute the following steps: <ol><li>The user agent should cancel the fetching process.</li> <li>Set the <code title="dom-media-error"><a href="#dom-media-error">error</a></code> attribute to a new <code><a href="#mediaerror">MediaError</a></code> object whose <code title="dom-MediaError-code"><a href="#dom-mediaerror-code">code</a></code> attribute is set to <code title="dom-MediaError-MEDIA_ERR_NETWORK"><a href="#dom-mediaerror-media_err_network">MEDIA_ERR_NETWORK</a></code>.</li> <li><a href="webappapis.html#queue-a-task">Queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-error"><a href="#event-media-error">error</a></code> at the <a href="#media-element">media element</a>.</li> <li>If the <a href="#media-element">media element</a>'s <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> attribute has a value equal to <code title="dom-media-HAVE_NOTHING"><a href="#dom-media-have_nothing">HAVE_NOTHING</a></code>, set the element's <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> attribute to the <code title="dom-media-NETWORK_EMPTY"><a href="#dom-media-network_empty">NETWORK_EMPTY</a></code> value and <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-emptied"><a href="#event-media-emptied">emptied</a></code> at the element. Otherwise, set the element's <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> attribute to the <code title="dom-media-NETWORK_IDLE"><a href="#dom-media-network_idle">NETWORK_IDLE</a></code> value.</li> <li>Set the element's <a href="#delaying-the-load-event-flag">delaying-the-load-event flag</a> to false. This stops <a href="the-end.html#delay-the-load-event" title="delay the load event">delaying the load event</a>.</li> <li>Abort the overall <a href="#concept-media-load-algorithm" title="concept-media-load-algorithm">resource selection algorithm</a>.</li> </ol></dd> <dt id="fatal-decode-error">If the <a href="#media-data">media data</a> is corrupted</dt> <dd> Fatal errors in decoding the <a href="#media-data">media data</a> that occur after the user agent has established whether the <var title="">current media resource</var> is usable must cause the user agent to execute the following steps: <ol><li>The user agent should cancel the fetching process.</li> <li>Set the <code title="dom-media-error"><a href="#dom-media-error">error</a></code> attribute to a new <code><a href="#mediaerror">MediaError</a></code> object whose <code title="dom-MediaError-code"><a href="#dom-mediaerror-code">code</a></code> attribute is set to <code title="dom-MediaError-MEDIA_ERR_DECODE"><a href="#dom-mediaerror-media_err_decode">MEDIA_ERR_DECODE</a></code>.</li> <li><a href="webappapis.html#queue-a-task">Queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-error"><a href="#event-media-error">error</a></code> at the <a href="#media-element">media element</a>.</li> <li>If the <a href="#media-element">media element</a>'s <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> attribute has a value equal to <code title="dom-media-HAVE_NOTHING"><a href="#dom-media-have_nothing">HAVE_NOTHING</a></code>, set the element's <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> attribute to the <code title="dom-media-NETWORK_EMPTY"><a href="#dom-media-network_empty">NETWORK_EMPTY</a></code> value and <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-emptied"><a href="#event-media-emptied">emptied</a></code> at the element. Otherwise, set the element's <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> attribute to the <code title="dom-media-NETWORK_IDLE"><a href="#dom-media-network_idle">NETWORK_IDLE</a></code> value.</li> <li>Set the element's <a href="#delaying-the-load-event-flag">delaying-the-load-event flag</a> to false. This stops <a href="the-end.html#delay-the-load-event" title="delay the load event">delaying the load event</a>.</li> <li>Abort the overall <a href="#concept-media-load-algorithm" title="concept-media-load-algorithm">resource selection algorithm</a>.</li> </ol></dd> <dt>If the <a href="#media-data">media data</a> fetching process is aborted by the user</dt> <dd> 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 <code title="dom-media-load"><a href="#dom-media-load">load()</a></code> method itself is invoked while these steps are running, as the steps above handle that particular kind of abort. <ol><li>The user agent should cancel the fetching process.</li> <li>Set the <code title="dom-media-error"><a href="#dom-media-error">error</a></code> attribute to a new <code><a href="#mediaerror">MediaError</a></code> object whose <code title="dom-MediaError-code"><a href="#dom-mediaerror-code">code</a></code> attribute is set to <code title="dom-MediaError-MEDIA_ERR_ABORTED"><a href="#dom-mediaerror-media_err_aborted">MEDIA_ERR_ABORTED</a></code>.</li> <li><a href="webappapis.html#queue-a-task">Queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-abort"><a href="#event-media-abort">abort</a></code> at the <a href="#media-element">media element</a>.</li> <li>If the <a href="#media-element">media element</a>'s <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> attribute has a value equal to <code title="dom-media-HAVE_NOTHING"><a href="#dom-media-have_nothing">HAVE_NOTHING</a></code>, set the element's <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> attribute to the <code title="dom-media-NETWORK_EMPTY"><a href="#dom-media-network_empty">NETWORK_EMPTY</a></code> value and <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-emptied"><a href="#event-media-emptied">emptied</a></code> at the element. Otherwise, set the element's <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> attribute to the <code title="dom-media-NETWORK_IDLE"><a href="#dom-media-network_idle">NETWORK_IDLE</a></code> value.</li> <li>Set the element's <a href="#delaying-the-load-event-flag">delaying-the-load-event flag</a> to false. This stops <a href="the-end.html#delay-the-load-event" title="delay the load event">delaying the load event</a>.</li> <li>Abort the overall <a href="#concept-media-load-algorithm" title="concept-media-load-algorithm">resource selection algorithm</a>.</li> </ol></dd> <dt id="non-fatal-media-error">If the <a href="#media-data">media data</a> 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</dt> <dd> 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.  </dd>  <dt id="found-a-media-resource-specific-timed-track">If the <a href="#media-resource">media resource</a> is found to declare a <a href="#media-resource-specific-text-track">media-resource-specific text track</a> that the user agent supports</dt> <dd> If the <a href="#media-resource">media resource</a>'s <a href="origin-0.html#origin">origin</a> is the <a href="origin-0.html#same-origin">same origin</a> as the <a href="#media-element">media element</a>'s <code><a href="infrastructure.html#document">Document</a></code>'s <a href="origin-0.html#origin">origin</a>, <a href="webappapis.html#queue-a-task">queue a task</a> to run the <a href="#steps-to-expose-a-media-resource-specific-text-track">steps to expose a media-resource-specific text track</a> with the relevant data.  Cross-origin files do not expose their subtitles in the DOM, for security reasons. However, user agents may still provide the user with access to such data in their user interface. </dd>  </dl>When the <a href="webappapis.html#networking-task-source">networking task source</a> has <a href="webappapis.html#queue-a-task" title="queue a task">queued</a> the last <a href="webappapis.html#concept-task" title="concept-task">task</a> as part of <a href="fetching-resources.html#fetch" title="fetch">fetching</a> the <a href="#media-resource">media resource</a> (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 <a href="#media-resource">media resource</a>, 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 <a href="#ended-playback" title="ended playback">playback has ended</a>, because there is always the chance the user will seek back to the start. In fact, in this situation, once <a href="#ended-playback" title="ended playback">playback has ended</a>, the user agent will end up dispatching a <code title="event-media-stalled"><a href="#event-media-stalled">stalled</a></code> event, as described earlier. </li> <li>If the user agent ever reaches this step (which can only happen if the entire resource gets loaded and kept available): abort the overall <a href="#concept-media-load-algorithm" title="concept-media-load-algorithm">resource selection algorithm</a>.</li> </ol></div><hr>The <dfn id="attr-media-preload" title="attr-media-preload"><code>preload</code></dfn> attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a>. 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.<table><thead><tr><th> Keyword </th><th> State </th><th> Brief description </th></tr></thead><tbody><tr><td><dfn id="attr-media-preload-none" title="attr-media-preload-none"><code>none</code></dfn> </td><td><dfn id="attr-media-preload-none-state" title="attr-media-preload-none-state">None</dfn> </td><td>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. </td></tr><tr><td><dfn id="attr-media-preload-metadata" title="attr-media-preload-metadata"><code>metadata</code></dfn> </td><td><dfn id="attr-media-preload-metadata-state" title="attr-media-preload-metadata-state">Metadata</dfn> </td><td>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. </td></tr><tr><td><dfn id="attr-media-preload-auto" title="attr-media-preload-auto"><code>auto</code></dfn> </td><td><dfn id="attr-media-preload-auto-state" title="attr-media-preload-auto-state">Automatic</dfn> </td><td>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. </td></tr></tbody></table>The empty string is also a valid keyword, and maps to the <a href="#attr-media-preload-auto-state" title="attr-media-preload-auto-state">Automatic</a> state. The attribute's missing value default is user-agent defined, though the <a href="#attr-media-preload-auto-state" title="attr-media-preload-auto-state">Metadata</a> state is suggested as a compromise between reducing server load and providing an optimal user experience.<div class="impl"> The <code title="attr-media-preload"><a href="#attr-media-preload">preload</a></code> 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 <dfn id="dom-media-preload" title="dom-media-preload"><code>preload</code></dfn> IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the same name, <a href="common-dom-interfaces.html#limited-to-only-known-values">limited to only known values</a>. </div>The <code title="attr-media-autoplay"><a href="#attr-media-autoplay">autoplay</a></code> attribute can override the <code title="attr-media-preload"><a href="#attr-media-preload">preload</a></code> attribute (since if the media plays, it naturally has to buffer first, regardless of the hint given by the <code title="attr-media-preload"><a href="#attr-media-preload">preload</a></code> attribute). Including both is not an error, however.<hr><dl class="domintro"><dt><var title="">media</var> . <code title="dom-media-buffered"><a href="#dom-media-buffered">buffered</a></code></dt> <dd> Returns a <code><a href="#timeranges">TimeRanges</a></code> object that represents the ranges of the <a href="#media-resource">media resource</a> that the user agent has buffered. </dd> </dl><div class="impl"> The <dfn id="dom-media-buffered" title="dom-media-buffered"><code>buffered</code></dfn> attribute must return a new static <a href="#normalized-timeranges-object">normalized <code>TimeRanges</code> object</a> that represents the ranges of the <a href="#media-resource">media resource</a>, 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 <code title="dom-media-buffered"><a href="#dom-media-buffered">buffered</a></code> attribute at one time can end up being not included in the range(s) of objects returned by the same attribute at later times. </div><h5 id="offsets-into-the-media-resource">4.8.10.6 Offsets into the media resource</h5><dl class="domintro"><dt><var title="">media</var> . <code title="dom-media-duration"><a href="#dom-media-duration">duration</a></code></dt> <dd> Returns the length of the <a href="#media-resource">media resource</a>, in seconds, assuming that the start of the <a href="#media-resource">media resource</a> is at time zero. Returns NaN if the duration isn't available. Returns Infinity for unbounded streams. </dd> <dt><var title="">media</var> . <code title="dom-media-currentTime"><a href="#dom-media-currenttime">currentTime</a></code> [ = <var title="">value</var> ]</dt> <dd> Returns the <a href="#current-playback-position">current playback position</a>, in seconds. Can be set, to seek to the given time. Will throw an <code><a href="common-dom-interfaces.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception if there is no selected <a href="#media-resource">media resource</a>. Will throw an <code><a href="common-dom-interfaces.html#index_size_err">INDEX_SIZE_ERR</a></code> exception if the given time is not within the ranges to which the user agent can seek. </dd> <dt><var title="">media</var> . <code title="dom-media-initialTime"><a href="#dom-media-initialtime">initialTime</a></code></dt> <dd> Returns the <a href="#initial-playback-position">initial playback position</a>, that is, time to which the <a href="#media-resource">media resource</a> was automatically seeked when it was loaded. Returns zero if the <a href="#initial-playback-position">initial playback position</a> is still unknown. </dd> </dl><div class="impl"> A <a href="#media-resource">media resource</a> has a <dfn id="media-timeline">media timeline</dfn> that maps times (in seconds) to positions in the <a href="#media-resource">media resource</a>. The origin of a timeline is its earliest defined position. The duration of a timeline is its last defined position. <dfn id="defineTimeline" title="establish the media timeline">Establishing the media timeline</dfn>: If the <a href="#media-resource">media resource</a> somehow specifies an explicit timeline whose origin is not negative, then the <a href="#media-timeline">media timeline</a> should be that timeline. (Whether the <a href="#media-resource">media resource</a> can specify a timeline or not depends on the <a href="#media-resource" title="media resource">media resource's</a> format.) If the <a href="#media-resource">media resource</a> specifies an explicit start time and date, then that time and date should be considered the zero point in the <a href="#media-timeline">media timeline</a>; the <a href="#timeline-offset">timeline offset</a> will be the time and date, exposed using the <code title="dom-media-startOffsetTime"><a href="#dom-media-startoffsettime">startOffsetTime</a></code> attribute. If the <a href="#media-resource">media resource</a> 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 <a href="#media-timeline">media timeline</a> of the <a href="#media-resource">media resource</a> increases linearly starting from the <a href="#earliest-possible-position">earliest possible position</a> (as defined below), even if the underlying <a href="#media-data">media data</a> 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 absence of an explicit timeline, the zero time on the <a href="#media-timeline">media timeline</a> should correspond to the first frame of the <a href="#media-resource">media resource</a>. For static audio and video files this is generally trivial. For streaming resources, if the user agent will 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 <a href="#media-resource">media resource</a>; otherwise, it should correspond to the first frame received from the server (the point in the <a href="#media-resource">media resource</a> at which the user agent began receiving the stream). Another example would be a stream that carries a video with several concatenated fragments, broadcast by a server that does not allow user agents to request specific times but instead just streams the video data in a predetermined order. If a user agent connects to this stream and receives fragments defined as covering timestamps 2010-03-20 23:15:00 UTC to 2010-03-21 00:05:00 UTC and 2010-02-12 14:25:00 UTC to 2010-02-12 14:35:00 UTC, it would expose this with a <a href="#media-timeline">media timeline</a> starting at 0s and extending to 3,600s (one hour). Assuming the streaming server disconnected at the end of the second clip, the <code title="dom-media-duration"><a href="#dom-media-duration">duration</a></code> attribute would then return 3,600. The <code title="dom-media-startOffsetTime"><a href="#dom-media-startoffsettime">startOffsetTime</a></code> attribute would return a <code>Date</code> object with a time corresponding to 2010-03-20 23:15:00 UTC. However, if a different user agent connected five minutes later, it would (presumably) receive fragments covering timestamps 2010-03-20 23:20:00 UTC to 2010-03-21 00:05:00 UTC and 2010-02-12 14:25:00 UTC to 2010-02-12 14:35:00 UTC, and would expose this with a <a href="#media-timeline">media timeline</a> starting at 0s and extending to 3,300s (fifty five minutes). In this case, the <code title="dom-media-startOffsetTime"><a href="#dom-media-startoffsettime">startOffsetTime</a></code> attribute would return a <code>Date</code> object with a time corresponding to 2010-03-20 23:20:00 UTC. In any case, the user agent must ensure that the <a href="#earliest-possible-position">earliest possible position</a> (as defined below) using the established <a href="#media-timeline">media timeline</a>, is greater than or equal to zero. <a href="#media-element" title="media element">Media elements</a> have a <dfn id="current-playback-position">current playback position</dfn>, which must initially (i.e. in the absence of <a href="#media-data">media data</a>) be zero seconds. The <a href="#current-playback-position">current playback position</a> is a time on the <a href="#media-timeline">media timeline</a>. The <dfn id="dom-media-currenttime" title="dom-media-currentTime"><code>currentTime</code></dfn> attribute must, on getting, return the <a href="#current-playback-position">current playback position</a>, expressed in seconds. On setting, the user agent must <a href="#dom-media-seek" title="dom-media-seek">seek</a> to the new value (which might raise an exception). <a href="#media-element" title="media element">Media elements</a> have an <dfn id="initial-playback-position">initial playback position</dfn>, which must initially (i.e. in the absence of <a href="#media-data">media data</a>) be zero seconds. The <a href="#initial-playback-position">initial playback position</a> is updated when a <a href="#media-resource">media resource</a> is loaded. The <a href="#initial-playback-position">initial playback position</a> is a time on the <a href="#media-timeline">media timeline</a>. The <dfn id="dom-media-initialtime" title="dom-media-initialTime">initialTime<code></code></dfn> attribute must, on getting, return the <a href="#initial-playback-position">initial playback position</a>, expressed in seconds. If the <a href="#media-resource">media resource</a> 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 <a href="#media-resource" title="media resource">media resources</a> might have a <a href="#media-timeline">media timeline</a> that doesn't start at zero. The <dfn id="earliest-possible-position">earliest possible position</dfn> is the earliest position in the stream or resource that the user agent can ever obtain again. It is also a time on the <a href="#media-timeline">media timeline</a>. The <a href="#earliest-possible-position">earliest possible position</a> is not explicitly exposed in the API; it corresponds to the start time of the first range in the <code title="dom-media-seekable"><a href="#dom-media-seekable">seekable</a></code> attribute's <code><a href="#timeranges">TimeRanges</a></code> object, if any, or the <a href="#current-playback-position">current playback position</a> otherwise. When the <a href="#earliest-possible-position">earliest possible position</a> changes, then: if the <a href="#current-playback-position">current playback position</a> is before the <a href="#earliest-possible-position">earliest possible position</a>, the user agent must <a href="#dom-media-seek" title="dom-media-seek">seek</a> to the <a href="#earliest-possible-position">earliest possible position</a>; otherwise, if the user agent has not fired a <code title="event-media-timeupdate"><a href="#event-media-timeupdate">timeupdate</a></code> 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 <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-timeupdate"><a href="#event-media-timeupdate">timeupdate</a></code> at the element. Because of the above requirement and the requirement in the <a href="#concept-media-load-resource" title="concept-media-load-resource">resource fetch algorithm</a> that kicks in <a href="#getting-media-metadata">when the metadata of the clip becomes known</a>, the <a href="#current-playback-position">current playback position</a> can never be less than the <a href="#earliest-possible-position">earliest possible position</a>. The <dfn id="dom-media-duration" title="dom-media-duration"><code>duration</code></dfn> attribute must return the time of the end of the <a href="#media-resource">media resource</a>, in seconds, on the <a href="#media-timeline">media timeline</a>. If no <a href="#media-data">media data</a> is available, then the attributes must return the Not-a-Number (NaN) value. If the <a href="#media-resource">media resource</a> 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 <a href="#media-resource">media resource</a> before playing any part of the <a href="#media-data">media data</a> and before setting <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> to a value equal to or greater than <code title="dom-media-HAVE_METADATA"><a href="#dom-media-have_metadata">HAVE_METADATA</a></code>, even if doing so requires fetching multiple parts of the resource. When the length of the <a href="#media-resource">media resource</a> 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 <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-durationchange"><a href="#event-media-durationchange">durationchange</a></code> at the <a href="#media-element">media element</a>. (The event is not fired when the duration is reset as part of loading a new 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 <code title="event-media-durationchange"><a href="#event-media-durationchange">durationchange</a></code> event would be fired. Similarly, if the user agent initially estimated the <a href="#media-resource">media resource</a>'s duration instead of determining it precisely, and later revises the estimate based on new information, then the duration would change and the <code title="event-media-durationchange"><a href="#event-media-durationchange">durationchange</a></code> event would be fired. Some video files also have an explicit date and time corresponding to the zero time in the <a href="#media-timeline">media timeline</a>, known as the <dfn id="timeline-offset">timeline offset</dfn>. Initially, the <a href="#timeline-offset">timeline offset</a> must be set to Not-a-Number (NaN). The <dfn id="dom-media-startoffsettime" title="dom-media-startOffsetTime"><code>startOffsetTime</code></dfn> attribute must return a new <code>Date</code> object representing the current <a href="#timeline-offset">timeline offset</a>. </div><hr>The <dfn id="attr-media-loop" title="attr-media-loop"><code>loop</code></dfn> attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a> that, if specified, indicates that the <a href="#media-element">media element</a> is to seek back to the start of the <a href="#media-resource">media resource</a> upon reaching the end.<div class="impl"> The <dfn id="dom-media-loop" title="dom-media-loop"><code>loop</code></dfn> IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the same name. </div><h5 id="the-ready-states">4.8.10.7 The ready states</h5><dl class="domintro"><dt><var title="">media</var> . <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code></dt> <dd> Returns a value that expresses the current state of the element with respect to rendering the <a href="#current-playback-position">current playback position</a>, from the codes in the list below. </dd> </dl><div class="impl"> <a href="#media-element" title="media element">Media elements</a> have a ready state, which describes to what degree they are ready to be rendered at the <a href="#current-playback-position">current playback position</a>. 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: </div><dl><dt><dfn id="dom-media-have_nothing" title="dom-media-HAVE_NOTHING"><code>HAVE_NOTHING</code></dfn> (numeric value 0)</dt> <dd>No information regarding the <a href="#media-resource">media resource</a> is available. No data for the <a href="#current-playback-position">current playback position</a> is available. <a href="#media-element" title="media element">Media elements</a> whose <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> attribute are set to <code title="dom-media-NETWORK_EMPTY"><a href="#dom-media-network_empty">NETWORK_EMPTY</a></code> are always in the <code title="dom-media-HAVE_NOTHING"><a href="#dom-media-have_nothing">HAVE_NOTHING</a></code> state.</dd> <dt><dfn id="dom-media-have_metadata" title="dom-media-HAVE_METADATA"><code>HAVE_METADATA</code></dfn> (numeric value 1)</dt> <dd>Enough of the resource has been obtained that the duration of the resource is available. In the case of a <code><a href="#video">video</a></code> element, the dimensions of the video are also available. The API will no longer raise an exception when seeking. No <a href="#media-data">media data</a> is available for the immediate <a href="#current-playback-position">current playback position</a>.  The <a href="#text-track" title="text track">text tracks</a> are <a href="#the-text-tracks-are-ready" title="the text tracks are ready">ready</a>.  </dd> <dt><dfn id="dom-media-have_current_data" title="dom-media-HAVE_CURRENT_DATA"><code>HAVE_CURRENT_DATA</code></dfn> (numeric value 2)</dt> <dd>Data for the immediate <a href="#current-playback-position">current playback position</a> is available, but either not enough data is available that the user agent could successfully advance the <a href="#current-playback-position">current playback position</a> in the <a href="#direction-of-playback">direction of playback</a> at all without immediately reverting to the <code title="dom-media-HAVE_METADATA"><a href="#dom-media-have_metadata">HAVE_METADATA</a></code> state, or there is no more data to obtain in the <a href="#direction-of-playback">direction of playback</a>. For example, in video this corresponds to the user agent having data from the current frame, but not the next frame; and to when <a href="#ended-playback" title="ended playback">playback has ended</a>.</dd> <dt><dfn id="dom-media-have_future_data" title="dom-media-HAVE_FUTURE_DATA"><code>HAVE_FUTURE_DATA</code></dfn> (numeric value 3)</dt> <dd>Data for the immediate <a href="#current-playback-position">current playback position</a> is available, as well as enough data for the user agent to advance the <a href="#current-playback-position">current playback position</a> in the <a href="#direction-of-playback">direction of playback</a> at least a little without immediately reverting to the <code title="dom-media-HAVE_METADATA"><a href="#dom-media-have_metadata">HAVE_METADATA</a></code> 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 <a href="#ended-playback" title="ended playback">playback has ended</a>, as the <a href="#current-playback-position">current playback position</a> can never advance in this case.</dd> <dt><dfn id="dom-media-have_enough_data" title="dom-media-HAVE_ENOUGH_DATA"><code>HAVE_ENOUGH_DATA</code></dfn> (numeric value 4)</dt> <dd>All the conditions described for the <code title="dom-media-HAVE_FUTURE_DATA"><a href="#dom-media-have_future_data">HAVE_FUTURE_DATA</a></code> state are met, and, in addition, the user agent estimates that data is being fetched at a rate where the <a href="#current-playback-position">current playback position</a>, if it were to advance at the rate given by the <code title="dom-media-defaultPlaybackRate"><a href="#dom-media-defaultplaybackrate">defaultPlaybackRate</a></code> attribute, would not overtake the available data before playback reaches the end of the <a href="#media-resource">media resource</a>.</dd> </dl><div class="impl"> When the ready state of a <a href="#media-element">media element</a> whose <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> is not <code title="dom-media-NETWORK_EMPTY"><a href="#dom-media-network_empty">NETWORK_EMPTY</a></code> changes, the user agent must follow the steps given below: <dl class="switch"><dt>If the previous ready state was <code title="dom-media-HAVE_NOTHING"><a href="#dom-media-have_nothing">HAVE_NOTHING</a></code>, and the new ready state is <code title="dom-media-HAVE_METADATA"><a href="#dom-media-have_metadata">HAVE_METADATA</a></code></dt> <dd> A <code title="event-media-loadedmetadata"><a href="#event-media-loadedmetadata">loadedmetadata</a></code> DOM event <a href="#fire-loadedmetadata">will be fired</a> as part of the <code title="dom-media-load"><a href="#dom-media-load">load()</a></code> algorithm. </dd>  <dt id="handling-first-frame-available">If the previous ready state was <code title="dom-media-HAVE_METADATA"><a href="#dom-media-have_metadata">HAVE_METADATA</a></code> and the new ready state is <code title="dom-media-HAVE_CURRENT_DATA"><a href="#dom-media-have_current_data">HAVE_CURRENT_DATA</a></code> or greater</dt> <dd> If this is the first time this occurs for this <a href="#media-element">media element</a> since the <code title="dom-media-load"><a href="#dom-media-load">load()</a></code> algorithm was last invoked, the user agent must <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-loadeddata"><a href="#event-media-loadeddata">loadeddata</a></code> at the element. If the new ready state is <code title="dom-media-HAVE_FUTURE_DATA"><a href="#dom-media-have_future_data">HAVE_FUTURE_DATA</a></code> or <code title="dom-media-HAVE_ENOUGH_DATA"><a href="#dom-media-have_enough_data">HAVE_ENOUGH_DATA</a></code>, then the relevant steps below must then be run also. </dd>  <dt>If the previous ready state was <code title="dom-media-HAVE_FUTURE_DATA"><a href="#dom-media-have_future_data">HAVE_FUTURE_DATA</a></code> or more, and the new ready state is <code title="dom-media-HAVE_CURRENT_DATA"><a href="#dom-media-have_current_data">HAVE_CURRENT_DATA</a></code> or less</dt> <dd> A <code title="event-media-waiting"><a href="#event-media-waiting">waiting</a></code> DOM event <a href="#fire-waiting-when-waiting">can be fired</a>, depending on the current state of playback. </dd>  <dt>If the previous ready state was <code title="dom-media-HAVE_CURRENT_DATA"><a href="#dom-media-have_current_data">HAVE_CURRENT_DATA</a></code> or less, and the new ready state is <code title="dom-media-HAVE_FUTURE_DATA"><a href="#dom-media-have_future_data">HAVE_FUTURE_DATA</a></code></dt> <dd> The user agent must <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-canplay"><a href="#event-media-canplay">canplay</a></code>. If the element is <a href="#potentially-playing">potentially playing</a>, the user agent must <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-playing"><a href="#event-media-playing">playing</a></code>. </dd>  <dt>If the new ready state is <code title="dom-media-HAVE_ENOUGH_DATA"><a href="#dom-media-have_enough_data">HAVE_ENOUGH_DATA</a></code></dt> <dd> If the previous ready state was <code title="dom-media-HAVE_CURRENT_DATA"><a href="#dom-media-have_current_data">HAVE_CURRENT_DATA</a></code> or less, the user agent must <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-canplay"><a href="#event-media-canplay">canplay</a></code>, and, if the element is also <a href="#potentially-playing">potentially playing</a>, <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-playing"><a href="#event-media-playing">playing</a></code>. If the <a href="#autoplaying-flag">autoplaying flag</a> is true, and the <code title="dom-media-paused"><a href="#dom-media-paused">paused</a></code> attribute is true, and the <a href="#media-element">media element</a> has an <code title="attr-media-autoplay"><a href="#attr-media-autoplay">autoplay</a></code> attribute specified, and the <a href="#media-element">media element</a>'s <code><a href="infrastructure.html#document">Document</a></code>'s <a href="browsers.html#browsing-context">browsing context</a> did not have the <a href="the-iframe-element.html#sandboxed-automatic-features-browsing-context-flag">sandboxed automatic features browsing context flag</a> set when the <code><a href="infrastructure.html#document">Document</a></code> was created, then the user agent may also set the <code title="dom-media-paused"><a href="#dom-media-paused">paused</a></code> attribute to false, <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-play"><a href="#event-media-play">play</a></code>, and <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-playing"><a href="#event-media-playing">playing</a></code>. 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 <code title="attr-media-autoplay"><a href="#attr-media-autoplay">autoplay</a></code> 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 <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-canplaythrough"><a href="#event-media-canplaythrough">canplaythrough</a></code>. </dd> </dl></div>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 <code title="dom-media-HAVE_METADATA"><a href="#dom-media-have_metadata">HAVE_METADATA</a></code> to <code title="dom-media-HAVE_ENOUGH_DATA"><a href="#dom-media-have_enough_data">HAVE_ENOUGH_DATA</a></code> without passing through the <code title="dom-media-HAVE_CURRENT_DATA"><a href="#dom-media-have_current_data">HAVE_CURRENT_DATA</a></code> and <code title="dom-media-HAVE_FUTURE_DATA"><a href="#dom-media-have_future_data">HAVE_FUTURE_DATA</a></code> states.<div class="impl"> The <dfn id="dom-media-readystate" title="dom-media-readyState"><code>readyState</code></dfn> IDL attribute must, on getting, return the value described above that describes the current ready state of the <a href="#media-element">media element</a>. </div>The <dfn id="attr-media-autoplay" title="attr-media-autoplay"><code>autoplay</code></dfn> attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. When present, the user agent (as described in the algorithm described herein) will automatically begin playback of the <a href="#media-resource">media resource</a> as soon as it can do so without stopping.Authors are urged to use the <code title="attr-media-autoplay"><a href="#attr-media-autoplay">autoplay</a></code> 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.<div class="impl"> The <dfn id="dom-media-autoplay" title="dom-media-autoplay"><code>autoplay</code></dfn> IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the same name. </div><h5 id="playing-the-media-resource">4.8.10.8 Playing the media resource</h5><dl class="domintro"><dt><var title="">media</var> . <code title="dom-media-paused"><a href="#dom-media-paused">paused</a></code></dt> <dd> Returns true if playback is paused; false otherwise. </dd> <dt><var title="">media</var> . <code title="dom-media-ended"><a href="#dom-media-ended">ended</a></code></dt> <dd> Returns true if playback has reached the end of the <a href="#media-resource">media resource</a>. </dd> <dt><var title="">media</var> . <code title="dom-media-defaultPlaybackRate"><a href="#dom-media-defaultplaybackrate">defaultPlaybackRate</a></code> [ = <var title="">value</var> ]</dt> <dd> Returns the default rate of playback, for when the user is not fast-forwarding or reversing through the <a href="#media-resource">media resource</a>. 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. </dd> <dt><var title="">media</var> . <code title="dom-media-playbackRate"><a href="#dom-media-playbackrate">playbackRate</a></code> [ = <var title="">value</var> ]</dt> <dd> Returns the current rate playback, where 1.0 is normal speed. Can be set, to change the rate of playback. </dd> <dt><var title="">media</var> . <code title="dom-media-played"><a href="#dom-media-played">played</a></code></dt> <dd> Returns a <code><a href="#timeranges">TimeRanges</a></code> object that represents the ranges of the <a href="#media-resource">media resource</a> that the user agent has played. </dd> <dt><var title="">media</var> . <code title="dom-media-play"><a href="#dom-media-play">play</a></code>()</dt> <dd> Sets the <code title="dom-media-paused"><a href="#dom-media-paused">paused</a></code> attribute to false, loading the <a href="#media-resource">media resource</a> and beginning playback if necessary. If the playback had ended, will restart it from the start. </dd> <dt><var title="">media</var> . <code title="dom-media-pause"><a href="#dom-media-pause">pause</a></code>()</dt> <dd> Sets the <code title="dom-media-paused"><a href="#dom-media-paused">paused</a></code> attribute to true, loading the <a href="#media-resource">media resource</a> if necessary. </dd> </dl><div class="impl"> The <dfn id="dom-media-paused" title="dom-media-paused"><code>paused</code></dfn> attribute represents whether the <a href="#media-element">media element</a> is paused or not. The attribute must initially be true. A <a href="#media-element">media element</a> is said to be <dfn id="potentially-playing">potentially playing</dfn> when its <code title="dom-media-paused"><a href="#dom-media-paused">paused</a></code> attribute is false, the <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> attribute is either <code title="dom-media-HAVE_FUTURE_DATA"><a href="#dom-media-have_future_data">HAVE_FUTURE_DATA</a></code> or <code title="dom-media-HAVE_ENOUGH_DATA"><a href="#dom-media-have_enough_data">HAVE_ENOUGH_DATA</a></code>, the element has not <a href="#ended-playback">ended playback</a>, playback has not <a href="#stopped-due-to-errors">stopped due to errors</a>, and the element has not <a href="#paused-for-user-interaction">paused for user interaction</a>. A <a href="#media-element">media element</a> is said to have <dfn id="ended-playback">ended playback</dfn> when the element's <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> attribute is <code title="dom-media-HAVE_METADATA"><a href="#dom-media-have_metadata">HAVE_METADATA</a></code> or greater, and either the <a href="#current-playback-position">current playback position</a> is the end of the <a href="#media-resource">media resource</a> and the <a href="#direction-of-playback">direction of playback</a> is forwards and the <a href="#media-element">media element</a> does not have a <code title="attr-media-loop"><a href="#attr-media-loop">loop</a></code> attribute specified, or the <a href="#current-playback-position">current playback position</a> is the <a href="#earliest-possible-position">earliest possible position</a> and the <a href="#direction-of-playback">direction of playback</a> is backwards. The <dfn id="dom-media-ended" title="dom-media-ended"><code>ended</code></dfn> attribute must return true if the <a href="#media-element">media element</a> has <a href="#ended-playback">ended playback</a> and the <a href="#direction-of-playback">direction of playback</a> is forwards, and false otherwise. A <a href="#media-element">media element</a> is said to have <dfn id="stopped-due-to-errors">stopped due to errors</dfn> when the element's <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> attribute is <code title="dom-media-HAVE_METADATA"><a href="#dom-media-have_metadata">HAVE_METADATA</a></code> or greater, and the user agent <a href="#non-fatal-media-error">encounters a non-fatal error</a> during the processing of the <a href="#media-data">media data</a>, and due to that error, is not able to play the content at the <a href="#current-playback-position">current playback position</a>. A <a href="#media-element">media element</a> is said to have <dfn id="paused-for-user-interaction">paused for user interaction</dfn> when its <code title="dom-media-paused"><a href="#dom-media-paused">paused</a></code> attribute is false, the <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> attribute is either <code title="dom-media-HAVE_FUTURE_DATA"><a href="#dom-media-have_future_data">HAVE_FUTURE_DATA</a></code> or <code title="dom-media-HAVE_ENOUGH_DATA"><a href="#dom-media-have_enough_data">HAVE_ENOUGH_DATA</a></code> and the user agent has reached a point in the <a href="#media-resource">media resource</a> where the user has to make a selection for the resource to continue. It is possible for a <a href="#media-element">media element</a> to have both <a href="#ended-playback">ended playback</a> and <a href="#paused-for-user-interaction">paused for user interaction</a> at the same time. When a <a href="#media-element">media element</a> that is <a href="#potentially-playing">potentially playing</a> stops playing because it has <a href="#paused-for-user-interaction">paused for user interaction</a>, the user agent must <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-timeupdate"><a href="#event-media-timeupdate">timeupdate</a></code> at the element. When a <a href="#media-element">media element</a> that is <a href="#potentially-playing">potentially playing</a> stops playing because its <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> attribute changes to a value lower than <code title="dom-media-HAVE_FUTURE_DATA"><a href="#dom-media-have_future_data">HAVE_FUTURE_DATA</a></code>, without the element having <a href="#ended-playback">ended playback</a>, or playback having <a href="#stopped-due-to-errors">stopped due to errors</a>, or playback having <a href="#paused-for-user-interaction">paused for user interaction</a>, or the <a href="#dom-media-seek" title="dom-media-seek">seeking algorithm</a> being invoked, the user agent must <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-timeupdate"><a href="#event-media-timeupdate">timeupdate</a></code> at the element, and <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-waiting"><a href="#event-media-waiting">waiting</a></code> at the element. When the <a href="#current-playback-position">current playback position</a> reaches the end of the <a href="#media-resource">media resource</a> when the <a href="#direction-of-playback">direction of playback</a> is forwards, then the user agent must follow these steps: <ol><li>If the <a href="#media-element">media element</a> has a <code title="attr-media-loop"><a href="#attr-media-loop">loop</a></code> attribute specified, then <a href="#dom-media-seek" title="dom-media-seek">seek</a> to the <a href="#earliest-possible-position">earliest possible position</a> of the <a href="#media-resource">media resource</a> and abort these steps.</li>  <li>Stop playback.The <code title="dom-media-ended"><a href="#dom-media-ended">ended</a></code> attribute becomes true.</li> <li>The user agent must <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-timeupdate"><a href="#event-media-timeupdate">timeupdate</a></code> at the element.</li> <li>The user agent must <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-ended"><a href="#event-media-ended">ended</a></code> at the element.</li> </ol>When the <a href="#current-playback-position">current playback position</a> reaches the <a href="#earliest-possible-position">earliest possible position</a> of the <a href="#media-resource">media resource</a> when the <a href="#direction-of-playback">direction of playback</a> is backwards, then the user agent must follow these steps: <ol><li>Stop playback.</li> <li>The user agent must <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-timeupdate"><a href="#event-media-timeupdate">timeupdate</a></code> at the element.</li> </ol>The <dfn id="dom-media-defaultplaybackrate" title="dom-media-defaultPlaybackRate"><code>defaultPlaybackRate</code></dfn> attribute gives the desired speed at which the <a href="#media-resource">media resource</a> 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 <dfn id="dom-media-playbackrate" title="dom-media-playbackRate"><code>playbackRate</code></dfn> attribute gives the speed at which the <a href="#media-resource">media resource</a> plays, as a multiple of its intrinsic speed. If it is not equal to the <code title="dom-media-defaultPlaybackRate"><a href="#dom-media-defaultplaybackrate">defaultPlaybackRate</a></code>, 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 <a href="#potentially-playing">potentially playing</a>). If the <code title="dom-media-playbackRate"><a href="#dom-media-playbackrate">playbackRate</a></code> is positive or zero, then the <dfn id="direction-of-playback">direction of playback</dfn> is forwards. Otherwise, it is backwards. The "play" function in a user agent's interface must set the <code title="dom-media-playbackRate"><a href="#dom-media-playbackrate">playbackRate</a></code> attribute to the value of the <code title="dom-media-defaultPlaybackRate"><a href="#dom-media-defaultplaybackrate">defaultPlaybackRate</a></code> attribute before invoking the <code title="dom-media-play"><a href="#dom-media-play">play()</a></code> method's steps. Features such as fast-forward or rewind must be implemented by only changing the <code title="dom-media-playbackRate"><a href="#dom-media-playbackrate">playbackRate</a></code> attribute. When the <code title="dom-media-defaultPlaybackRate"><a href="#dom-media-defaultplaybackrate">defaultPlaybackRate</a></code> or <code title="dom-media-playbackRate"><a href="#dom-media-playbackrate">playbackRate</a></code> 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 <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-ratechange"><a href="#event-media-ratechange">ratechange</a></code> at the <a href="#media-element">media element</a>. The <dfn id="dom-media-played" title="dom-media-played"><code>played</code></dfn> attribute must return a new static <a href="#normalized-timeranges-object">normalized <code>TimeRanges</code> object</a> that represents the ranges of the <a href="#media-resource">media resource</a>, if any, that the user agent has so far rendered, at the time the attribute is evaluated. <hr>When the <dfn id="dom-media-play" title="dom-media-play"><code>play()</code></dfn> method on a <a href="#media-element">media element</a> is invoked, the user agent must run the following steps. <ol><li>If the <a href="#media-element">media element</a>'s <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> attribute has the value <code title="dom-media-NETWORK_EMPTY"><a href="#dom-media-network_empty">NETWORK_EMPTY</a></code>, invoke the <a href="#media-element">media element</a>'s <a href="#concept-media-load-algorithm" title="concept-media-load-algorithm">resource selection algorithm</a>.</li> <li> If the <a href="#ended-playback" title="ended playback">playback has ended</a> and the <a href="#direction-of-playback">direction of playback</a> is forwards, <a href="#dom-media-seek" title="dom-media-seek">seek</a> to the <a href="#earliest-possible-position">earliest possible position</a> of the <a href="#media-resource">media resource</a>. This <a href="#seekUpdate">will cause</a> the user agent to <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-timeupdate"><a href="#event-media-timeupdate">timeupdate</a></code> at the <a href="#media-element">media element</a>.  </li> <li> If the <a href="#media-element">media element</a>'s <code title="dom-media-paused"><a href="#dom-media-paused">paused</a></code> attribute is true, run the following substeps: <ol><li>Change the value of <code title="dom-media-paused"><a href="#dom-media-paused">paused</a></code> to false.</li> <li><a href="webappapis.html#queue-a-task">Queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-play"><a href="#event-media-play">play</a></code> at the element.</li> <li> If the <a href="#media-element">media element</a>'s <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> attribute has the value <code title="dom-media-HAVE_NOTHING"><a href="#dom-media-have_nothing">HAVE_NOTHING</a></code>, <code title="dom-media-HAVE_METADATA"><a href="#dom-media-have_metadata">HAVE_METADATA</a></code>, or <code title="dom-media-HAVE_CURRENT_DATA"><a href="#dom-media-have_current_data">HAVE_CURRENT_DATA</a></code>, <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-waiting"><a href="#event-media-waiting">waiting</a></code> at the element. Otherwise, the <a href="#media-element">media element</a>'s <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> attribute has the value <code title="dom-media-HAVE_FUTURE_DATA"><a href="#dom-media-have_future_data">HAVE_FUTURE_DATA</a></code> or <code title="dom-media-HAVE_ENOUGH_DATA"><a href="#dom-media-have_enough_data">HAVE_ENOUGH_DATA</a></code>; <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-playing"><a href="#event-media-playing">playing</a></code> at the element. </li> </ol></li> <li>Set the <a href="#media-element">media element</a>'s <a href="#autoplaying-flag">autoplaying flag</a> to false.</li> </ol><hr>When the <dfn id="dom-media-pause" title="dom-media-pause"><code>pause()</code></dfn> method is invoked, the user agent must run the following steps: <ol><li>If the <a href="#media-element">media element</a>'s <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> attribute has the value <code title="dom-media-NETWORK_EMPTY"><a href="#dom-media-network_empty">NETWORK_EMPTY</a></code>, invoke the <a href="#media-element">media element</a>'s <a href="#concept-media-load-algorithm" title="concept-media-load-algorithm">resource selection algorithm</a>.</li> <li>Set the <a href="#media-element">media element</a>'s <a href="#autoplaying-flag">autoplaying flag</a> to false.</li> <li>If the <a href="#media-element">media element</a>'s <code title="dom-media-paused"><a href="#dom-media-paused">paused</a></code> attribute is false, run the following steps: <ol><li>Change the value of <code title="dom-media-paused"><a href="#dom-media-paused">paused</a></code> to true.</li> <li><a href="webappapis.html#queue-a-task">Queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-timeupdate"><a href="#event-media-timeupdate">timeupdate</a></code> at the element.</li> <li><a href="webappapis.html#queue-a-task">Queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-pause"><a href="#event-media-pause">pause</a></code> at the element.</li> </ol></li> </ol><hr>When a <a href="#media-element">media element</a> is <a href="#potentially-playing">potentially playing</a> and its <code><a href="infrastructure.html#document">Document</a></code> is a <a href="browsers.html#fully-active">fully active</a> <code><a href="infrastructure.html#document">Document</a></code>, its <a href="#current-playback-position">current playback position</a> must increase monotonically at <code title="dom-media-playbackRate"><a href="#dom-media-playbackrate">playbackRate</a></code> 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 <code title="dom-media-playbackRate"><a href="#dom-media-playbackrate">playbackRate</a></code> is negative (playback is backwards), any corresponding audio must be muted. When the <code title="dom-media-playbackRate"><a href="#dom-media-playbackrate">playbackRate</a></code> is so low or so high that the user agent cannot play audio usefully, the corresponding audio must also be muted. If the <code title="dom-media-playbackRate"><a href="#dom-media-playbackrate">playbackRate</a></code> is not 1.0, the user agent may apply pitch adjustments to the audio as necessary to render it faithfully. The <code title="dom-media-playbackRate"><a href="#dom-media-playbackrate">playbackRate</a></code> can be 0.0, in which case the <a href="#current-playback-position">current playback position</a> doesn't move, despite playback not being paused (<code title="dom-media-paused"><a href="#dom-media-paused">paused</a></code> doesn't become true, and the <code title="event-media-pause"><a href="#event-media-pause">pause</a></code> event doesn't fire). <a href="#media-element" title="media element">Media elements</a> that are <a href="#potentially-playing">potentially playing</a> while not <a href="infrastructure.html#in-a-document">in a <code>Document</code></a> 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 <code title="dom-media-playbackRate"><a href="#dom-media-playbackrate">playbackRate</a></code> is 0.0) may the element be garbage collected. <hr>When the <a href="#current-playback-position">current playback position</a> of a <a href="#media-element">media element</a> changes (e.g. due to playback or seeking), the user agent must run the following steps. If the <a href="#current-playback-position">current playback position</a> 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 <a href="#text-track-cue" title="text track cue">cues</a> to be skipped over as the user agent rushes ahead to "catch up".)  <ol><li>Let <var title="">current cues</var> be an ordered list of <a href="#text-track-cue" title="text track cue">cues</a>, initialized to contain all the <a href="#text-track-cue" title="text track cue">cues</a> of all the <a href="#text-track-hidden" title="text track hidden">hidden</a>, <a href="#text-track-showing" title="text track showing">showing</a>, or <a href="#text-track-showing-by-default" title="text track showing by default">showing by default</a> <a href="#text-track" title="text track">text tracks</a> of the <a href="#media-element">media element</a> (not the <a href="#text-track-disabled" title="text track disabled">disabled</a> ones) whose <a href="#text-track-cue-start-time" title="text track cue start time">start times</a> are less than or equal to the <a href="#current-playback-position">current playback position</a> and whose <a href="#text-track-cue-end-time" title="text track cue end time">end times</a> are greater than the <a href="#current-playback-position">current playback position</a>, in <a href="#text-track-cue-order">text track cue order</a>.</li> <li>Let <var title="">other cues</var> be an ordered list of <a href="#text-track-cue" title="text track cue">cues</a>, initialized to contain all the <a href="#text-track-cue" title="text track cue">cues</a> of <a href="#text-track-hidden" title="text track hidden">hidden</a>, <a href="#text-track-showing" title="text track showing">showing</a>, and <a href="#text-track-showing-by-default" title="text track showing by default">showing by default</a> <a href="#text-track" title="text track">text tracks</a> of the <a href="#media-element">media element</a> that are not present in <var title="">current cues</var>, also in <a href="#text-track-cue-order">text track cue order</a>.</li>  <li>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 <code title="event-media-timeupdate"><a href="#event-media-timeupdate">timeupdate</a></code> 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 <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-timeupdate"><a href="#event-media-timeupdate">timeupdate</a></code> 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.</li>  <li>If all of the <a href="#text-track-cue" title="text track cue">cues</a> in <var title="">current cues</var> have their <a href="#text-track-cue-active-flag">text track cue active flag</a> set, and none of the <a href="#text-track-cue" title="text track cue">cues</a> in <var title="">other cues</var> have their <a href="#text-track-cue-active-flag">text track cue active flag</a> set, then abort these steps.</li> <li>If the time was reached through the usual monotonic increase of the current playback position during normal playback, and there are <a href="#text-track-cue" title="text track cue">cues</a> in <var title="">other cues</var> that have both their <a href="#text-track-cue-active-flag">text track cue active flag</a> set and their <a href="#text-track-cue-pause-on-exit-flag">text track cue pause-on-exit flag</a> set, then immediately act as if the element's <code title="dom-media-pause"><a href="#dom-media-pause">pause()</a></code> method had been invoked.  (In the other cases, such as explicit seeks, playback is not paused by going past the end time of a <a href="#text-track-cue" title="text track cue">cue</a>, even if that <a href="#text-track-cue" title="text track cue">cue</a> has its <a href="#text-track-cue-pause-on-exit-flag">text track cue pause-on-exit flag</a> set.)</li> <li>Let <var title="">affected tracks</var> be a list of <a href="#text-track" title="text track">text tracks</a>, initially empty.</li> <li>For each <a href="#text-track-cue" title="text track cue">text track cue</a> in <var title="">other cues</var> that has its <a href="#text-track-cue-active-flag">text track cue active flag</a> set, in list order, <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-exit">exit</code> at the <code><a href="#texttrackcue">TextTrackCue</a></code> object, and add the <a href="#text-track-cue" title="text track cue">cue</a>'s <a href="#text-track">text track</a> to <var title="">affected tracks</var>, if it's not already in the list.</li> <li>For each <a href="#text-track-cue" title="text track cue">text track cue</a> in <var title="">current cues</var> that does not have its <a href="#text-track-cue-active-flag">text track cue active flag</a> set, in list order, <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-enter">enter</code> at the <code><a href="#texttrackcue">TextTrackCue</a></code> object, and add the <a href="#text-track-cue" title="text track cue">cue</a>'s <a href="#text-track">text track</a> to <var title="">affected tracks</var>, if it's not already in the list.</li> <li>For each <a href="#text-track">text track</a> in <var title="">affected tracks</var>, in the order they were added to the list (which will match the relative order of the <a href="#text-track" title="text track">text tracks</a> in the <a href="#media-element">media element</a>'s <a href="#list-of-text-tracks">list of text tracks</a>), <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-cuechange">cuechange</code> at the <code><a href="#texttrack">TextTrack</a></code> object, and, if the <a href="#text-track">text track</a> has a corresponding <code><a href="#the-track-element">track</a></code> element, to then <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-cuechange">cuechange</code> at the <code><a href="#the-track-element">track</a></code> element as well.</li> <li>Set the <a href="#text-track-cue-active-flag">text track cue active flag</a> of all the <a href="#text-track-cue" title="text track cue">cues</a> in the <var title="">current cues</var>, and unset the <a href="#text-track-cue-active-flag">text track cue active flag</a> of all the <a href="#text-track-cue" title="text track cue">cues</a> in the <var title="">other cues</var>.</li> <li>Run the <a href="#rules-for-updating-the-text-track-rendering">rules for updating the text track rendering</a> of each of the <a href="#text-track" title="text track">text tracks</a> in <var title="">affected tracks</var> that are <a href="#text-track-showing" title="text track showing">showing</a> or <a href="#text-track-showing-by-default" title="text track showing by default">showing by default</a>. </li>  </ol>For the purposes of the algorithm above, a <a href="#text-track-cue">text track cue</a> is considered to be part of a <a href="#text-track">text track</a> only if it is listed in the <a href="#text-track-list-of-cues">text track list of cues</a>, not merely if it is associated with the <a href="#text-track">text track</a>.  When a <a href="#media-element">media element</a> is <a href="infrastructure.html#remove-an-element-from-a-document" title="remove an element from a document">removed from a <code>Document</code></a>, if the <a href="#media-element">media element</a>'s <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> attribute has a value other than <code title="dom-media-NETWORK_EMPTY"><a href="#dom-media-network_empty">NETWORK_EMPTY</a></code> then the user agent must act as if the <code title="dom-media-pause"><a href="#dom-media-pause">pause()</a></code> method had been invoked. If the <a href="#media-element">media element</a>'s <code><a href="infrastructure.html#document">Document</a></code> stops being a <a href="browsers.html#fully-active">fully active</a> document, then the playback will <a href="#media-playback">stop</a> until the document is active again. </div><h5 id="seeking">4.8.10.9 Seeking</h5><dl class="domintro"><dt><var title="">media</var> . <code title="dom-media-seeking"><a href="#dom-media-seeking">seeking</a></code></dt> <dd> Returns true if the user agent is currently seeking. </dd> <dt><var title="">media</var> . <code title="dom-media-seekable"><a href="#dom-media-seekable">seekable</a></code></dt> <dd> Returns a <code><a href="#timeranges">TimeRanges</a></code> object that represents the ranges of the <a href="#media-resource">media resource</a> to which it is possible for the user agent to seek. </dd> </dl><div class="impl"> The <dfn id="dom-media-seeking" title="dom-media-seeking"><code>seeking</code></dfn> attribute must initially have the value false. When the user agent is required to <dfn id="dom-media-seek" title="dom-media-seek">seek</dfn> to a particular <var title="">new playback position</var> in the <a href="#media-resource">media resource</a>, it means that the user agent must run the following steps. This algorithm interacts closely with the <a href="webappapis.html#event-loop">event loop</a> mechanism; in particular, it has a <a href="webappapis.html#synchronous-section">synchronous section</a> (which is triggered as part of the <a href="webappapis.html#event-loop">event loop</a> algorithm). Steps in that section are marked with ⌛. <ol><li>If the <a href="#media-element">media element</a>'s <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> is <code title="dom-media-HAVE_NOTHING"><a href="#dom-media-have_nothing">HAVE_NOTHING</a></code>, then raise an <code><a href="common-dom-interfaces.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception (if the seek was in response to a DOM method call or setting of an IDL attribute), and abort these steps.</li> <li>If the element's <code title="dom-media-seeking"><a href="#dom-media-seeking">seeking</a></code> 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.</li> <li>Set the <code title="dom-media-seeking"><a href="#dom-media-seeking">seeking</a></code> IDL attribute to true.</li> <li>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.</li> <li>If the <var title="">new playback position</var> is later than the end of the <a href="#media-resource">media resource</a>, then let it be the end of the <a href="#media-resource">media resource</a> instead.</li> <li>If the <var title="">new playback position</var> is less than the <a href="#earliest-possible-position">earliest possible position</a>, let it be that position instead.</li> <li>If the (possibly now changed) <var title="">new playback position</var> is not in one of the ranges given in the <code title="dom-media-seekable"><a href="#dom-media-seekable">seekable</a></code> attribute, then let it be the position in one of the ranges given in the <code title="dom-media-seekable"><a href="#dom-media-seekable">seekable</a></code> attribute that is the nearest to the <var title="">new playback position</var>. If two positions both satisfy that constraint (i.e. the <var title="">new playback position</var> is exactly in the middle between two ranges in the <code title="dom-media-seekable"><a href="#dom-media-seekable">seekable</a></code> attribute) then use the position that is closest to the <a href="#current-playback-position">current playback position</a>. If there are no ranges given in the <code title="dom-media-seekable"><a href="#dom-media-seekable">seekable</a></code> attribute then set the <code title="dom-media-seeking"><a href="#dom-media-seeking">seeking</a></code> IDL attribute to false and abort these steps.</li> <li>Set the <a href="#current-playback-position">current playback position</a> to the given <var title="">new playback position</var>.</li> <li><a href="webappapis.html#queue-a-task">Queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-seeking"><a href="#event-media-seeking">seeking</a></code> at the element.</li> <li id="seekUpdate"><a href="webappapis.html#queue-a-task">Queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-timeupdate"><a href="#event-media-timeupdate">timeupdate</a></code> at the element.</li> <li>If the <a href="#media-element">media element</a> was <a href="#potentially-playing">potentially playing</a> immediately before it started seeking, but seeking caused its <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> attribute to change to a value lower than <code title="dom-media-HAVE_FUTURE_DATA"><a href="#dom-media-have_future_data">HAVE_FUTURE_DATA</a></code>, then <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-waiting"><a href="#event-media-waiting">waiting</a></code> at the element.</li> <li>Wait until the user agent has established whether or not the <a href="#media-data">media data</a> for the <var title="">new playback position</var> is available, and, if it is, until it has decoded enough data to play back that position.</li> <li><a href="webappapis.html#await-a-stable-state">Await a stable state</a>. The <a href="webappapis.html#synchronous-section">synchronous section</a> consists of all the remaining steps of this algorithm. (Steps in the <a href="webappapis.html#synchronous-section">synchronous section</a> are marked with ⌛.)</li> <li>⌛ Set the <code title="dom-media-seeking"><a href="#dom-media-seeking">seeking</a></code> IDL attribute to false.</li> <li>⌛ <a href="webappapis.html#queue-a-task">Queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-seeked"><a href="#event-media-seeked">seeked</a></code> at the element.</li> </ol>The <dfn id="dom-media-seekable" title="dom-media-seekable"><code>seekable</code></dfn> attribute must return a new static <a href="#normalized-timeranges-object">normalized <code>TimeRanges</code> object</a> that represents the ranges of the <a href="#media-resource">media resource</a>, 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 <a href="#media-resource">media resource</a>, 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 <a href="#earliest-possible-position">earliest possible position</a>, typically zero), and whose end is the same as the time of the first frame plus the <code title="dom-media-duration"><a href="#dom-media-duration">duration</a></code> 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. <a href="#media-resource" title="media resource">Media resources</a> might be internally scripted or interactive. Thus, a <a href="#media-element">media element</a> could play in a non-linear fashion. If this happens, the user agent must act as if the algorithm for <a href="#dom-media-seek" title="dom-media-seek">seeking</a> was used whenever the <a href="#current-playback-position">current playback position</a> changes in a discontinuous fashion (so that the relevant events fire). </div><h5 id="timed-text-tracks">4.8.10.10 Timed text tracks</h5><h6 id="text-track-model">4.8.10.10.1 Text track model</h6>A <a href="#media-element">media element</a> can have a group of associated <dfn id="text-track" title="text track">text tracks</dfn>, known as the <a href="#media-element">media element</a>'s <dfn id="list-of-text-tracks">list of text tracks</dfn>. The <a href="#text-track" title="text track">text tracks</a> are sorted as follows:<ol class="brief"><li>The <a href="#text-track" title="text track">text tracks</a> corresponding to <code><a href="#the-track-element">track</a></code> element children of the <a href="#media-element">media element</a>, in <a href="infrastructure.html#tree-order">tree order</a>.</li> <li>Any <a href="#text-track" title="text track">text tracks</a> added using the <code title="dom-media-addTrack"><a href="#dom-media-addtrack">addTrack()</a></code> method, in the order they were added, oldest first.</li> <li>Any <a href="#media-resource-specific-text-track" title="media-resource-specific text track">media-resource-specific text tracks</a> (<a href="#text-track" title="text track">text tracks</a> corresponding to data in the <a href="#media-resource">media resource</a>), in the order defined by the <a href="#media-resource">media resource</a>'s format specification.</li> </ol>A <a href="#text-track">text track</a> consists of:<dl><dt><dfn id="text-track-kind" title="text track kind">The kind of text track</dfn> </dt><dd> This decides how the track is handled by the user agent. The kind is represented by a string. The possible strings are: <ul class="brief"><li><dfn id="dom-texttrack-kind-subtitles" title="dom-TextTrack-kind-subtitles"><code>subtitles</code></dfn> </li><li><dfn id="dom-texttrack-kind-captions" title="dom-TextTrack-kind-captions"><code>captions</code></dfn> </li><li><dfn id="dom-texttrack-kind-descriptions" title="dom-TextTrack-kind-descriptions"><code>descriptions</code></dfn> </li><li><dfn id="dom-texttrack-kind-chapters" title="dom-TextTrack-kind-chapters"><code>chapters</code></dfn> </li><li><dfn id="dom-texttrack-kind-metadata" title="dom-TextTrack-kind-metadata"><code>metadata</code></dfn> </li></ul>The <a href="#text-track-kind" title="text track kind">kind of track</a> can change dynamically, in the case of a <a href="#text-track">text track</a> corresponding to a <code><a href="#the-track-element">track</a></code> element. </dd> <dt><dfn id="text-track-label" title="text track label">A label</dfn> </dt><dd> This is a human-readable string intended to identify the track for the user. In certain cases, the label might be generated automatically. The <a href="#text-track-label" title="text track label">label of a track</a> can change dynamically, in the case of a <a href="#text-track">text track</a> corresponding to a <code><a href="#the-track-element">track</a></code> element or in the case of an automatically-generated label whose value depends on variable factors such as the user's preferred user interface language. </dd> <dt><dfn id="text-track-language" title="text track language">A language</dfn> </dt><dd> This is a string (a BCP 47 language tag) representing the language of the text track's cues. <a href="references.html#refsBCP47">[BCP47]</a> The <a href="#text-track-language" title="text track language">language of a text track</a> can change dynamically, in the case of a <a href="#text-track">text track</a> corresponding to a <code><a href="#the-track-element">track</a></code> element. </dd> <dt><dfn id="text-track-readiness-state" title="text track readiness state">A readiness state</dfn> </dt><dd> One of the following: <dl><dt><dfn id="text-track-not-loaded" title="text track not loaded">Not loaded</dfn> </dt><dd> Indicates that the text track is known to exist (e.g. it has been declared with a <code><a href="#the-track-element">track</a></code> element), but its cues have not been obtained. </dd> <dt><dfn id="text-track-loading" title="text track loading">Loading</dfn> </dt><dd> Indicates that the text track is loading and there have been no fatal errors encountered so far. Further cues might still be added to the track. </dd> <dt><dfn id="text-track-loaded" title="text track loaded">Loaded</dfn> </dt><dd> Indicates that the text track has been loaded with no fatal errors. No new cues will be added to the track except if the <a href="#text-track">text track</a> corresponds to a <code><a href="#mutabletexttrack">MutableTextTrack</a></code> object. </dd> <dt><dfn id="text-track-failed-to-load" title="text track failed to load">Failed to load</dfn> </dt><dd> Indicates that the text track was enabled, but when the user agent attempted to obtain it, this failed in some way (e.g. <a href="urls.html#url">URL</a> could not be <a href="urls.html#resolve-a-url" title="resolve a url">resolved</a>, network error, unknown text track format). Some or all of the cues are likely missing and will not be obtained. </dd> </dl>The <a href="#text-track-readiness-state" title="text track readiness state">readiness state</a> of a <a href="#text-track">text track</a> changes dynamically as the track is obtained. </dd> <dt><dfn id="text-track-mode" title="text track mode">A mode</dfn> </dt><dd> One of the following: <dl><dt><dfn id="text-track-disabled" title="text track disabled">Disabled</dfn> </dt><dd> Indicates that the text track is not active. Other than for the purposes of exposing the track in the DOM, the user agent is ignoring the text track. No cues are active, no events are fired, and the user agent will not attempt to obtain the track's cues. </dd> <dt><dfn id="text-track-hidden" title="text track hidden">Hidden</dfn> </dt><dd> Indicates that the text track is active, but that the user agent is not actively displaying the cues. If no attempt has yet been made to obtain the track's cues, the user agent will perform such an attempt momentarily. The user agent is maintaining a list of which cues are active, and events are being fired accordingly. </dd> <dt><dfn id="text-track-showing" title="text track showing">Showing</dfn> <dt><dfn id="text-track-showing-by-default" title="text track showing by default">Showing by default</dfn> </dt></dt><dd> Indicates that the text track is active. If no attempt has yet been made to obtain the track's cues, the user agent will perform such an attempt momentarily. The user agent is maintaining a list of which cues are active, and events are being fired accordingly. In addition, for text tracks whose <a href="#text-track-kind" title="text track kind">kind</a> is <code title="dom-mediatrack-kind-subtitles">subtitles</code> or <code title="dom-mediatrack-kind-captions">captions</code>, the cues are being displayed over the video as appropriate; for text tracks whose <a href="#text-track-kind" title="text track kind">kind</a> is <code title="dom-mediatrack-kind-descriptions">descriptions</code>, the user agent is making the cues available to the user in a non-visual fashion; and for text tracks whose <a href="#text-track-kind" title="text track kind">kind</a> is <code title="dom-mediatrack-kind-chapters">chapters</code>, the user agent is making available to the user a mechanism by which the user can navigate to any point in the <a href="#media-resource">media resource</a> by selecting a cue. The <a href="#text-track-showing-by-default" title="text track showing by default">showing by default</a> state is used in conjunction with the <code title="attr-track-default"><a href="#attr-track-default">default</a></code> attribute on <code><a href="#the-track-element">track</a></code> elements to indicate that the text track was enabled due to that attribute. This allows the user agent to override the state if a later track is discovered that is more appropriate per the user's preferences. </dd> </dl></dd> <dt><dfn id="text-track-list-of-cues" title="text track list of cues">A list of zero or more cues</dfn> </dt><dd> A list of <a href="#text-track-cue" title="text track cue">text track cues</a>, along with <dfn id="rules-for-updating-the-text-track-rendering">rules for updating the text track rendering</dfn>. The <a href="#text-track-list-of-cues" title="text track list of cues">list of cues of a text track</a> can change dynamically, either because the <a href="#text-track">text track</a> has <a href="#text-track-not-loaded" title="text track not loaded">not yet been loaded</a> or is still <a href="#text-track-loading" title="text track loading">loading</a>, or because the <a href="#text-track">text track</a> corresponds to a <code><a href="#mutabletexttrack">MutableTextTrack</a></code> object, whose API allows individual cues can be added or removed dynamically. </dd> </dl>Each <a href="#text-track">text track</a> has a corresponding <code><a href="#texttrack">TextTrack</a></code> object.The <a href="#text-track" title="text track">text tracks</a> of a <a href="#media-element">media element</a> are <dfn id="the-text-tracks-are-ready" title="the text tracks are ready">ready</dfn> if all the <a href="#text-track" title="text track">text tracks</a> whose <a href="#text-track-mode" title="text track mode">mode</a> was not in the <a href="#text-track-disabled" title="text track disabled">disabled</a> state when the element's <a href="#concept-media-load-algorithm" title="concept-media-load-algorithm">resource selection algorithm</a> last started now have a <a href="#text-track-readiness-state">text track readiness state</a> of <a href="#text-track-loaded" title="text track loaded">loaded</a> or <a href="#text-track-failed-to-load" title="text track failed to load">failed to load</a>.<hr>A <dfn id="text-track-cue">text track cue</dfn> is the unit of time-sensitive data in a <a href="#text-track">text track</a>, corresponding for instance for subtitles and captions to the text that appears at a particular time and disappears at another time.Each <a href="#text-track-cue">text track cue</a> consists of:<dl><dt><dfn id="text-track-cue-identifier" title="text track cue identifier">An identifier</dfn> </dt><dd> An arbitrary string. </dd> <dt><dfn id="text-track-cue-start-time" title="text track cue start time">A start time</dfn> </dt><dd> A time, in seconds and fractions of a second, at which the cue becomes relevant. </dd> <dt><dfn id="text-track-cue-end-time" title="text track cue end time">An end time</dfn> </dt><dd> A time, in seconds and fractions of a second, at which the cue stops being relevant. </dd> <dt><dfn id="text-track-cue-pause-on-exit-flag" title="text track cue pause-on-exit flag">A pause-on-exit flag</dfn> </dt><dd> A boolean indicating whether playback of the <a href="#media-resource">media resource</a> is to pause when the cue stops being relevant. </dd> <dt><dfn id="text-track-cue-writing-direction" title="text track cue writing direction">A writing direction</dfn> </dt><dd> A writing direction, either <dfn id="text-track-cue-horizontal-writing-direction" title="text track cue horizontal writing direction">horizontal</dfn> (a line extends horizontally and is positioned vertically, with consecutive lines displayed below each other), <dfn id="text-track-cue-vertical-growing-left-writing-direction" title="text track cue vertical growing left writing direction">vertical growing left</dfn> (a line extends vertically and is positioned horizontally, with consecutive lines displayed to the left of each other), or <dfn id="text-track-cue-vertical-growing-right-writing-direction" title="text track cue vertical growing right writing direction">vertical growing right</dfn> (a line extends vertically and is positioned horizontally, with consecutive lines displayed to the right of each other). </dd> <dt><dfn id="text-track-cue-size" title="text track cue size">A size</dfn> </dt><dd> A number giving the size of the box within which the text of each line of the cue is to be aligned, to be interpreted as a percentage of the video, as defined by the <a href="#text-track-cue-writing-direction" title="text track cue writing direction">writing direction</a>. </dd> <dt><dfn id="text-track-cue-text" title="text track cue text">The text of the cue</dfn> </dt><dd> The raw text of the cue, and rules for its interpretation, allowing the text to be rendered and converted to a DOM fragment. </dd> </dl>A <a href="#text-track-cue">text track cue</a> is immutable.Each <a href="#text-track-cue">text track cue</a> has a corresponding <code><a href="#texttrackcue">TextTrackCue</a></code> object, and can be associated with a particular <a href="#text-track">text track</a>. Once a <a href="#text-track-cue">text track cue</a> is associated with a particular <a href="#text-track">text track</a>, the association is permanent.In addition, each <a href="#text-track-cue">text track cue</a> has two pieces of dynamic information:<dl><dt>The <dfn id="text-track-cue-active-flag" title="text track cue active flag">active flag</dfn> </dt><dd> This flag must be initially unset. The flag is used to ensure events are fired appropriately when the cue becomes active or inactive, and to make sure the right cues are rendered. The user agent must synchronously unset this flag whenever the <a href="#text-track-cue">text track cue</a> is removed from its <a href="#text-track">text track</a>'s <a href="#text-track-list-of-cues">text track list of cues</a>; whenever the <a href="#text-track">text track</a> itself is removed from its <a href="#media-element">media element</a>'s <a href="#list-of-text-tracks">list of text tracks</a> or has its <a href="#text-track-mode">text track mode</a> changed to <a href="#text-track-disabled" title="text track disabled">disabled</a>; and whenever the <a href="#media-element">media element</a>'s <code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> is changed back to <code title="dom-media-HAVE_NOTHING"><a href="#dom-media-have_nothing">HAVE_NOTHING</a></code>. When the flag is unset in this way for one or more cues in <a href="#text-track" title="text track">text tracks</a> that were <a href="#text-track-showing" title="text track showing">showing</a> or <a href="#text-track-showing-by-default" title="text track showing by default">showing by default</a> prior to the relevant incident, the user agent must, after having unset the flag for all the affected cues, apply the <a href="#rules-for-updating-the-text-track-rendering">rules for updating the text track rendering</a> of those <a href="#text-track" title="text track">text tracks</a>. </dd> <dt>The <dfn id="text-track-cue-display-state" title="text track cue display state">display state</dfn> </dt><dd> This is used as part of the rendering model, to keep cues in a consistent position. It must initially be empty. Whenever the <a href="#text-track-cue-active-flag">text track cue active flag</a> is unset, the user agent must empty the <a href="#text-track-cue-display-state">text track cue display state</a>. </dd> </dl>The <a href="#text-track-cue" title="text track cue">text track cues</a> of a <a href="#media-element">media element</a>'s <a href="#text-track" title="text track">text tracks</a> are ordered relative to each other in the <dfn id="text-track-cue-order">text track cue order</dfn>, which is determined as follows: first group the <a href="#text-track-cue" title="text track cue">cues</a> by their <a href="#text-track">text track</a>, with the groups being sorted in the same order as their <a href="#text-track" title="text track">text tracks</a> appear in the <a href="#media-element">media element</a>'s <a href="#list-of-text-tracks">list of text tracks</a>; then, within each group, <a href="#text-track-cue" title="text track cue">cues</a> must be sorted by their <a href="#text-track-cue-start-time" title="text track cue start time">start time</a>, earliest first; then, any <a href="#text-track-cue" title="text track cue">cues</a> with the same <a href="#text-track-cue-start-time" title="text track cue start time">start time</a> must be sorted by their <a href="#text-track-cue-end-time" title="text track cue end time">end time</a>, earliest first; and finally, any <a href="#text-track-cue" title="text track cue">cues</a> with identical <a href="#text-track-cue-end-time" title="text track cue end time">end times</a> must be sorted in the order they were created (so e.g. for cues from a WebVTT file, that would be the order in which the cues were listed in the file).<h6 id="sourcing-in-band-text-tracks">4.8.10.10.2 Sourcing in-band text tracks</h6>A <dfn id="media-resource-specific-text-track">media-resource-specific text track</dfn> is a <a href="#text-track">text track</a> that corresponds to data found in the <a href="#media-resource">media resource</a>.<div class="impl"> Rules for processing and rendering such data are defined by the relevant specifications, e.g. the specification of the video format if the <a href="#media-resource">media resource</a> is a video. When a <a href="#media-resource">media resource</a> contains data that the user agent recognises and supports as being equivalent to a <a href="#text-track">text track</a>, the user agent <a href="#found-a-media-resource-specific-timed-track">runs</a> the <dfn id="steps-to-expose-a-media-resource-specific-text-track">steps to expose a media-resource-specific text track</dfn> with the relevant data, as follows: <ol><li>Associate the relevant data with a new <a href="#text-track">text track</a> and its corresponding new <code><a href="#texttrack">TextTrack</a></code> object. The <a href="#text-track">text track</a> is a <a href="#media-resource-specific-text-track">media-resource-specific text track</a>.</li> <li>Set the new <a href="#text-track">text track</a>'s <a href="#text-track-kind" title="text track kind">kind</a>, <a href="#text-track-label" title="text track label">label</a>, and <a href="#text-track-language" title="text track language">language</a> based on the semantics of the relevant data, as defined by the relevant specification.</li> <li>Populate the new <a href="#text-track">text track</a>'s <a href="#text-track-list-of-cues" title="text track list of cues">list of cues</a> with the cues parsed so far, folllowing the guidelines for exposing cues, and begin updating it dynamically as necessary.</li> <li> Set the new <a href="#text-track">text track</a>'s <a href="#text-track-readiness-state" title="text track readiness state">readiness state</a> to the value that most correctly describes the current state, and begin updating it dynamically as necessary. For example, if the relevant data in the <a href="#media-resource">media resource</a> has been fully parsed and completely describes the cues, then the <a href="#text-track">text track</a> would be <a href="#text-track-loaded" title="text track loaded">loaded</a>. On the other hand, if the data for the cues is interleaved with the <a href="#media-data">media data</a>, and the <a href="#media-resource">media resource</a> as a whole is still being downloaded, then the <a href="#text-track-loading" title="text track loading">loading</a> state might be more accurate. </li> <li>Set the new <a href="#text-track">text track</a>'s <a href="#text-track-mode" title="text track mode">mode</a> to the mode consistent with the user's preferences and the requirements of the relevant specification for the data.</li> <li>Leave the <a href="#text-track-list-of-cues">text track list of cues</a> empty, and associate with it the <a href="#rules-for-updating-the-text-track-rendering">rules for updating the text track rendering</a> appropriate for the format in question. </li><li>Add the new <a href="#text-track">text track</a> to the <a href="#media-element">media element</a>'s <a href="#list-of-text-tracks">list of text tracks</a>.</li> </ol>When a <a href="#media-element">media element</a> is to <dfn id="forget-the-media-element-s-media-resource-specific-text-tracks">forget the media element's media-resource-specific text tracks</dfn>, the user agent must remove from the <a href="#media-element">media element</a>'s <a href="#list-of-text-tracks">list of text tracks</a> all the <a href="#media-resource-specific-text-track" title="media-resource-specific text track">media-resource-specific text tracks</a>. </div><div class="impl"> <h6 id="sourcing-out-of-band-text-tracks">4.8.10.10.3 Sourcing out-of-band text tracks</h6> When a <code><a href="#the-track-element">track</a></code> element is created, it must be associated with a new <a href="#text-track">text track</a> (with its value set as defined below) and its corresponding new <code><a href="#texttrack">TextTrack</a></code> object. The <a href="#text-track-kind">text track kind</a> is determined from the state of the element's <code title="attr-track-kind"><a href="#attr-track-kind">kind</a></code> attribute according to the following table; for a state given in a cell of the first column, the <a href="#text-track-kind" title="text track kind">kind</a> is the string given in the second column: <table><thead><tr><th>State </th><th>String </th></tr></thead><tbody><tr><td><a href="#attr-track-kind-subtitles" title="attr-track-kind-subtitles">Subtitles</a> </td><td><code title="dom-timedtrack-kind-subtitles">subtitles</code> </td></tr><tr><td><a href="#attr-track-kind-captions" title="attr-track-kind-captions">Captions</a> </td><td><code title="dom-timedtrack-kind-captions">captions</code> </td></tr><tr><td><a href="#attr-track-kind-descriptions" title="attr-track-kind-descriptions">Descriptions</a> </td><td><code title="dom-timedtrack-kind-descriptions">descriptions</code> </td></tr><tr><td><a href="#attr-track-kind-chapters" title="attr-track-kind-chapters">Chapters</a> </td><td><code title="dom-timedtrack-kind-chapters">chapters</code> </td></tr><tr><td><a href="#attr-track-kind-metadata" title="attr-track-kind-metadata">Metadata</a> </td><td><code title="dom-timedtrack-kind-metadata">metadata</code> </td></tr></tbody></table>The <a href="#text-track-label">text track label</a> is the element's <a href="#track-label">track label</a>. The <a href="#text-track-language">text track language</a> is the element's <a href="#track-language">track language</a>, if any, or the empty string otherwise. As the <code title="attr-track-kind"><a href="#attr-track-kind">kind</a></code>, <code title="attr-track-label"><a href="#attr-track-label">label</a></code>, and <code title="attr-track-srclang"><a href="#attr-track-srclang">srclang</a></code> attributes are added, removed, or changed, the <a href="#text-track">text track</a> must update accordingly, as per the definitions above. Changes to the <a href="#track-url">track URL</a> are handled in the algorithm below. The <a href="#text-track-list-of-cues">text track list of cues</a> is initially empty. It is dynamically modified when the referenced file is parsed. Associated with the list are the <a href="#rules-for-updating-the-text-track-rendering">rules for updating the text track rendering</a> appropriate for the format in question; for WebVTT, this is the <a href="rendering.html#rules-for-updating-the-display-of-webvtt-text-tracks">rules for updating the display of WebVTT text tracks</a>. When a <code><a href="#the-track-element">track</a></code> element's parent element changes and the new parent is a <a href="#media-element">media element</a>, then the user agent must add the <code><a href="#the-track-element">track</a></code> element's corresponding <a href="#text-track">text track</a> to the <a href="#media-element">media element</a>'s <a href="#list-of-text-tracks">list of text tracks</a>. When a <code><a href="#the-track-element">track</a></code> element's parent element changes and the old parent was a <a href="#media-element">media element</a>, then the user agent must remove the <code><a href="#the-track-element">track</a></code> element's corresponding <a href="#text-track">text track</a> from the <a href="#media-element">media element</a>'s <a href="#list-of-text-tracks">list of text tracks</a>. When a <a href="#text-track">text track</a> corresponding to a <code><a href="#the-track-element">track</a></code> element is added to a <a href="#media-element">media element</a>'s <a href="#list-of-text-tracks">list of text tracks</a>, the user agent must set the <a href="#text-track-mode">text track mode</a> appropriately, as determined by the following conditions: <dl class="switch"><dt>If the <a href="#text-track-kind">text track kind</a> is <code title="dom-TextTrack-kind-subtitles"><a href="#dom-texttrack-kind-subtitles">subtitles</a></code> or <code title="dom-TextTrack-kind-captions"><a href="#dom-texttrack-kind-captions">captions</a></code> and the user has indicated an interest in having a track with this <a href="#text-track-kind">text track kind</a>, <a href="#text-track-language">text track language</a>, and <a href="#text-track-label">text track label</a> enabled, and there is no other <a href="#text-track">text track</a> in the <a href="#media-element">media element</a>'s <a href="#list-of-text-tracks">list of text tracks</a> with a <a href="#text-track-kind">text track kind</a> of either <code title="dom-TextTrack-kind-subtitles"><a href="#dom-texttrack-kind-subtitles">subtitles</a></code> or <code title="dom-TextTrack-kind-captions"><a href="#dom-texttrack-kind-captions">captions</a></code> whose <a href="#text-track-mode">text track mode</a> is <a href="#text-track-showing" title="text track showing">showing</a></dt> <dt>If the <a href="#text-track-kind">text track kind</a> is <code title="dom-TextTrack-kind-descriptions"><a href="#dom-texttrack-kind-descriptions">descriptions</a></code> and the user has indicated an interest in having text descriptions with this <a href="#text-track-language">text track language</a> and <a href="#text-track-label">text track label</a> enabled, and there is no other <a href="#text-track">text track</a> in the <a href="#media-element">media element</a>'s <a href="#list-of-text-tracks">list of text tracks</a> with a <a href="#text-track-kind">text track kind</a> of <code title="dom-TextTrack-kind-descriptions"><a href="#dom-texttrack-kind-descriptions">descriptions</a></code> whose <a href="#text-track-mode">text track mode</a> is <a href="#text-track-showing" title="text track showing">showing</a></dt> <dt>If the <a href="#text-track-kind">text track kind</a> is <code title="dom-TextTrack-kind-chapters"><a href="#dom-texttrack-kind-chapters">chapters</a></code> and the <a href="#text-track-language">text track language</a> is one that the user agent has reason to believe is appropriate for the user, and there is no other <a href="#text-track">text track</a> in the <a href="#media-element">media element</a>'s <a href="#list-of-text-tracks">list of text tracks</a> with a <a href="#text-track-kind">text track kind</a> of <code title="dom-TextTrack-kind-chapters"><a href="#dom-texttrack-kind-chapters">chapters</a></code> whose <a href="#text-track-mode">text track mode</a> is <a href="#text-track-showing" title="text track showing">showing</a></dt> <dd> Let the <a href="#text-track-mode">text track mode</a> be <a href="#text-track-showing" title="text track showing">showing</a>. If there is a <a href="#text-track">text track</a> in the <a href="#media-element">media element</a>'s <a href="#list-of-text-tracks">list of text tracks</a> whose <a href="#text-track-mode">text track mode</a> is <a href="#text-track-showing-by-default" title="text track showing by default">showing by default</a>, the user agent must furthermore change that <a href="#text-track">text track</a>'s <a href="#text-track-mode">text track mode</a> to <a href="#text-track-hidden" title="text track hidden">hidden</a>.  </dd> <dt>If the <code><a href="#the-track-element">track</a></code> element has a <code title="attr-track-default"><a href="#attr-track-default">default</a></code> attribute specified, and there is no other <a href="#text-track">text track</a> in the <a href="#media-element">media element</a>'s <a href="#list-of-text-tracks">list of text tracks</a> whose <a href="#text-track-mode">text track mode</a> is <a href="#text-track-showing" title="text track showing">showing</a> or <a href="#text-track-showing-by-default" title="text track showing by default">showing by default</a></dt> <dd> Let the <a href="#text-track-mode">text track mode</a> be <a href="#text-track-showing-by-default" title="text track showing by default">showing by default</a>. </dd> <dt>Otherwise</dt> <dd> Let the <a href="#text-track-mode">text track mode</a> be <a href="#text-track-disabled" title="text track disabled">disabled</a>. </dd> </dl>When a <a href="#text-track">text track</a> corresponding to a <code><a href="#the-track-element">track</a></code> element is created with <a href="#text-track-mode">text track mode</a> set to <a href="#text-track-hidden" title="text track hidden">hidden</a>, <a href="#text-track-showing" title="text track showing">showing</a>, or <a href="#text-track-showing-by-default" title="text track showing by default">showing by default</a>, and when a <a href="#text-track">text track</a> corresponding to a <code><a href="#the-track-element">track</a></code> element is created with <a href="#text-track-mode">text track mode</a> set to <a href="#text-track-disabled" title="text track disabled">disabled</a> and subsequently changes its <a href="#text-track-mode">text track mode</a> to <a href="#text-track-hidden" title="text track hidden">hidden</a>, <a href="#text-track-showing" title="text track showing">showing</a>, or <a href="#text-track-showing-by-default" title="text track showing by default">showing by default</a> for the first time, the user agent must immediately and synchronously run the following algorithm. This algorithm interacts closely with the <a href="webappapis.html#event-loop">event loop</a> mechanism; in particular, it has a <a href="webappapis.html#synchronous-section">synchronous section</a> (which is triggered as part of the <a href="webappapis.html#event-loop">event loop</a> algorithm). The step in that section is marked with ⌛. <ol><li>Set the <a href="#text-track-readiness-state">text track readiness state</a> to <a href="#text-track-loading" title="text track loading">loading</a>.</li> <li>Let <var title="">URL</var> be the <a href="#track-url">track URL</a> of the <code><a href="#the-track-element">track</a></code> element.</li> <li>Asynchronously run the remaining steps, while continuing with whatever task was responsible for creating the <a href="#text-track">text track</a> or changing the <a href="#text-track-mode">text track mode</a>.</li> <li> Download: If <var title="">URL</var> is not the empty string, and its <a href="origin-0.html#origin">origin</a> is the same as the <a href="#media-element">media element</a>'s <code><a href="infrastructure.html#document">Document</a></code>'s <a href="origin-0.html#origin">origin</a>, then <a href="fetching-resources.html#fetch">fetch</a> <var title="">URL</var>, from the <a href="#media-element">media element</a>'s <code><a href="infrastructure.html#document">Document</a></code>'s <a href="origin-0.html#origin">origin</a>, with the force same-origin flag set.  The <a href="webappapis.html#concept-task" title="concept-task">tasks</a> <a href="webappapis.html#queue-a-task" title="queue a task">queued</a> by the <a href="fetching-resources.html#fetch" title="fetch">fetching algorithm</a> on the <a href="webappapis.html#networking-task-source">networking task source</a> to process the data as it is being fetched must examine the resource's <a href="fetching-resources.html#content-type" title="Content-Type">Content Type metadata</a>, once it is available, if it ever is. If no <a href="fetching-resources.html#content-type" title="Content-Type">Content Type metadata</a> is ever available, or if the type is not recognised as a text track format, then the resource's format must be assumed to be unsupported (this causes the load to fail, as described below). If a type is obtained, and represents a supported text track format, then the resource's data must be passed to the appropriate parser as it is received, with the <a href="#text-track-list-of-cues">text track list of cues</a> being used for that parser's output. If the <a href="fetching-resources.html#fetch" title="fetch">fetching algorithm</a> fails for any reason (network error, the server returns an error code, a cross-origin check fails, etc), or if <var title="">URL</var> is the empty string or has the wrong <a href="origin-0.html#origin">origin</a> as determined by the condition at the start of this step, or if the fetched resource is not in a supported format, then <a href="webappapis.html#queue-a-task">queue a task</a> to first change the <a href="#text-track-readiness-state">text track readiness state</a> to <a href="#text-track-failed-to-load" title="text track failed to load">failed to load</a> and then <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-error">error</code> at the <code><a href="#the-track-element">track</a></code> element; and then, once that <a href="webappapis.html#concept-task" title="concept-task">task</a> is <a href="webappapis.html#queue-a-task" title="queue a task">queued</a>, move on to the step below labeled monitoring. If the <a href="fetching-resources.html#fetch" title="fetch">fetching algorithm</a> does not fail, then, when it completes, <a href="webappapis.html#queue-a-task">queue a task</a> to first change the <a href="#text-track-readiness-state">text track readiness state</a> to <a href="#text-track-loaded" title="text track loaded">loaded</a> and then <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-load">load</code> at the <code><a href="#the-track-element">track</a></code> element; and then, once that <a href="webappapis.html#concept-task" title="concept-task">task</a> is <a href="webappapis.html#queue-a-task" title="queue a task">queued</a>, move on to the step below labeled monitoring. If, while the <a href="fetching-resources.html#fetch" title="fetch">fetching algorithm</a> is active, either: <ul><li>the <a href="#track-url">track URL</a> changes so that it is no longer equal to <var title="">URL</var>, while the <a href="#text-track-mode">text track mode</a> is set to <a href="#text-track-hidden" title="text track hidden">hidden</a>, <a href="#text-track-showing" title="text track showing">showing</a>, or <a href="#text-track-showing-by-default" title="text track showing by default">showing by default</a>; or</li> <li>the <a href="#text-track-mode">text track mode</a> changes to <a href="#text-track-hidden" title="text track hidden">hidden</a>, <a href="#text-track-showing" title="text track showing">showing</a>, or <a href="#text-track-showing-by-default" title="text track showing by default">showing by default</a>, while the <a href="#track-url">track URL</a> is not equal to <var title="">URL</var></li> </ul>...then the user agent must run the following steps: <ol><li>Abort the <a href="fetching-resources.html#fetch" title="fetch">fetching algorithm</a>.</li> <li><a href="webappapis.html#queue-a-task">Queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-abort">abort</code> at the <code><a href="#the-track-element">track</a></code> element.</li> <li>Let <var title="">URL</var> be the new <a href="#track-url">track URL</a>.</li> <li>Jump back to the top of the step labeled download.</li> </ol>Until one of the above circumstances occurs, the user agent must remain on this step. </li> <li>Monitoring: Wait until the <a href="#track-url">track URL</a> is no longer equal to <var title="">URL</var>, at the same time as the <a href="#text-track-mode">text track mode</a> is set to <a href="#text-track-hidden" title="text track hidden">hidden</a>, <a href="#text-track-showing" title="text track showing">showing</a>, or <a href="#text-track-showing-by-default" title="text track showing by default">showing by default</a>.</li> <li>Wait until the <a href="#text-track-readiness-state">text track readiness state</a> is no longer set to <a href="#text-track-loading" title="text track loading">loading</a>.</li> <li><a href="webappapis.html#await-a-stable-state">Await a stable state</a>. The <a href="webappapis.html#synchronous-section">synchronous section</a> consists of the following step. (The step in the <a href="webappapis.html#synchronous-section">synchronous section</a> is marked with ⌛.)</li> <li>⌛ Set the <a href="#text-track-readiness-state">text track readiness state</a> to <a href="#text-track-loading" title="text track loading">loading</a>.</li>  <li>End the <a href="webappapis.html#synchronous-section">synchronous section</a>, continuing the remaining steps asynchronously.</li> <li>Jump to the step labeled download.</li> </ol></div><h6 id="text-track-api">4.8.10.10.4 Text track API</h6><dl class="domintro"><dt><var title="">media</var> . <code title="dom-media-tracks"><a href="#dom-media-tracks">tracks</a></code> . <code title="">length</code></dt> <dd> Returns the number of <a href="#text-track" title="text track">text tracks</a> associated with the <a href="#media-element">media element</a> (e.g. from <code><a href="#the-track-element">track</a></code> elements). This is the number of <a href="#text-track" title="text track">text tracks</a> in the <a href="#media-element">media element</a>'s <a href="#list-of-text-tracks">list of text tracks</a>. </dd> <dt><var title="">media</var> . <code title="dom-media-tracks"><a href="#dom-media-tracks">tracks[</a></code> <var title="">n</var> <code title="">]</code></dt> <dd> Returns the <code><a href="#texttrack">TextTrack</a></code> object representing the <var title="">n</var>th <a href="#text-track">text track</a> in the <a href="#media-element">media element</a>'s <a href="#list-of-text-tracks">list of text tracks</a>. </dd> <dt><var title="">track</var> . <code title="dom-track-track"><a href="#dom-track-track">track</a></code></dt> <dd> Returns the <code><a href="#texttrack">TextTrack</a></code> object representing the <code><a href="#the-track-element">track</a></code> element's <a href="#text-track">text track</a>. </dd> </dl><div class="impl"> The <dfn id="dom-media-tracks" title="dom-media-tracks"><code>tracks</code></dfn> attribute of <a href="#media-element" title="media element">media elements</a> must return an array host object for objects of type <code><a href="#texttrack">TextTrack</a></code> that is fixed length and read only. The same object must be returned each time the attribute is accessed. <a href="references.html#refsWEBIDL">[WEBIDL]</a> The array must contain the <code><a href="#texttrack">TextTrack</a></code> objects of the <a href="#text-track" title="text track">text tracks</a> in the <a href="#media-element">media element</a>'s <a href="#list-of-text-tracks">list of text tracks</a>, in the same order as in the <a href="#list-of-text-tracks">list of text tracks</a>. </div><hr><pre class="idl">interface <dfn id="texttrack">TextTrack</dfn> { readonly attribute DOMString <a href="#dom-texttrack-kind" title="dom-TextTrack-kind">kind</a>; readonly attribute DOMString <a href="#dom-texttrack-label" title="dom-TextTrack-label">label</a>; readonly attribute DOMString <a href="#dom-texttrack-language" title="dom-TextTrack-language">language</a>; const unsigned short <a href="#dom-texttrack-none" title="dom-TextTrack-NONE">NONE</a> = 0; const unsigned short <a href="#dom-texttrack-loading" title="dom-TextTrack-LOADING">LOADING</a> = 1; const unsigned short <a href="#dom-texttrack-loaded" title="dom-TextTrack-LOADED">LOADED</a> = 2; const unsigned short <a href="#dom-texttrack-error" title="dom-TextTrack-ERROR">ERROR</a> = 3; readonly attribute unsigned short <a href="#dom-texttrack-readystate" title="dom-TextTrack-readyState">readyState</a>; readonly attribute <a href="webappapis.html#function">Function</a> <a href="#handler-texttrack-onload" title="handler-TextTrack-onload">onload</a>; readonly attribute <a href="webappapis.html#function">Function</a> <a href="#handler-texttrack-onerror" title="handler-TextTrack-onerror">onerror</a>; const unsigned short <a href="#dom-texttrack-off" title="dom-TextTrack-OFF">OFF</a> = 0; const unsigned short <a href="#dom-texttrack-hidden" title="dom-TextTrack-HIDDEN">HIDDEN</a> = 1; const unsigned short <a href="#dom-texttrack-showing" title="dom-TextTrack-SHOWING">SHOWING</a> = 2; attribute unsigned short <a href="#dom-texttrack-mode" title="dom-TextTrack-mode">mode</a>; readonly attribute <a href="#texttrackcuelist">TextTrackCueList</a> <a href="#dom-texttrack-cues" title="dom-TextTrack-cues">cues</a>; readonly attribute <a href="#texttrackcuelist">TextTrackCueList</a> <a href="#dom-texttrack-activecues" title="dom-TextTrack-activeCues">activeCues</a>; readonly attribute <a href="webappapis.html#function">Function</a> <a href="#handler-texttrack-oncuechange" title="handler-TextTrack-oncuechange">oncuechange</a>; };</pre><dl class="domintro"><dt><var title="">timedTrack</var> . <code title="dom-TextTrack-kind"><a href="#dom-texttrack-kind">kind</a></code></dt> <dd> Returns the <a href="#text-track-kind">text track kind</a> string. </dd> <dt><var title="">timedTrack</var> . <code title="dom-TextTrack-label"><a href="#dom-texttrack-label">label</a></code></dt> <dd> Returns the <a href="#text-track-label">text track label</a>. </dd> <dt><var title="">timedTrack</var> . <code title="dom-TextTrack-language"><a href="#dom-texttrack-language">language</a></code></dt> <dd> Returns the <a href="#text-track-language">text track language</a> string. </dd> <dt><var title="">timedTrack</var> . <code title="dom-TextTrack-readyState"><a href="#dom-texttrack-readystate">readyState</a></code></dt> <dd> Returns the <a href="#text-track-readiness-state">text track readiness state</a>, represented by a number from the following list: <dl><dt><code><a href="#texttrack">TextTrack</a></code> . <code title="dom-TextTrack-NONE"><a href="#dom-texttrack-none">NONE</a></code> (0)</dt> <dd> The <a href="#text-track-not-loaded">text track not loaded</a> state. </dd> <dt><code><a href="#texttrack">TextTrack</a></code> . <code title="dom-TextTrack-LOADING"><a href="#dom-texttrack-loading">LOADING</a></code> (1)</dt> <dd> The <a href="#text-track-loading">text track loading</a> state. </dd> <dt><code><a href="#texttrack">TextTrack</a></code> . <code title="dom-TextTrack-LOADED"><a href="#dom-texttrack-loaded">LOADED</a></code> (2)</dt> <dd> The <a href="#text-track-loaded">text track loaded</a> state. </dd> <dt><code><a href="#texttrack">TextTrack</a></code> . <code title="dom-TextTrack-ERROR"><a href="#dom-texttrack-error">ERROR</a></code> (3)</dt> <dd> The <a href="#text-track-failed-to-load">text track failed to load</a> state. </dd> </dl></dd> <dt><var title="">timedTrack</var> . <code title="dom-TextTrack-mode"><a href="#dom-texttrack-mode">mode</a></code></dt> <dd> Returns the <a href="#text-track-mode">text track mode</a>, represented by a number from the following list: <dl><dt><code><a href="#texttrack">TextTrack</a></code> . <code title="dom-TextTrack-OFF"><a href="#dom-texttrack-off">OFF</a></code> (0)</dt> <dd> The <a href="#text-track-disabled">text track disabled</a> mode. </dd> <dt><code><a href="#texttrack">TextTrack</a></code> . <code title="dom-TextTrack-HIDDEN"><a href="#dom-texttrack-hidden">HIDDEN</a></code> (1)</dt> <dd> The <a href="#text-track-hidden">text track hidden</a> mode. </dd> <dt><code><a href="#texttrack">TextTrack</a></code> . <code title="dom-TextTrack-SHOWING"><a href="#dom-texttrack-showing">SHOWING</a></code> (2)</dt> <dd> The <a href="#text-track-showing">text track showing</a> and <a href="#text-track-showing-by-default" title="text track showing by default">showing by default</a> modes. </dd> </dl>Can be set, to change the mode. </dd> <dt><var title="">timedTrack</var> . <code title="dom-TextTrack-cues"><a href="#dom-texttrack-cues">cues</a></code></dt> <dd> Returns the <a href="#text-track-list-of-cues">text track list of cues</a>, as a <code><a href="#texttrackcuelist">TextTrackCueList</a></code> object. </dd> <dt><var title="">timedTrack</var> . <code title="dom-TextTrack-activeCues"><a href="#dom-texttrack-activecues">activeCues</a></code></dt> <dd> Returns the <a href="#text-track-cue" title="text track cue">text track cues</a> from the <a href="#text-track-list-of-cues">text track list of cues</a> that are currently active (i.e. that start before the <a href="#current-playback-position">current playback position</a> and end after it), as a <code><a href="#texttrackcuelist">TextTrackCueList</a></code> object. </dd> </dl><div class="impl"> The <dfn id="dom-texttrack-kind" title="dom-TextTrack-kind"><code>kind</code></dfn> attribute must return the <a href="#text-track-kind">text track kind</a> of the <a href="#text-track">text track</a> that the <code><a href="#texttrack">TextTrack</a></code> object represents. The <dfn id="dom-texttrack-label" title="dom-TextTrack-label"><code>label</code></dfn> attribute must return the <a href="#text-track-label">text track label</a> of the <a href="#text-track">text track</a> that the <code><a href="#texttrack">TextTrack</a></code> object represents. The <dfn id="dom-texttrack-language" title="dom-TextTrack-language"><code>language</code></dfn> attribute must return the <a href="#text-track-language">text track language</a> of the <a href="#text-track">text track</a> that the <code><a href="#texttrack">TextTrack</a></code> object represents. The <dfn id="dom-texttrack-readystate" title="dom-TextTrack-readyState"><code>readyState</code></dfn> attribute must return the numeric value corresponding to the <a href="#text-track-readiness-state">text track readiness state</a> of the <a href="#text-track">text track</a> that the <code><a href="#texttrack">TextTrack</a></code> object represents, as defined by the following list: <dl><dt><dfn id="dom-texttrack-none" title="dom-TextTrack-NONE"><code>NONE</code></dfn> (numeric value 0)</dt> <dd>The <a href="#text-track-not-loaded">text track not loaded</a> state.</dd> <dt><dfn id="dom-texttrack-loading" title="dom-TextTrack-LOADING"><code>LOADING</code></dfn> (numeric value 1)</dt> <dd>The <a href="#text-track-loading">text track loading</a> state.</dd> <dt><dfn id="dom-texttrack-loaded" title="dom-TextTrack-LOADED"><code>LOADED</code></dfn> (numeric value 2)</dt> <dd>The <a href="#text-track-loaded">text track loaded</a> state.</dd> <dt><dfn id="dom-texttrack-error" title="dom-TextTrack-ERROR"><code>ERROR</code></dfn> (numeric value 3)</dt> <dd>The <a href="#text-track-failed-to-load">text track failed to load</a> state.</dd> </dl>The <dfn id="dom-texttrack-mode" title="dom-TextTrack-mode"><code>mode</code></dfn> attribute, on getting, must return the numeric value corresponding to the <a href="#text-track-mode">text track mode</a> of the <a href="#text-track">text track</a> that the <code><a href="#texttrack">TextTrack</a></code> object represents, as defined by the following list: <dl><dt><dfn id="dom-texttrack-off" title="dom-TextTrack-OFF"><code>OFF</code></dfn> (numeric value 0)</dt> <dd>The <a href="#text-track-disabled">text track disabled</a> mode.</dd> <dt><dfn id="dom-texttrack-hidden" title="dom-TextTrack-HIDDEN"><code>HIDDEN</code></dfn> (numeric value 1)</dt> <dd>The <a href="#text-track-hidden">text track hidden</a> mode.</dd> <dt><dfn id="dom-texttrack-showing" title="dom-TextTrack-SHOWING"><code>SHOWING</code></dfn> (numeric value 2)</dt> <dd>The <a href="#text-track-showing">text track showing</a> and <a href="#text-track-showing-by-default" title="text track showing by default">showing by default</a> modes.</dd> </dl>On setting, if the new value is not either 0, 1, or 2, the user agent must throw an <code><a href="common-dom-interfaces.html#invalid_access_err">INVALID_ACCESS_ERR</a></code> exception. Otherwise, if the new value isn't equal to what the attribute would currently return, the new value must be processed as follows: <dl class="switch"><dt>If the new value is 0</dt> <dd> Set the <a href="#text-track-mode">text track mode</a> of the <a href="#text-track">text track</a> that the <code><a href="#texttrack">TextTrack</a></code> object represents to the <a href="#text-track-disabled">text track disabled</a> mode. </dd> <dt>If the new value is 1</dt> <dd> Set the <a href="#text-track-mode">text track mode</a> of the <a href="#text-track">text track</a> that the <code><a href="#texttrack">TextTrack</a></code> object represents to the <a href="#text-track-hidden">text track hidden</a> mode. </dd> <dt>If the new value is 2</dt> <dd> Set the <a href="#text-track-mode">text track mode</a> of the <a href="#text-track">text track</a> that the <code><a href="#texttrack">TextTrack</a></code> object represents to the <a href="#text-track-showing">text track showing</a> mode. If the mode had been <a href="#text-track-showing-by-default" title="text track showing by default">showing by default</a>, this will change it to <a href="#text-track-showing" title="text track showing">showing</a>, even though the value of <code title="dom-TextTrack-mode"><a href="#dom-texttrack-mode">mode</a></code> would appear not to change. </dd> </dl>If the <a href="#text-track-mode">text track mode</a> of the <a href="#text-track">text track</a> that the <code><a href="#texttrack">TextTrack</a></code> object represents is not the <a href="#text-track-disabled">text track disabled</a> mode, then the <dfn id="dom-texttrack-cues" title="dom-TextTrack-cues"><code>cues</code></dfn> attribute must return a <a href="infrastructure.html#live">live</a> <code><a href="#texttrackcuelist">TextTrackCueList</a></code> object that represents the subset of the <a href="#text-track-list-of-cues">text track list of cues</a> of the <a href="#text-track">text track</a> that the <code><a href="#texttrack">TextTrack</a></code> object represents whose <a href="#text-track-cue-start-time" title="text track cue start time">start times</a> occur before the <a href="#earliest-possible-position-when-the-script-started">earliest possible position when the script started</a>, in <a href="#text-track-cue-order">text track cue order</a>. Otherwise, it must return null. When an object is returned, the same object must be returned each time. The <dfn id="earliest-possible-position-when-the-script-started">earliest possible position when the script started</dfn> is whatever the <a href="#earliest-possible-position">earliest possible position</a> was the last time the <a href="webappapis.html#event-loop">event loop</a> reached step 1. If the <a href="#text-track-mode">text track mode</a> of the <a href="#text-track">text track</a> that the <code><a href="#texttrack">TextTrack</a></code> object represents is not the <a href="#text-track-disabled">text track disabled</a> mode, then the <dfn id="dom-texttrack-activecues" title="dom-TextTrack-activeCues"><code>activeCues</code></dfn> attribute must return a <a href="infrastructure.html#live">live</a> <code><a href="#texttrackcuelist">TextTrackCueList</a></code> object that represents the subset of the <a href="#text-track-list-of-cues">text track list of cues</a> of the <a href="#text-track">text track</a> that the <code><a href="#texttrack">TextTrack</a></code> object represents whose <a href="#active-flag-was-set-when-the-script-started">active flag was set when the script started</a>, in <a href="#text-track-cue-order">text track cue order</a>. Otherwise, it must return null. When an object is returned, the same object must be returned each time. A <a href="#text-track-cue">text track cue</a>'s <dfn id="active-flag-was-set-when-the-script-started">active flag was set when the script started</dfn> if its <a href="#text-track-cue-active-flag">text track cue active flag</a> was set the last time the <a href="webappapis.html#event-loop">event loop</a> reached step 1. </div><hr><pre class="idl">interface <dfn id="mutabletexttrack">MutableTextTrack</dfn> : <a href="#texttrack">TextTrack</a> { void <a href="#dom-mutabletexttrack-addcue" title="dom-MutableTextTrack-addCue">addCue</a>(in <a href="#texttrackcue">TextTrackCue</a> cue); void <a href="#dom-mutabletexttrack-removecue" title="dom-MutableTextTrack-removeCue">removeCue</a>(in <a href="#texttrackcue">TextTrackCue</a> cue); };</pre><dl class="domintro"><dt><var title="">mutableTextTrack</var> = <var title="">media</var> . <code title="dom-media-addTrack"><a href="#dom-media-addtrack">addTrack</a></code>( <var title="">kind</var> [, <var title="">label</var> [, <var title="">language</var> ] ] )</dt> <dd> Creates and returns a new <code><a href="#mutabletexttrack">MutableTextTrack</a></code> object, which is also added to the <a href="#media-element">media element</a>'s <a href="#list-of-text-tracks">list of text tracks</a>. </dd> <dt><var title="">mutableTextTrack</var> . <code title="dom-MutableTextTrack-addCue"><a href="#dom-mutabletexttrack-addcue">addCue</a></code>( <var title="">cue</var> )</dt> <dd> Adds the given cue to <var title="">mutableTextTrack</var>'s <a href="#text-track-list-of-cues">text track list of cues</a>. Raises an exception if the argument is null, associated with another <a href="#text-track">text track</a>, or already in the list of cues. </dd> <dt><var title="">mutableTextTrack</var> . <code title="dom-MutableTextTrack-removeCue"><a href="#dom-mutabletexttrack-removecue">removeCue</a></code>( <var title="">cue</var> )</dt> <dd> Removes the given cue from <var title="">mutableTextTrack</var>'s <a href="#text-track-list-of-cues">text track list of cues</a>. Raises an exception if the argument is null, associated with another <a href="#text-track">text track</a>, or not in the list of cues. </dd> </dl><div class="impl"> The <dfn id="dom-media-addtrack" title="dom-media-addTrack"><code>addTrack(<var title="">kind</var>, <var title="">label</var>, <var title="">language</var>)</code></dfn> method of <a href="#media-element" title="media element">media elements</a>, when invoked, must run the following steps: <ol><li> If <var title="">kind</var> is not one of the following strings, then throw a <code><a href="common-dom-interfaces.html#syntax_err">SYNTAX_ERR</a></code> exception and abort these steps: <ul class="brief"><li><code title="dom-TextTrack-kind-subtitles"><a href="#dom-texttrack-kind-subtitles">subtitles</a></code> </li><li><code title="dom-TextTrack-kind-captions"><a href="#dom-texttrack-kind-captions">captions</a></code> </li><li><code title="dom-TextTrack-kind-descriptions"><a href="#dom-texttrack-kind-descriptions">descriptions</a></code> </li><li><code title="dom-TextTrack-kind-chapters"><a href="#dom-texttrack-kind-chapters">chapters</a></code> </li><li><code title="dom-TextTrack-kind-metadata"><a href="#dom-texttrack-kind-metadata">metadata</a></code> </li></ul></li> <li> If the <var title="">label</var> argument was omitted, let <var title="">label</var> be the empty string. </li> <li> If the <var title="">language</var> argument was omitted, let <var title="">language</var> be the empty string. </li> <li> Create a new <a href="#text-track">text track</a>, and set its <a href="#text-track-kind">text track kind</a> to <var title="">kind</var>, its <a href="#text-track-label">text track label</a> to <var title="">label</var>, its <a href="#text-track-language">text track language</a> to <var title="">language</var>, its <a href="#text-track-readiness-state">text track readiness state</a> to the <a href="#text-track-loaded">text track loaded</a> state, its <a href="#text-track-mode">text track mode</a> to the <a href="#text-track-hidden">text track hidden</a> mode, and its <a href="#text-track-list-of-cues">text track list of cues</a> to an empty list. </li> <li> Add the new <a href="#text-track">text track</a> to the <a href="#media-element">media element</a>'s <a href="#list-of-text-tracks">list of text tracks</a>. </li></ol>The <dfn id="dom-mutabletexttrack-addcue" title="dom-MutableTextTrack-addCue"><code>addCue(<var title="">cue</var>)</code></dfn> method of <code><a href="#mutabletexttrack">MutableTextTrack</a></code> objects, when invoked, must run the following steps: <ol><li>If <var title="">cue</var> is null, then throw an <code><a href="common-dom-interfaces.html#invalid_access_err">INVALID_ACCESS_ERR</a></code> exception and abort these steps.</li> <li>If the given <var title="">cue</var> is already associated with a <a href="#text-track">text track</a> other than the method's <code><a href="#mutabletexttrack">MutableTextTrack</a></code> object's <a href="#text-track">text track</a>, then throw an <code><a href="common-dom-interfaces.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception and abort these steps.</li> <li>Associate <var title="">cue</var> with the method's <code><a href="#mutabletexttrack">MutableTextTrack</a></code> object's <a href="#text-track">text track</a>, if it is not currently associated with a <a href="#text-track">text track</a>.</li> <li>If the given <var title="">cue</var> is already listed in the method's <code><a href="#mutabletexttrack">MutableTextTrack</a></code> object's <a href="#text-track">text track</a>'s <a href="#text-track-list-of-cues">text track list of cues</a>, then throw an <code><a href="common-dom-interfaces.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception.</li> <li>Add <var title="">cue</var> to the method's <code><a href="#mutabletexttrack">MutableTextTrack</a></code> object's <a href="#text-track">text track</a>'s <a href="#text-track-list-of-cues">text track list of cues</a>.</li> </ol>The <dfn id="dom-mutabletexttrack-removecue" title="dom-MutableTextTrack-removeCue"><code>removeCue(<var title="">cue</var>)</code></dfn> method of <code><a href="#mutabletexttrack">MutableTextTrack</a></code> objects, when invoked, must run the following steps: <ol><li>If <var title="">cue</var> is null, then throw an <code><a href="common-dom-interfaces.html#invalid_access_err">INVALID_ACCESS_ERR</a></code> exception and abort these steps.</li> <li>If the given <var title="">cue</var> is not associated with the method's <code><a href="#mutabletexttrack">MutableTextTrack</a></code> object's <a href="#text-track">text track</a>, then throw an <code><a href="common-dom-interfaces.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception.</li> <li>If the given <var title="">cue</var> is not currently listed in the method's <code><a href="#mutabletexttrack">MutableTextTrack</a></code> object's <a href="#text-track">text track</a>'s <a href="#text-track-list-of-cues">text track list of cues</a>, then throw a <code><a href="common-dom-interfaces.html#not_found_err">NOT_FOUND_ERR</a></code> exception.</li> <li>Remove <var title="">cue</var> from the method's <code><a href="#mutabletexttrack">MutableTextTrack</a></code> object's <a href="#text-track">text track</a>'s <a href="#text-track-list-of-cues">text track list of cues</a>.</li> </ol></div><div class="example"> In this example, an <code><a href="#audio">audio</a></code> element is used to play a specific sound-effect from a sound file containing many sound effects. A cue is used to pause the audio, so that it ends exactly at the end of the clip, even if the browser is busy running some script. If the page had relied on script to pause the audio, then the start of the next clip might be heard if the browser was not able to run the script at the exact time specified. <pre>var sfx = new Audio('sfx.wav'); var sounds = a.addTrack('metadata'); // add sounds we care about sounds.addCue(new TextTrackCue('dog bark', 12.783, 13.612, '', '', '', true)); sounds.addCue(new TextTrackCue('kitten mew', 13.612, 15.091, '', '', '', true)); function playSound(id) { sfx.currentTime = sounds.getCueById(id).startTime; sfx.play(); } sfx.oncanplaythrough = function () { playSound('dog bark'); } window.onbeforeunload = function () { playSound('kitten mew'); return 'Are you sure you want to leave this awesome page?'; }</pre> </div><hr><pre class="idl">interface <dfn id="texttrackcuelist">TextTrackCueList</dfn> { readonly attribute unsigned long <a href="#dom-texttrackcuelist-length" title="dom-TextTrackCueList-length">length</a>; getter <a href="#texttrackcue">TextTrackCue</a> (in unsigned long index); <a href="#texttrackcue">TextTrackCue</a> <a href="#dom-texttrackcuelist-getcuebyid" title="dom-TextTrackCueList-getCueById">getCueById</a>(in DOMString id); };</pre><dl class="domintro"><dt><var title="">cuelist</var> . <code title="dom-TextTrackCueList-length"><a href="#dom-texttrackcuelist-length">length</a></code></dt> <dd> Returns the number of <a href="#text-track-cue" title="text track cue">cues</a> in the list. </dd> <dt><var title="">cuelist</var>[<var title="">index</var>]</dt> <dd> Returns the <a href="#text-track-cue">text track cue</a> with index <var title="">index</var> in the list. The cues are sorted in <a href="#text-track-cue-order">text track cue order</a>. </dd> <dt><var title="">cuelist</var> . <code title="dom-TextTrackCueList-getCueById"><a href="#dom-texttrackcuelist-getcuebyid">getCueById</a></code>( <var title="">id</var> )</dt> <dd> Returns the first <a href="#text-track-cue">text track cue</a> (in <a href="#text-track-cue-order">text track cue order</a>) with <a href="#text-track-cue-identifier">text track cue identifier</a> <var title="">id</var>. Returns null if none of the cues have the given identifier or if the argument is the empty string. </dd> </dl><div class="impl"> A <code><a href="#texttrackcuelist">TextTrackCueList</a></code> object represents a dynamically updating list of <a href="#text-track-cue" title="text track cue">text track cues</a> in a given order. The <dfn id="dom-texttrackcuelist-length" title="dom-TextTrackCueList-length"><code>length</code></dfn> attribute must return the number of <a href="#text-track-cue" title="text track cue">cues</a> in the list represented by the <code><a href="#texttrackcuelist">TextTrackCueList</a></code> object. The supported property indicies of a <code><a href="#texttrackcuelist">TextTrackCueList</a></code> object at any instant are the numbers from zero to the number of <a href="#text-track-cue" title="text track cue">cues</a> in the list represented by the <code><a href="#texttrackcuelist">TextTrackCueList</a></code> object minus one, if any. If there are no <a href="#text-track-cue" title="text track cue">cues</a> in the list, there are no supported property indicies. To determine the value of an indexed property for a given index <var title="">index</var>, the user agent must return the <var title="">index</var>th <a href="#text-track-cue">text track cue</a> in the list represented by the <code><a href="#texttrackcuelist">TextTrackCueList</a></code> object. The <dfn id="dom-texttrackcuelist-getcuebyid" title="dom-TextTrackCueList-getCueById"><code>getCueById(<var title="">id</var>)</code></dfn> method, when called with an argument other than the empty string, must return the first <a href="#text-track-cue">text track cue</a> in the list represented by the <code><a href="#texttrackcuelist">TextTrackCueList</a></code> object whose <a href="#text-track-cue-identifier">text track cue identifier</a> is <var title="">id</var>, if any, or null otherwise. If the argument is the empty string, then the method must return null. </div><hr><pre class="idl"> interface <dfn id="texttrackcue">TextTrackCue</dfn> { readonly attribute <a href="#texttrack">TextTrack</a> <a href="#dom-texttrackcue-track" title="dom-TextTrackCue-track">track</a>; readonly attribute DOMString <a href="#dom-texttrackcue-id" title="dom-TextTrackCue-id">id</a>; readonly attribute double <a href="#dom-texttrackcue-starttime" title="dom-TextTrackCue-startTime">startTime</a>; readonly attribute double <a href="#dom-texttrackcue-endtime" title="dom-TextTrackCue-endTime">endTime</a>; readonly attribute boolean <a href="#dom-texttrackcue-pauseonexit" title="dom-TextTrackCue-pauseOnExit">pauseOnExit</a>; DOMString <a href="#dom-texttrackcue-getcueassource" title="dom-TextTrackCue-getCueAsSource">getCueAsSource</a>(); <a href="infrastructure.html#documentfragment">DocumentFragment</a> <a href="#dom-texttrackcue-getcueashtml" title="dom-TextTrackCue-getCueAsHTML">getCueAsHTML</a>(); readonly attribute <a href="webappapis.html#function">Function</a> <a href="#handler-texttrackcue-onenter" title="handler-TextTrackCue-onenter">onenter</a>; readonly attribute <a href="webappapis.html#function">Function</a> <a href="#handler-texttrackcue-onexit" title="handler-TextTrackCue-onexit">onexit</a>; };</pre><dl class="domintro"><dt><var title="">cue</var> . <a href="#dom-texttrackcue-track" title="dom-TextTrackCue-track">track</a></dt> <dd> Returns the <code><a href="#texttrack">TextTrack</a></code> object to which this <a href="#text-track-cue">text track cue</a> belongs, if any, or null otherwise. </dd> <dt><var title="">cue</var> . <a href="#dom-texttrackcue-id" title="dom-TextTrackCue-id">id</a></dt> <dd> Returns the <a href="#text-track-cue-identifier">text track cue identifier</a>. </dd> <dt><var title="">cue</var> . <a href="#dom-texttrackcue-starttime" title="dom-TextTrackCue-startTime">startTime</a></dt> <dd> Returns the <a href="#text-track-cue-start-time">text track cue start time</a>, in seconds. </dd> <dt><var title="">cue</var> . <a href="#dom-texttrackcue-endtime" title="dom-TextTrackCue-endTime">endTime</a></dt> <dd> Returns the <a href="#text-track-cue-end-time">text track cue end time</a>, in seconds. </dd> <dt><var title="">cue</var> . <a href="#dom-texttrackcue-pauseonexit" title="dom-TextTrackCue-pauseOnExit">pauseOnExit</a></dt> <dd> Returns true if the <a href="#text-track-cue-pause-on-exit-flag">text track cue pause-on-exit flag</a> is set, false otherwise. </dd> <dt><var title="">source</var> = <var title="">cue</var> . <a href="#dom-texttrackcue-getcueassource" title="dom-TextTrackCue-getCueAsSource">getCueAsSource</a>()</dt> <dd> Returns the <a href="#text-track-cue-text">text track cue text</a> in raw unparsed form. </dd> <dt><var title="">fragment</var> = <var title="">cue</var> . <a href="#dom-texttrackcue-getcueashtml" title="dom-TextTrackCue-getCueAsHTML">getCueAsHTML</a>()</dt> <dd> Returns the <a href="#text-track-cue-text">text track cue text</a> as a <code><a href="infrastructure.html#documentfragment">DocumentFragment</a></code> of <a href="infrastructure.html#html-elements">HTML elements</a> and other DOM nodes. </dd> </dl><div class="impl"> The <dfn id="dom-texttrackcue-track" title="dom-TextTrackCue-track"><code>track</code></dfn> attribute must return the <code><a href="#texttrack">TextTrack</a></code> object of the <a href="#text-track">text track</a> with which the <a href="#text-track-cue">text track cue</a> that the <code><a href="#texttrackcue">TextTrackCue</a></code> object represents is associated, if any; or null otherwise. The <dfn id="dom-texttrackcue-id" title="dom-TextTrackCue-id"><code>id</code></dfn> attribute must return the <a href="#text-track-cue-identifier">text track cue identifier</a> of the <a href="#text-track-cue">text track cue</a> that the <code><a href="#texttrackcue">TextTrackCue</a></code> object represents. The <dfn id="dom-texttrackcue-starttime" title="dom-TextTrackCue-startTime"><code>startTime</code></dfn> attribute must return the <a href="#text-track-cue-start-time">text track cue start time</a> of the <a href="#text-track-cue">text track cue</a> that the <code><a href="#texttrackcue">TextTrackCue</a></code> object represents, in seconds. The <dfn id="dom-texttrackcue-endtime" title="dom-TextTrackCue-endTime"><code>endTime</code></dfn> attribute must return the <a href="#text-track-cue-end-time">text track cue end time</a> of the <a href="#text-track-cue">text track cue</a> that the <code><a href="#texttrackcue">TextTrackCue</a></code> object represents, in seconds. The <dfn id="dom-texttrackcue-pauseonexit" title="dom-TextTrackCue-pauseOnExit"><code>pauseOnExit</code></dfn> attribute must return true if the <a href="#text-track-cue-pause-on-exit-flag">text track cue pause-on-exit flag</a> of the <a href="#text-track-cue">text track cue</a> that the <code><a href="#texttrackcue">TextTrackCue</a></code> object represents is set; or false otherwise. The <dfn id="dom-texttrackcue-direction" title="dom-TextTrackCue-direction"><code>direction</code></dfn> attribute must return the <a href="#text-track-cue-writing-direction">text track cue writing direction</a> of the <a href="#text-track-cue">text track cue</a> that the <code><a href="#texttrackcue">TextTrackCue</a></code> object represents. The <dfn id="dom-texttrackcue-getcueassource" title="dom-TextTrackCue-getCueAsSource"><code>getCueAsSource()</code></dfn> method must return the raw <a href="#text-track-cue-text">text track cue text</a>. The <dfn id="dom-texttrackcue-getcueashtml" title="dom-TextTrackCue-getCueAsHTML"><code>getCueAsHTML()</code></dfn> method must convert the <a href="#text-track-cue-text">text track cue text</a> to a <code><a href="infrastructure.html#documentfragment">DocumentFragment</a></code> for the <a href="#media-element">media element</a>'s <code><a href="infrastructure.html#document">Document</a></code>, using the appropriate rules for doing so. </div><div class="impl"> <h6 id="cue-events">4.8.10.10.5 Event definitions</h6> The following are the <a href="webappapis.html#event-handlers">event handlers</a> that must be supported, as IDL attributes, by all objects implementing the <code><a href="#texttrack">TextTrack</a></code> interface: <table><thead><tr><th><a href="webappapis.html#event-handlers" title="event handlers">Event handler</a> </th><th><a href="webappapis.html#event-handler-event-type">Event handler event type</a> </th></tr></thead><tbody><tr><td><dfn id="handler-texttrack-onload" title="handler-TextTrack-onload"><code>onload</code></dfn> </td><td> <code title="event-load">load</code> </td></tr><tr><td><dfn id="handler-texttrack-onerror" title="handler-TextTrack-onerror"><code>onerror</code></dfn> </td><td> <code title="event-error">error</code> </td></tr><tr><td><dfn id="handler-texttrack-oncuechange" title="handler-TextTrack-oncuechange"><code>oncuechange</code></dfn> </td><td> <code title="event-cuechange">cuechange</code> </td></tr></tbody></table>The following are the <a href="webappapis.html#event-handlers">event handlers</a> that must be supported, as IDL attributes, by all objects implementing the <code><a href="#texttrackcue">TextTrackCue</a></code> interface: <table><thead><tr><th><a href="webappapis.html#event-handlers" title="event handlers">Event handler</a> </th><th><a href="webappapis.html#event-handler-event-type">Event handler event type</a> </th></tr></thead><tbody><tr><td><dfn id="handler-texttrackcue-onenter" title="handler-TextTrackCue-onenter"><code>onenter</code></dfn> </td><td> <code title="event-enter">enter</code> </td></tr><tr><td><dfn id="handler-texttrackcue-onexit" title="handler-TextTrackCue-onexit"><code>onexit</code></dfn> </td><td> <code title="event-exit">exit</code> </td></tr></tbody></table></div><h5 id="user-interface">4.8.10.11 User interface</h5>The <dfn id="attr-media-controls" title="attr-media-controls"><code>controls</code></dfn> attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. 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.<div class="impl"> If the attribute is present, or if <a href="webappapis.html#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a> for the <a href="#media-element">media element</a>, then the user agent should <dfn id="expose-a-user-interface-to-the-user">expose a user interface to the user</dfn>. 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 <a href="#media-element">media element</a>'s context menu. Where possible (specifically, for starting, stopping, pausing, and unpausing playback, for seeking,  for listing, enabling, and disabling text tracks,  and for muting or changing the volume of the audio), 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.  For the purposes of listing chapters in the <a href="#media-resource">media resource</a>, only <a href="#text-track" title="text track">text tracks</a> in the <a href="#media-element">media element</a>'s <a href="#list-of-text-tracks">list of text tracks</a> <a href="#text-track-showing" title="text track showing">showing</a> or <a href="#text-track-showing-by-default" title="text track showing by default">showing by default</a> and whose <a href="#text-track-kind">text track kind</a> is <code title="dom-timedtrack-kind-chapters">chapters</code> should be used. Each <a href="#text-track-cue" title="text track cue">cue</a> in such a <a href="#text-track">text track</a> represents a chapter starting at the cue's <a href="#text-track-cue-start-time" title="text track cue start time">start time</a>. The name of the chapter is the <a href="#text-track-cue-text">text track cue text</a>, interpreted literally.  The <dfn id="dom-media-controls" title="dom-media-controls"><code>controls</code></dfn> IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the same name. <hr></div><dl class="domintro"><dt><var title="">media</var> . <code title="dom-media-volume"><a href="#dom-media-volume">volume</a></code> [ = <var title="">value</var> ]</dt> <dd> 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 <code><a href="common-dom-interfaces.html#index_size_err">INDEX_SIZE_ERR</a></code> if the new value is not in the range 0.0 .. 1.0. </dd> <dt><var title="">media</var> . <code title="dom-media-muted"><a href="#dom-media-muted">muted</a></code> [ = <var title="">value</var> ]</dt> <dd> Returns true if audio is muted, overriding the <code title="dom-media-volume"><a href="#dom-media-volume">volume</a></code> attribute, and false if the <code title="dom-media-volume"><a href="#dom-media-volume">volume</a></code> attribute is being honored. Can be set, to change whether the audio is muted or not. </dd> </dl><div class="impl"> The <dfn id="dom-media-volume" title="dom-media-volume"><code>volume</code></dfn> attribute must return the playback volume of any audio portions of the <a href="#media-element">media element</a>, 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 <code><a href="common-dom-interfaces.html#index_size_err">INDEX_SIZE_ERR</a></code> exception must be raised instead. The <dfn id="dom-media-muted" title="dom-media-muted"><code>muted</code></dfn> 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 <a href="#media-resource">media resource</a> must then be muted, and if false, audio playback must then be enabled. Whenever either the <code title="dom-media-muted"><a href="#dom-media-muted">muted</a></code> or <code title="dom-media-volume"><a href="#dom-media-volume">volume</a></code> attributes are changed, the user agent must <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named <code title="event-media-volumechange"><a href="#event-media-volumechange">volumechange</a></code> at the <a href="#media-element">media element</a>. </div>The <dfn id="attr-media-audio" title="attr-media-audio"><code>audio</code></dfn> attribute on the <code><a href="#video">video</a></code> element controls the default state of the audio channel of the <a href="#media-resource">media resource</a>, potentially overriding user preferences.The <code title="attr-media-audio"><a href="#attr-media-audio">audio</a></code> attribute, if specified, must have a value that is an <a href="common-microsyntaxes.html#unordered-set-of-unique-space-separated-tokens">unordered set of unique space-separated tokens</a>, which are <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a>. The tokens must be from the following list (currently, only one allowed token is defined):<dl><dt><dfn id="attr-media-audio-keyword-muted" title="attr-media-audio-keyword-muted"><code>muted</code></dfn></dt> <dd> Causes the user agent to override the user's preferences, if any, and always default the video to muted. </dd> </dl>A future version of this specification will probably introduce new values here, e.g. to control the default volume, or to select a default audio track.<div class="impl"> When a <code><a href="#video">video</a></code> element is created, if it has an <code title="attr-media-audio"><a href="#attr-media-audio">audio</a></code> attribute specified, the user agent must <a href="common-microsyntaxes.html#split-a-string-on-spaces" title="split a string on spaces">split the attribute's value on spaces</a>; if any of the tokens are an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the string <code title="attr-media-audio-keyword-muted"><a href="#attr-media-audio-keyword-muted">muted</a></code>, the user agent must then set the <code title="dom-media-muted"><a href="#dom-media-muted">muted</a></code> attribute to true, overriding any user preference.  </div>This attribute has no dynamic effect (it only controls the default state of the element).<div class="example"> This video (an advertisment) autoplays, but to avoid annoying users, it does so without sound, and allows the user to turn the sound on. <pre><video src="adverts.cgi?kind=video" controls autoplay loop audio=muted></video></pre> </div><h5 id="time-ranges">4.8.10.12 Time ranges</h5>Objects implementing the <code><a href="#timeranges">TimeRanges</a></code> interface represent a list of ranges (periods) of time.<pre class="idl">interface <dfn id="timeranges">TimeRanges</dfn> { readonly attribute unsigned long <a href="#dom-timeranges-length" title="dom-TimeRanges-length">length</a>; double <a href="#dom-timeranges-start" title="dom-TimeRanges-start">start</a>(in unsigned long index); double <a href="#dom-timeranges-end" title="dom-TimeRanges-end">end</a>(in unsigned long index); };</pre><dl class="domintro"><dt><var title="">media</var> . <code title="dom-TimeRanges-length"><a href="#dom-timeranges-length">length</a></code></dt> <dd> Returns the number of ranges in the object. </dd> <dt><var title="">time</var> = <var title="">media</var> . <code title="dom-TimeRanges-start"><a href="#dom-timeranges-start">start</a></code>(<var title="">index</var>)</dt> <dd> Returns the time for the start of the range with the given index. Throws an <code><a href="common-dom-interfaces.html#index_size_err">INDEX_SIZE_ERR</a></code> if the index is out of range. </dd> <dt><var title="">time</var> = <var title="">media</var> . <code title="dom-TimeRanges-end"><a href="#dom-timeranges-end">end</a></code>(<var title="">index</var>)</dt> <dd> Returns the time for the end of the range with the given index. Throws an <code><a href="common-dom-interfaces.html#index_size_err">INDEX_SIZE_ERR</a></code> if the index is out of range. </dd> </dl><div class="impl"> The <dfn id="dom-timeranges-length" title="dom-TimeRanges-length"><code>length</code></dfn> IDL attribute must return the number of ranges represented by the object. The <dfn id="dom-timeranges-start" title="dom-TimeRanges-start"><code>start(<var title="">index</var>)</code></dfn> method must return the position of the start of the <var title="">index</var>th range represented by the object, in seconds measured from the start of the timeline that the object covers. The <dfn id="dom-timeranges-end" title="dom-TimeRanges-end"><code>end(<var title="">index</var>)</code></dfn> method must return the position of the end of the <var title="">index</var>th range represented by the object, in seconds measured from the start of the timeline that the object covers. These methods must raise <code><a href="common-dom-interfaces.html#index_size_err">INDEX_SIZE_ERR</a></code> exceptions if called with an <var title="">index</var> argument greater than or equal to the number of ranges represented by the object. When a <code><a href="#timeranges">TimeRanges</a></code> object is said to be a <dfn id="normalized-timeranges-object">normalized <code>TimeRanges</code> object</dfn>, the ranges it represents must obey the following criteria: <ul><li>The start of a range must be greater than the end of all earlier ranges.</li> <li>The start of a range must be less than the end of that same range.</li> </ul>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 <code title="dom-media-buffered"><a href="#dom-media-buffered">buffered</a></code>, <code title="dom-media-seekable"><a href="#dom-media-seekable">seekable</a></code> and <code title="dom-media-played"><a href="#dom-media-played">played</a></code> IDL attributes of <a href="#media-element" title="media element">media elements</a> must be that element's <a href="#media-timeline">media timeline</a>. </div><h5 id="mediaevents">4.8.10.13 Event summary</h5>This section is non-normative.The following events fire on <a href="#media-element" title="media element">media elements</a> as part of the processing model described above:<table><thead><tr><th>Event name </th><th>Interface </th><th>Dispatched when... </th><th>Preconditions </th></tr></thead><tbody><tr><td><dfn id="event-media-loadstart" title="event-media-loadstart"><code>loadstart</code></dfn> </td><td><code><a href="infrastructure.html#event">Event</a></code> </td><td>The user agent begins looking for <a href="#media-data">media data</a>, as part of the <a href="#concept-media-load-algorithm" title="concept-media-load-algorithm">resource selection algorithm</a>. </td><td><code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> equals <code title="dom-media-NETWORK_LOADING"><a href="#dom-media-network_loading">NETWORK_LOADING</a></code> </td></tr><tr><td><dfn id="event-media-progress" title="event-media-progress"><code>progress</code></dfn> </td><td><code><a href="infrastructure.html#event">Event</a></code> </td><td>The user agent is fetching <a href="#media-data">media data</a>. </td><td><code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> equals <code title="dom-media-NETWORK_LOADING"><a href="#dom-media-network_loading">NETWORK_LOADING</a></code> </td></tr><tr><td><dfn id="event-media-suspend" title="event-media-suspend"><code>suspend</code></dfn> </td><td><code><a href="infrastructure.html#event">Event</a></code> </td><td>The user agent is intentionally not currently fetching <a href="#media-data">media data</a>, but does not have the entire <a href="#media-resource">media resource</a> downloaded. </td><td><code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> equals <code title="dom-media-NETWORK_IDLE"><a href="#dom-media-network_idle">NETWORK_IDLE</a></code> </td></tr><tr><td><dfn id="event-media-abort" title="event-media-abort"><code>abort</code></dfn> </td><td><code><a href="infrastructure.html#event">Event</a></code> </td><td>The user agent stops fetching the <a href="#media-data">media data</a> before it is completely downloaded, but not due to an error. </td><td><code title="dom-media-error"><a href="#dom-media-error">error</a></code> is an object with the code <code title="dom-MediaError-MEDIA_ERR_ABORTED"><a href="#dom-mediaerror-media_err_aborted">MEDIA_ERR_ABORTED</a></code>. <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> equals either <code title="dom-media-NETWORK_EMPTY"><a href="#dom-media-network_empty">NETWORK_EMPTY</a></code> or <code title="dom-media-NETWORK_IDLE"><a href="#dom-media-network_idle">NETWORK_IDLE</a></code>, depending on when the download was aborted. </td></tr><tr><td><dfn id="event-media-error" title="event-media-error"><code>error</code></dfn> </td><td><code><a href="infrastructure.html#event">Event</a></code> </td><td>An error occurs while fetching the <a href="#media-data">media data</a>. </td><td><code title="dom-media-error"><a href="#dom-media-error">error</a></code> is an object with the code <code title="dom-MediaError-MEDIA_ERR_NETWORK"><a href="#dom-mediaerror-media_err_network">MEDIA_ERR_NETWORK</a></code> or higher. <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> equals either <code title="dom-media-NETWORK_EMPTY"><a href="#dom-media-network_empty">NETWORK_EMPTY</a></code> or <code title="dom-media-NETWORK_IDLE"><a href="#dom-media-network_idle">NETWORK_IDLE</a></code>, depending on when the download was aborted. </td></tr><tr><td><dfn id="event-media-emptied" title="event-media-emptied"><code>emptied</code></dfn> </td><td><code><a href="infrastructure.html#event">Event</a></code> </td><td>A <a href="#media-element">media element</a> whose <code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> was previously not in the <code title="dom-media-NETWORK_EMPTY"><a href="#dom-media-network_empty">NETWORK_EMPTY</a></code> state has just switched to that state (either because of a fatal error during load that's about to be reported, or because the <code title="dom-media-load"><a href="#dom-media-load">load()</a></code> method was invoked while the <a href="#concept-media-load-algorithm" title="concept-media-load-algorithm">resource selection algorithm</a> was already running). </td><td><code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> is <code title="dom-media-NETWORK_EMPTY"><a href="#dom-media-network_empty">NETWORK_EMPTY</a></code>; all the IDL attributes are in their initial states. </td></tr><tr><td><dfn id="event-media-stalled" title="event-media-stalled"><code>stalled</code></dfn> </td><td><code><a href="infrastructure.html#event">Event</a></code> </td><td>The user agent is trying to fetch <a href="#media-data">media data</a>, but data is unexpectedly not forthcoming. </td><td><code title="dom-media-networkState"><a href="#dom-media-networkstate">networkState</a></code> is <code title="dom-media-NETWORK_LOADING"><a href="#dom-media-network_loading">NETWORK_LOADING</a></code>. </td></tr></tbody><tbody><tr><td><dfn id="event-media-play" title="event-media-play"><code>play</code></dfn> </td><td><code><a href="infrastructure.html#event">Event</a></code> </td><td>Playback has begun. Fired after the <code title="dom-media-play"><a href="#dom-media-play">play()</a></code> method has returned, or when the <code title="attr-media-autoplay"><a href="#attr-media-autoplay">autoplay</a></code> attribute has caused playback to begin. </td><td><code title="dom-media-paused"><a href="#dom-media-paused">paused</a></code> is newly false. </td></tr><tr><td><dfn id="event-media-pause" title="event-media-pause"><code>pause</code></dfn> </td><td><code><a href="infrastructure.html#event">Event</a></code> </td><td>Playback has been paused. Fired after the <code title="dom-media-pause"><a href="#dom-media-pause">pause()</a></code> method has returned. </td><td><code title="dom-media-paused"><a href="#dom-media-paused">paused</a></code> is newly true. </td></tr></tbody><tbody><tr><td><dfn id="event-media-loadedmetadata" title="event-media-loadedmetadata"><code>loadedmetadata</code></dfn> </td><td><code><a href="infrastructure.html#event">Event</a></code> </td><td>The user agent has just determined the duration and dimensions of the <a href="#media-resource">media resource</a>  and <a href="#the-text-tracks-are-ready">the text tracks are ready</a>.  </td><td><code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> is newly equal to <code title="dom-media-HAVE_METADATA"><a href="#dom-media-have_metadata">HAVE_METADATA</a></code> or greater for the first time. </td></tr><tr><td><dfn id="event-media-loadeddata" title="event-media-loadeddata"><code>loadeddata</code></dfn> </td><td><code><a href="infrastructure.html#event">Event</a></code> </td><td>The user agent can render the <a href="#media-data">media data</a> at the <a href="#current-playback-position">current playback position</a> for the first time. </td><td><code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> newly increased to <code title="dom-media-HAVE_CURRENT_DATA"><a href="#dom-media-have_current_data">HAVE_CURRENT_DATA</a></code> or greater for the first time. </td></tr><tr><td><dfn id="event-media-waiting" title="event-media-waiting"><code>waiting</code></dfn> </td><td><code><a href="infrastructure.html#event">Event</a></code> </td><td>Playback has stopped because the next frame is not available, but the user agent expects that frame to become available in due course. </td><td><code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> is newly equal to or less than <code title="dom-media-HAVE_CURRENT_DATA"><a href="#dom-media-have_current_data">HAVE_CURRENT_DATA</a></code>, and <code title="dom-media-paused"><a href="#dom-media-paused">paused</a></code> is false. Either <code title="dom-media-seeking"><a href="#dom-media-seeking">seeking</a></code> is true, or the <a href="#current-playback-position">current playback position</a> is not contained in any of the ranges in <code title="dom-media-buffered"><a href="#dom-media-buffered">buffered</a></code>. It is possible for playback to stop for two other reasons without <code title="dom-media-paused"><a href="#dom-media-paused">paused</a></code> being false, but those two reasons do not fire this event: maybe <a href="#ended-playback" title="ended playback">playback ended</a>, or playback <a href="#stopped-due-to-errors">stopped due to errors</a>. </td></tr><tr><td><dfn id="event-media-playing" title="event-media-playing"><code>playing</code></dfn> </td><td><code><a href="infrastructure.html#event">Event</a></code> </td><td>Playback has started. </td><td><code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> is newly equal to or greater than <code title="dom-media-HAVE_FUTURE_DATA"><a href="#dom-media-have_future_data">HAVE_FUTURE_DATA</a></code>, <code title="dom-media-paused"><a href="#dom-media-paused">paused</a></code> is false, <code title="dom-media-seeking"><a href="#dom-media-seeking">seeking</a></code> is false, or the <a href="#current-playback-position">current playback position</a> is contained in one of the ranges in <code title="dom-media-buffered"><a href="#dom-media-buffered">buffered</a></code>. </td></tr><tr><td><dfn id="event-media-canplay" title="event-media-canplay"><code>canplay</code></dfn> </td><td><code><a href="infrastructure.html#event">Event</a></code> </td><td>The user agent can resume playback of the <a href="#media-data">media data</a>, but estimates that if playback were to be started now, the <a href="#media-resource">media resource</a> could not be rendered at the current playback rate up to its end without having to stop for further buffering of content. </td><td><code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> newly increased to <code title="dom-media-HAVE_FUTURE_DATA"><a href="#dom-media-have_future_data">HAVE_FUTURE_DATA</a></code> or greater. </td></tr><tr><td><dfn id="event-media-canplaythrough" title="event-media-canplaythrough"><code>canplaythrough</code></dfn> </td><td><code><a href="infrastructure.html#event">Event</a></code> </td><td>The user agent estimates that if playback were to be started now, the <a href="#media-resource">media resource</a> could be rendered at the current playback rate all the way to its end without having to stop for further buffering. </td><td><code title="dom-media-readyState"><a href="#dom-media-readystate">readyState</a></code> is newly equal to <code title="dom-media-HAVE_ENOUGH_DATA"><a href="#dom-media-have_enough_data">HAVE_ENOUGH_DATA</a></code>. </td></tr></tbody><tbody><tr><td><dfn id="event-media-seeking" title="event-media-seeking"><code>seeking</code></dfn> </td><td><code><a href="infrastructure.html#event">Event</a></code> </td><td>The <code title="dom-media-seeking"><a href="#dom-media-seeking">seeking</a></code> IDL attribute changed to true and the seek operation is taking long enough that the user agent has time to fire the event. </td><td> </td></tr><tr><td><dfn id="event-media-seeked" title="event-media-seeked"><code>seeked</code></dfn> </td><td><code><a href="infrastructure.html#event">Event</a></code> </td><td>The <code title="dom-media-seeking"><a href="#dom-media-seeking">seeking</a></code> IDL attribute changed to false. </td><td> </td></tr><tr><td><dfn id="event-media-timeupdate" title="event-media-timeupdate"><code>timeupdate</code></dfn> </td><td><code><a href="infrastructure.html#event">Event</a></code> </td><td>The <a href="#current-playback-position">current playback position</a> changed as part of normal playback or in an especially interesting way, for example discontinuously. </td><td> </td></tr><tr><td><dfn id="event-media-ended" title="event-media-ended"><code>ended</code></dfn> </td><td><code><a href="infrastructure.html#event">Event</a></code> </td><td>Playback has stopped because the end of the <a href="#media-resource">media resource</a> was reached. </td><td><code title="dom-media-currentTime"><a href="#dom-media-currenttime">currentTime</a></code> equals the end of the <a href="#media-resource">media resource</a>; <code title="dom-media-ended"><a href="#dom-media-ended">ended</a></code> is true. </td></tr></tbody><tbody><tr><td><dfn id="event-media-ratechange" title="event-media-ratechange"><code>ratechange</code></dfn> </td><td><code><a href="infrastructure.html#event">Event</a></code> </td><td>Either the <code title="dom-media-defaultPlaybackRate"><a href="#dom-media-defaultplaybackrate">defaultPlaybackRate</a></code> or the <code title="dom-media-playbackRate"><a href="#dom-media-playbackrate">playbackRate</a></code> attribute has just been updated. </td><td> </td></tr><tr><td><dfn id="event-media-durationchange" title="event-media-durationchange"><code>durationchange</code></dfn> </td><td><code><a href="infrastructure.html#event">Event</a></code> </td><td>The <code title="dom-media-duration"><a href="#dom-media-duration">duration</a></code> attribute has just been updated. </td><td> </td></tr><tr><td><dfn id="event-media-volumechange" title="event-media-volumechange"><code>volumechange</code></dfn> </td><td><code><a href="infrastructure.html#event">Event</a></code> </td><td>Either the <code title="dom-media-volume"><a href="#dom-media-volume">volume</a></code> attribute or the <code title="dom-media-muted"><a href="#dom-media-muted">muted</a></code> attribute has changed. Fired after the relevant attribute's setter has returned. </td><td> </td></tr></tbody></table><div class="impl"> <h5 id="security-and-privacy-considerations">4.8.10.14 Security and privacy considerations</h5> The main security and privacy implications of the <code><a href="#video">video</a></code> and <code><a href="#audio">audio</a></code> 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. <hr>If a victim page embeds hostile content, the threat is that the content might contain scripted code that attempts to interact with the <code><a href="infrastructure.html#document">Document</a></code> 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 <a href="browsers.html#top-level-browsing-context">top-level browsing context</a>. For instance, if an SVG animation was embedded in a <code><a href="#video">video</a></code> 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. <hr>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 <code><a href="embedded-content-1.html#the-img-element">img</a></code> 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. <a href="references.html#refsCORS">[CORS]</a>  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. </div><h5 id="best-practices-for-authors-using-media-elements">4.8.10.15 Best practices for authors using media elements</h5>This section is non-normative.Playing audio and video resources on small devices such as set-top boxes or mobile phones is often constrained by limited hardware resources in the device. For example, a device might only support three simultaneous videos. For this reason, it is a good practice to release resources held by <a href="#media-element" title="media element">media elements</a> when they are done playing, either by being very careful about removing all references to the element and allowing it to be garbage collected, or, even better, by removing the element's <code title="attr-media-src"><a href="#attr-media-src">src</a></code> attribute and any <code><a href="#the-source-element">source</a></code> element descendants, and invoking the element's <code title="dom-media-load"><a href="#dom-media-load">load()</a></code> method.<div class="impl"> <h5 id="best-practices-for-implementors-of-media-elements">4.8.10.16 Best practices for implementors of media elements</h5> This section is non-normative. How accurately various aspects of the <a href="#media-element">media element</a> API are implemented is considered a quality-of-implementation issue. For example, when implementing the <code title="attr-media-buffered">buffered</code> attribute, how precise an implementation reports the ranges that have been buffered depends on how carefully the user agent inspects the data. Since the API reports ranges as times, but the data is obtained in byte streams, a user agent receiving a variable-bit-rate stream might only be able to determine precise times by actually decoding all of the data. User agents aren't required to do this, however; they can instead return estimates (e.g. based on the average bit rate seen so far) which get revised as more information becomes available. As a general rule, user agents are urged to be conservative rather than optimistic. For example, it would be bad to report that everything had been buffered when it had not. Another quality-of-implementation issue would be playing a video backwards when the codec is designed only for forward playback (e.g. there aren't many key frames, and they are far apart, and the intervening frames only have deltas from the previous frame). User agents could do a poor job, e.g. only showing key frames; however, better implementations would do more work and thus do a better job, e.g. actually decoding parts of the video forwards, storing the complete frames, and then playing the frames backwards. Similarly, while implementations are allowed to drop buffered data at any time (there is no requirement that a user agent keep all the media data obtained for the lifetime of the media element), it is again a quality of implementation issue: user agents with sufficient resources to keep all the data around are encouraged to do so, as this allows for a better user experience. For example, if the user is watching a live stream, a user agent could allow the user only to view the live video; however, a better user agent would buffer everything and allow the user to seek through the earlier material, pause it, play it forwards and backwards, etc. <hr>When a <a href="#media-element">media element</a> that is paused is <a href="infrastructure.html#remove-an-element-from-a-document" title="remove an element from a document">removed from a document</a> and not reinserted before the next time the <a href="webappapis.html#event-loop">event loop</a> spins, implementations that are resource constrained are encouraged to take that opportunity to release all hardware resources (like video planes, networking resources, and data buffers) used by the <a href="#media-element">media element</a>. (User agents still have to keep track of the playback position and so forth, though, in case playback is later restarted.) </div></body></html>