HTML_Timed_Media_Elements.html 76 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
  2. <html>
  3. <head>
  4. <title> Proposed HTML Timed Media Elements </title>
  5. <link href="./mediaelement.css" rel="stylesheet" type="text/css">
  6. <style type="text/css">
  7. h4 + .element { margin-top: -2.5em; padding-top: 2em; }
  8. h4 + p + .element { margin-top: -5em; padding-top: 4em; }
  9. .element { background: #EFE; color: #000; margin: 0 0 1em -1em; padding: 0 1em 0.25em 0.75em; border-left: solid #9F9 0.25em; -padding: 0; /* that last decl is for IE6. Try removing it, it's hilarious! */ }
  10. .proposal { border: blue solid; padding: 1em; }
  11. table.matrix, table.matrix td { border: none; text-align: right; }
  12. table.matrix { margin-left: 2em; }
  13. .history table { width: 100%; }
  14. .history, .history td, .history th { border: solid thin; font-size: x-small }
  15. td.hauthor, td.hdate { width: 10%; }
  16. td.hversion { width: 5%; text-align: center; }
  17. td.hchange { width: 100%; }
  18. .event-definition table { border: solid thin #000; width: 95%; }
  19. .event-definition tr:last-child td { border: none; }
  20. .event-definition th { text-align: left; font-weight: bold; border: none; border-right: 1px dashed #ccc; border-bottom: 1px dashed #ccc; white-space: nowrap; background-color: #F7F5D7; padding-left: 8px; padding-right: 8px; }
  21. .event-definition td { width: 100%; font-family: monospace; font-weight: normal; padding-left: 1em; background-color: transparent; padding-right: 1em; border: none; }
  22. /* needed to override wiki CSS */
  23. a, a:link { text-decoration: underline;}
  24. th { color: #000; }
  25. .obsolete {
  26. font-size: larger;
  27. color: red;
  28. }
  29. </style>
  30. </head>
  31. <body class="draft">
  32. <div class="head">
  33. <h1> HTML Timed Media Elements </h1> <h2 class="no-num no-toc" id="working"> Working Draft &mdash; 19 March 2007 </h2>
  34. <p class="copyright">&copy; Copyright 2007 Apple Inc. All rights reserved.</p>
  35. </div>
  36. <h2 class="no-num no-toc" id="abstract"> Abstract </h2>
  37. <p>This specification introduces features to HTML and the DOM for native support of timed media,
  38. including but not limited to video and audio. </p>
  39. <h2 class="no-num no-toc" id="status"> Status of this document </h2>
  40. <p class="obsolete"><strong>This document is obsolete. Media Elements are now specified in the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html" title="4.8.6 The video element &mdash; HTML5 (including next generation additions still in development)">HTML5 specification</a>.</strong></p>
  41. <h2 class="no-num no-toc"id="contents"> Table of contents </h2>
  42. <!--begin-toc-->
  43. <ul class="toc">
  44. <li><a href="#introduction"><span class="secno">1.</span> Introduction</a>
  45. <li><a href="#elements"><span class=secno>2.</span> Elements</a>
  46. <ul class=toc>
  47. <li><a href="#the-video-element"><span class=secno>2.1.</span>
  48. The <code title=element-video>video </code>element</a>
  49. <ul class=toc>
  50. <li><a href="#video-element-attributes"><span class=secno>2.1.1.</span> Element attributes</a>
  51. <li><a href="#video-dom-attributes"><span class=secno>2.1.2.</span>DOM attributes</a>
  52. </ul>
  53. <li><a href="#the-audio-element"><span class=secno>2.2.</span>
  54. The <code title=element-audio>audio</code> element</a>
  55. <li><a href="#the-common-attributes"><span class=secno>2.3.</span>
  56. Attributes and methods common to <code title=element-video>video</code> and
  57. <code title=element-audio>audio</code> elements</a>
  58. <ul class=toc>
  59. <li><a href="#common-element-attributes"><span class=secno>2.3.1.</span> Element attributes</a>
  60. <li><a href="#common-dom-attributes"><span class=secno>2.3.2.</span> DOM attributes and methods</a>
  61. <ul class=toc>
  62. <li><a href="#time-attributes"><span class=secno>2.3.2.1.</span> Time</a>
  63. <li><a href="#playback-attributes"><span class=secno>2.3.2.2.</span> Playback</a>
  64. <li><a href="#audio-attributes"><span class=secno>2.3.2.3.</span> Audio</a>
  65. <li><a href="#looping-attributes"><span class=secno>2.3.2.4.</span> Looping</a>
  66. <li><a href="#characteristics-attributes"><span class=secno>2.3.2.5.</span> Characteristics</a>
  67. <li><a href="#state-attributes"><span class=secno>2.3.2.6.</span> State</a>
  68. <li><a href="#time-triggers"><span class=secno>2.3.2.7.</span> Time triggers</a>
  69. </ul>
  70. </ul>
  71. </ul>
  72. <li><a href="#events"><span class=secno>3.</span> Events</a>
  73. <ul class=toc>
  74. <li><a href="#load-events"><span class=secno>3.1.</span>
  75. Media loading events</a>
  76. <li><a href="#playback-events"><span class=secno>3.1.</span>
  77. Media playback events</a>
  78. </ul>
  79. <li><a href="#window-additions"><span class=secno>4.</span> WindowHTML Additions</a>
  80. <li class=no-num><a href="#references">References</a>
  81. <li class=no-num><a href="#acknowledgements">Acknowledgements</a>
  82. </ul>
  83. <!--end-toc-->
  84. <hr>
  85. <h2 id="introduction"><span class="secno">1.</span> Introduction</h2>
  86. <p><em>This section is non-normative.</em></p>
  87. <p>While the World Wide Web has already been enriched by a variety of audio and video media,
  88. support for timed media in user agents is currently provided by a variety of implementations
  89. with their own peculiar sets of interfaces and behaviors. This proposal outlines a set of
  90. standard interfaces and behaviors for timed media that can be supported by a variety of
  91. implementations and applied to multiple audiovisual formats, with the goal of conferring upon
  92. these types of media the benefits of native support, such as styling for presentation, improved
  93. accessibility, and the opportunity to achieve greater uniformity of behavior.</p>
  94. <p>Certain intrinsic characteristics of timed media and of its presentation must influence the
  95. specifics of such a proposal:
  96. <ul>
  97. <li> A presentation of timed media may encompass one or more media substreams, e.g. video
  98. and audio, that are rendered in concert with each other over time.
  99. <li> Resources containing timed media may be very large in size, even indefinitely large,
  100. and loaded and presented incrementally over time.
  101. <li> A variety of protocols can be used to load timed media for presentation, and the rules
  102. for use of these protocols vary. Some are intelligent about the timing characteristics of
  103. media streams and others are not. Some are file-based protocols and others are not. Some
  104. permit random access in the byte domain or in the time domain and others provide sequential
  105. access only.
  106. <li> Various states of timed media elements are subject to change, e.g. they can be ready to
  107. play or not ready to play, they can be playing or not, they can be actively loading data or
  108. not.
  109. <li> The properties of timed media elements can change with the availability of additional
  110. data according to the media formats and protocols in use, e.g. their total duration, their
  111. natural width and height, and even the number and type of media substreams they encompass.
  112. </ul>
  113. <p>In sum timed media is inherently dynamic, not only in its presentation but also in its
  114. behavior. The current proposal is intended to provide standard mechanisms for controlling and
  115. responding to this dynamism, while deferring to the user agent the choice of degree of dynamism
  116. that's useful and supportable.</p>
  117. <h2 id="elements"><span class="secno">2.</span> New Elements</h2>
  118. <h4 id=the-video-element><span class=secno>2.1.</span> The <dfn id=video title=element-video>
  119. <code>video</code></dfn> element</h4>
  120. <dl class=element>
  121. <dd><a href="http://www.whatwg.org/specs/web-apps/current-work/#strictly">Strictly inline-level</a>
  122. <a href="http://www.whatwg.org/specs/web-apps/current-work/#embedded0">embedded content</a>.
  123. <dt>Contexts in which this element may be used:
  124. <dd>As the only <a href="http://www.whatwg.org/specs/web-apps/current-work/#embedded0">embedded content</a>
  125. child of a <code><a href="http://www.whatwg.org/specs/web-apps/current-work/#figure0">figure</a></code> element.
  126. <dd>Where <a href="http://www.whatwg.org/specs/web-apps/current-work/#strictly">
  127. strictly inline-level content</a> is allowed.
  128. <dt>Content model:
  129. <dd>When used as the child of a
  130. <code><a href="http://www.whatwg.org/specs/web-apps/current-work/#figure0">figure</a></code>
  131. element, or, when used as a
  132. <em><code><a href="http://www.whatwg.org/specs/web-apps/current-work/#figure0">figure</a></code> fallback
  133. <code><a href="#video">video</a></code></em>: zero or more
  134. <a href="http://www.whatwg.org/specs/web-apps/current-work/#block-level1">block-level elements</a>
  135. or a single
  136. <code><a href="#video">video</a></code> element, which is then considered to be a
  137. <em><code><a href="http://www.whatwg.org/specs/web-apps/current-work/#figure0">figure</a></code> fallback
  138. <code><a href="#video">video</a></code></em>.
  139. <dd>Otherwise:
  140. <a href="http://www.whatwg.org/specs/web-apps/current-work/#inline-level1"> inline-level content</a>.
  141. <dt>Element-specific attributes:
  142. <dd><code title="attr-media-src"><a href="#attr-src">src</a></code> (required)
  143. <dd><code title="attr-media-type"><a href="#attr-type">type</a></code>
  144. <dd><code title="attr-video-height"><a href="#attr-height">height</a></code>
  145. <dd><code title="attr-video-width"><a href="#attr-width">width</a></code>
  146. <dd><code title="attr-media-autoplay"><a href="#attr-autoplay">autoplay</a></code>
  147. <dd><code title="attr-media-controller"><a href="#attr-controller">controller</a></code>
  148. <dt>Predefined classes that apply to this element:
  149. <dd>None.
  150. <dt>
  151. DOM interface:
  152. <dd>
  153. <pre class="idl">interface <dfn id=html-video-element>HTMLVideoElement : HTMLTimedMediaElement</dfn> {
  154. attribute long <a href="#dom-video-height" title="video-element-height">height</a>;
  155. attribute long <a href="#dom-video-width" title="video-element-width">width</a>;
  156. };</pre>
  157. <p class=note>An instance of <code><a
  158. href="#html-video-element">HTMLVideoElement</a></code> can be obtained using
  159. the <code title=dom-video-constructor><a href="#video-constructor">Video</a></code> constructor.</p>
  160. </dl>
  161. <p>A <code title=element-video><a href="#video">video</a></code> element represents a video or
  162. movie, with an alternate representation given by its contents.
  163. <h6 id="video-element-attributes"><span class=secno>2.1.1.</span> Video specific element attributes</h6>
  164. <p>The <dfn id=attr-height title=attr-video-height><code>height</code></dfn> and
  165. <dfn id=attr-width title=attr-video-width><code>width</code></dfn> attributes
  166. give the preferred rendered dimensions of the media file if it is to be
  167. shown in a visual medium. If only one is specified, the size the other
  168. is scaled preserving the media resource's intrinsic aspect ratio. These attributes must be either
  169. <a href="http://www.whatwg.org/specs/web-apps/current-work/#valid" title="valid non-negative integer">
  170. valid non-negative integers</a> or
  171. <a href="http://www.whatwg.org/specs/web-apps/current-work/#valid3" title="valid non-negative percentage">
  172. valid non-negative percentages.</a></p>
  173. <p>See below for definitions of
  174. <code title="attr-media-src"><a href="#attr-src">src</a></code>,
  175. <code title="attr-media-type"><a href="#attr-type">type</a></code>,
  176. <code title="attr-media-autoplay"><a href="#attr-autoplay">autoplay</a></code>, and
  177. <code title="attr-media-controller"><a href="#attr-controller">controller</a></code>
  178. </p>
  179. <h6 id="video-dom-attributes"><span class=secno>2.1.2.</span> Video specific DOM attributes</h6>
  180. <p>The DOM attributes <dfn id=dom-video-height title=video-element-height>
  181. <code>height</code></dfn> and <dfn id=dom-video-width
  182. title=video-element-width><code>width</code></dfn> must return the rendered
  183. height and width of the media resource, in CSS pixels, if the media resource is being
  184. rendered and is being rendered to a visual medium, or 0 otherwise.
  185. <a href="#refsCSS21">[CSS21]</a></p>
  186. <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
  187. <h4 id=the-audio-element><span class=secno>2.2. </span>The <dfn id=audio title=element-audio>
  188. <code>audio</code></dfn> element</h4>
  189. <p><a href="http://www.whatwg.org/specs/web-apps/current-work/#strictly">Strictly
  190. inline-level</a> <a href="http://www.whatwg.org/specs/web-apps/current-work/#embedded0">embedded content</a>.
  191. <dl class=element>
  192. <dt>Contexts in which this element may be used:
  193. <dd>As the only <a href="http://www.whatwg.org/specs/web-apps/current-work/#embedded0">embedded content</a>
  194. child of a <code><a href="http://www.whatwg.org/specs/web-apps/current-work/#figure0">figure</a></code> element.
  195. <dd>Where <a href="http://www.whatwg.org/specs/web-apps/current-work/#strictly">
  196. strictly inline-level content</a> is allowed.
  197. <dt>Content model:
  198. <dd>When used as the child of a
  199. <code><a href="http://www.whatwg.org/specs/web-apps/current-work/#figure0">figure</a></code>
  200. element, or, when used as a
  201. <em><code><a href="http://www.whatwg.org/specs/web-apps/current-work/#figure0">figure</a></code> fallback
  202. <code><a href="#audio">audio</a></code></em>: zero or more
  203. <a href="http://www.whatwg.org/specs/web-apps/current-work/#block-level1">block-level elements</a>
  204. or a single
  205. <code><a href="#audio">audio</a></code> element, which is then considered to be a
  206. <em><code><a href="http://www.whatwg.org/specs/web-apps/current-work/#figure0">figure</a></code> fallback
  207. <code><a href="#audio">audio</a></code></em>.
  208. <dd>Otherwise:
  209. <a href="http://www.whatwg.org/specs/web-apps/current-work/#inline-level1"> inline-level content</a>.
  210. <dt>Element-specific attributes:
  211. <dd><code title="attr-media-src"><a href="#attr-src">src</a></code> (required)
  212. <dd><code title="attr-media-type"><a href="#attr-type">type</a></code>
  213. <dd><code title="attr-media-autoplay"><a href="#attr-autoplay">autoplay</a></code>
  214. <dd><code title="attr-media-controller"><a href="#attr-controller">controller</a></code>
  215. <dt>Predefined classes that apply to this element:
  216. <dd>None.
  217. <dt>DOM interface:
  218. <dd> No difference from <code><a href="#html-timed-media-element">HTMLTimedMediaElement</a></code>.
  219. <p class=note>An instance of <code><a
  220. href="#html-audio-element">HTMLAudioElement</a></code> can be obtained using
  221. the <code title=dom-audio-constructor><a href="#audio">Audio</a></code> constructor.</p>
  222. </dl>
  223. <p>Audio objects have no spatial representation. They are heard and not seen. Otherwise they have
  224. the same API as video objects.</p>
  225. <p>The user agent must render only the audio media contained in the resource, regardless of
  226. whatever else it might contain. If the source is an MP3 file containing synchronized lyrics, for
  227. example, the user agent must render only the audio and not the text.</p>
  228. <p>See below for definitions of
  229. <code title="attr-media-src"><a href="#attr-src">src</a></code>,
  230. <code title="attr-media-type"><a href="#attr-type">type</a></code>,
  231. <code title="attr-media-autoplay"><a href="#attr-autoplay">autoplay</a></code>, and
  232. <code title="attr-media-controller"><a href="#attr-controller">controller</a></code>
  233. </p>
  234. <p class="big-issue">Need some words about using only audio when media file has both audio and
  235. video.</p>
  236. <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
  237. <h3 id=the-common-attributes><span class=secno>2.3.</span> Attributes common to the
  238. <code title=element-video>video</code> and <code title=element-audio>audio</code> elements</h3>
  239. <h5 id=common-element-attributes><span class=secno>2.3.1.</span>
  240. Element attributes common to <code title=element-video>video</code> and
  241. <code title=element-audio>audio</code> elements.</h5>
  242. <p>The <dfn id="attr-src" title="attr-media-src"><code>src</code></dfn> attribute
  243. must contain the URI (or IRI) of the media resource.
  244. <p>When the src attribute is set and the specified resource has a supported type, the user agent
  245. must prepare to present it according to the appropriate transfer protocol. This may entail the
  246. initiation of network sessions, including but not limited to file transfers. If the presentation
  247. of timed media by the user agent has been disabled, if the resource has an unsupported type, or
  248. if the preparations for its presentation fail either because of a protocol failure or because
  249. the format of the media is unrecognized, the user agent must fire an error event on the element
  250. and display the element's fallback content, if available.</p>
  251. <p>The user agent may choose to proceed with the presentation of media that it can render
  252. only partially, for any of the following reasons:
  253. <ul>
  254. <li> A media type is not supported, i.e. the resource contains one or more renderable substreams
  255. of types not supported by the user agent. Example: a 3GPP file with timed text on a device that
  256. does not have a text renderer.
  257. <li> A media format is not supported, i.e. a renderable substream of a type that's supported by
  258. the user agent contains media that can't be decoded. Example: a user agent that supports only
  259. H.264 at baseline profile encounters an MPEG-4 file with a video track with H.264 frames encoded
  260. in main profile.
  261. <li> Media can't be rendered under current constraints. Here there's no problem with media types
  262. or formats but the resource can't be rendered anyway, possibly temporarily. Example: a user
  263. agent that can decode only one H.264 video stream at a time is requested to decode multiple
  264. streams simultaneously.
  265. </ul>
  266. <p>From the user's perspective, these cases look very much the same because their only obvious
  267. symptom is that some or all of the media cannot be rendered. In this case, the user agent may emit
  268. a <code title=event-mediarendererror><a href="#eventdef-event-mediarendererror">mediarendererror</a></code>.
  269. <p>The <dfn id=attr-type title=attr-media-type><code>type</code></dfn>
  270. attribute, if present, gives the MIME type of the media resource specified
  271. by <code title="attr-media-src"><a href="#attr-src">src</a></code>. This attribute is optional
  272. but recommended as it allows the user agent to avoid loading information for unsupported
  273. content types. The value must be a valid MIME type <a href="#refsRFC2046">
  274. [RFC2046]</a>, optionally with parameters indicating the codec(s) required to render the content
  275. <a href="#refsRFC4281">[RFC4281]</a>. The <code title=attr-media-type>type</code> attribute
  276. is purely advisory and is only intended for static fallback, it is only considered when deciding
  277. whether to initiate a load or not.</p>
  278. <p>The <code title=attr-media-type>type</code> attribute can thus be used by the page author
  279. to select different content for different user agent configurations. For the following example:
  280. <pre >
  281. &lt;video src="big_264.mp4" type="video/mp4; codecs=mp4v.21.3"&gt;
  282. &lt;video src="medium.mp4" type="video/mp4; codecs=mp4v.20.9"&gt;
  283. &lt;img src="small.png" alt="alternate image for non-video browsers /&gt;
  284. &lt;/video&gt;
  285. &lt;/video&gt;
  286. </pre>
  287. <p>the user agent would choose the outmost &lt;video&gt; if it supports H.264 visual simple profile
  288. level 1, else the inner &lt;video&gt; if it suports MPEG-4 visual simple profile level 0, else the
  289. &lt;img&gt; if it supports PNG, else the alternate text.
  290. <p>Because the supportability and desirability of media container formats and media encoding
  291. formats vary widely according to the needs and constraints of user agents, the process of static
  292. fallback for HTML timed media elements allows the user agent to examine multiple descriptive
  293. attributes that indicate the suitability of a given resource for loading and presentation.
  294. <ol>
  295. <li> Examine the <code title=attr-media-type><a href="#attr-type">type</a></code> attribute,
  296. if present. If not present proceed to step 2.
  297. If the <code title=attr-media-type><a href="#attr-type">type</a></code>, optionally including
  298. information about the codec(s) required to render it as described in RFC 4281, is not supported
  299. by the user agent, the element doesn't represent anything except what its contents
  300. represent and static fallback may ensue. <a href="#refsRFC4281">[RFC4281]</a>
  301. <li> Begin a load of the resource specified by the
  302. <code title=attr-media-src><a href="#attr-src">src</a></code> attribute. Note that dynamic
  303. fallback may ensue for a variety of reasons. See the discussion of
  304. "<code title=event-mediarendererror><a href="#eventdef-event-mediarendererror">mediarendererror</a></code>"
  305. below.
  306. </ol>
  307. <p class="big-issue">Should there be other advisory markup attributes in order to describe
  308. content even more precisely, e.g. dataRate? Should CSS Media Queries be extended to support
  309. bandwidth?
  310. <p>The <dfn id=attr-autoplay title=attr-media-autoplay><code>autoplay</code></dfn> attribute is a
  311. <a href="http://www.whatwg.org/specs/web-apps/current-work/#boolean0">boolean attribute</a>.
  312. If the attribute is present, the user agent must begin playing the element as soon as it
  313. estimates that playback will not be interrupted to rebuffer.</p>
  314. <p>The <dfn id=attr-controller title=attr-media-controller><code>controller</code></dfn> attribute is a
  315. <a href="http://www.whatwg.org/specs/web-apps/current-work/#boolean0">boolean attribute</a>.
  316. If the attribute is present, the user agent must display a user interface which allows the user
  317. to control the media element. The <code title="attr-video-height"><a href="#attr-height">height</a></code>
  318. attribute on the element does not include the size of the controller, it is the size of the
  319. video element only.
  320. <span class="big-issue">Should we specify the position of the controller?</span>
  321. <span class="big-issue">Should we specify <em>what</em> controls it should have?</span>
  322. </p>
  323. <p>The <code title=element-video><a href="#video">video</a></code>
  324. and <code title=element-audio><a href="#audio">audio</a></code>
  325. elements must implement the <code><a href="#html-timed-media-element">HTMLTimedMediaElement</a></code> interface:
  326. <pre class="idl">interface <dfn id="html-timed-media-element">HTMLTimedMediaElement : HTMLElement</dfn> {
  327. attribute DOMString <a href="#dom-src" title="dom-media-src">src</a>;
  328. attribute DOMString <a href="#dom-type" title="dom-media-type">type</a>;
  329. // <a href="#time-attributes">Time</a>
  330. attribute float <a href="#starttime" title="dom-media-starttime">startTime</a>;
  331. attribute float <a href="#endtime" title="dom-media-endtime">endTime</a>;
  332. attribute float <a href="#currenttime" title="dom-media-currenttime">currentTime</a>;
  333. readonly attribute float <a href="#duration" title="dom-media-duration">duration</a>;
  334. readonly attribute float <a href="#availableduration" title="dom-media-availableduration">availableDuration</a>;
  335. // <a href="#playback-attributes">Playback</a>
  336. attribute float <a href="#currentrate" title="dom-media-currentrate">currentRate</a>;
  337. attribute float <a href="#playrate" title="dom-media-playrate">playRate</a>;
  338. attribute boolean <a href="#ispaused" title="dom-media-ispaused">isPaused</a>;
  339. void <a href="#play" title="dom-media-play">play</a>();
  340. void <a href="#pause" title="dom-media-pause">pause</a>();
  341. void <a href="#step" title="dom-media-step">step</a>(in long numberOfFrames);
  342. // <a href="#audio-attributes">Audio</a>
  343. attribute float <a href="#volume" title="dom-media-volume">volume</a>;
  344. attribute boolean <a href="#muted" title="dom-media-muted">muted</a>;
  345. // <a href="#looping-attributes">Looping</a>
  346. attribute long <a href="#loopcount" title="dom-media-loopcount">loopCount</a>;
  347. attribute long <a href="#currentloop" title="dom-media-currentloop">currentLoop</a>;
  348. attribute float <a href="#loopstarttime" title="dom-media-loopstarttime">loopStartTime</a>;
  349. attribute float <a href="#loopendtime" title="dom-media-loopendtime">loopEndTime</a>;
  350. // <a href="#characteristics-attributes">Characteristics</a>
  351. attribute boolean <a href="#hasaudio" title="dom-media-hasaudio">hasAudio</a>;
  352. attribute boolean <a href="#hasvisual" title="dom-media-hasvisual">hasVisual</a>;
  353. // <a href="#state-attributes">State</a>
  354. const unsigned short <a href="#uninitialized" title="dom-media-UNINITIALIZED">UNINITIALIZED</a> = 0;
  355. const unsigned short <a href="#error" title="dom-media-ERROR">ERROR</a> = 1;
  356. const unsigned short <a href="#understandable" title="dom-media-UNDERSTANDABLE">UNDERSTANDABLE</a> = 2;
  357. const unsigned short <a href="#presentable" title="dom-media-PRESENTABLE">PRESENTABLE</a> = 3;
  358. const unsigned short <a href="#playable" title="dom-media-PLAYABLE">PLAYABLE</a> = 4;
  359. const unsigned short <a href="#playthroughok" title="dom-media-PLAYTHROUGHOK">PLAYTHROUGHOK</a> = 5;
  360. const unsigned short <a href="#loaded" title="dom-media-LOADED">LOADED</a> = 6;
  361. readonly attribute long <a href="#mediastatus" title="dom-media-mediastatus">mediaStatus</a>;
  362. // <a href="#time-triggers">Timed triggers</a>
  363. void <a href="#settimetrigger" title="dom-media-settimetrigger">setTimeTrigger</a>(in float time, in TimeTriggerListener listener);
  364. void <a href="#removetimetrigger" title="dom-media-removetimetrigger">removeTimeTrigger</a>(in float time, in TimeTriggerListener listener);
  365. };</pre>
  366. <pre class="idl">interface <dfn id="time-trigger-listener">TimeTriggerListener</dfn> {
  367. void <a href="#handletimetrigger" title="timetrigger-listener-handletimetrigger">handleTimeTrigger</a>(in float time);
  368. };</pre>
  369. <h5 id=common-dom-attributes><span class=secno>2.3.2.</span>
  370. DOM attributes and methods common to <code title=element-video>video</code> and
  371. <code title=element-audio>audio</code> elements.</h5>
  372. <p>The DOM attributes <dfn id=dom-src title=dom-media-src><code>src</code></dfn>
  373. and <dfn id=dom-type title=dom-media-type><code>type</code></dfn>
  374. each must reflect the respective content attributes of the same name.
  375. <p>When the <code title=dom-media-src><a href="#dom-src">src</a></code>
  376. attribute is set, the user agent must immediately begin to download the
  377. specified resource unless the user agent cannot support <code title=element-video>
  378. video</code>/<code title=element-audio>audio</code>, or its support for
  379. <code title=element-video>video</code>/<code title=element-audio>audio</code> has
  380. been disabled. The <code title=dom-media-type>type</code>
  381. attribute is considered at this time, so it should be cleared or reset when the
  382. <code title=dom-media-src><a href="#dom-src">src</a></code> attribute it set to a media
  383. resource with a different type. Fallback content must be reconsidered if the
  384. user agent is unable to load and display the specified resource.
  385. <h6 id="time-attributes"><span class=secno>2.3.2.1.</span> Time Attributes</h6>
  386. <p>Media durations are not always finite. For example: the duration of a "live" RTP stream
  387. is <em>indefinite</em> as long as it lasts, i.e. such streams typically proceed indefinitely
  388. without signalling their duration until the server closes the session. </p>
  389. <p>A media resource which has a <em>finite</em> duration may not have a <em>known</em>
  390. duration, or may not have a precisely known duration, for some period of time even after
  391. playback can be initiated. For example: MPEG elementary streams, including audio elementary
  392. streams such as MP3 files, must be completely scanned in order to determine their precise
  393. duration. If a user agent reports an approximate duration, it must fire a
  394. <code title=event-durationchange><a href="#durationchange">durationchange</a></code> event
  395. when the estimate is refined or the precise duration becomes known.</p>
  396. <p>Time values are represented as floating point numbers, representing a length of time in
  397. seconds. A value of +infinity, ECMAScript <code>Number.POSITIVE_INFINITY</code>, signifies
  398. an "indefinite" time. A time value of "Not A Number", ECMAScript <code>Number.NaN</code>,
  399. signifies an unknown or unspecified time value. This approach has the advantage of encouraging
  400. script writers to cope with these situations, as opposed to the approach of defining other
  401. attributes that need to be examined to determine the validity of the duration attribute but
  402. which are easily ignored.</p>
  403. <p class="big-issue">It would be helpful to have utility functions to convert from a formatted
  404. time string to a double and back. Where should these go?</p>
  405. <p>The DOM attribute <dfn id=availableduration title=dom-media-availableduration>
  406. <code>availableDuration</code></dfn> returns the duration of the portion of media which is
  407. available for playing. The user agent must fire an
  408. <code title=event-availabledurationchange><a href="#availabledurationchange">availabledurationchange</a></code>
  409. when the portion of media available for playing changes.</p>
  410. <p>The DOM attribute <dfn id=duration title=dom-media-duration><code>duration</code></dfn>
  411. returns the total duration of the complete media file. For some media formats, the value
  412. returned may be an estimate. When an estimated duration is returned, the user agent will
  413. fire a <code title=event-durationchange><a href="#durationchange">durationchange</a></code>
  414. event when the estimate is refined or the precise duration becomes known.</p>
  415. <p>The DOM attribute <dfn id=starttime title=dom-media-starttime><code>startTime</code></dfn>
  416. gets and sets the time at which a movie begins to play, and the time at which it stops
  417. when playing in reverse. The initial value is 0. The value must be in the range from 0
  418. to <code title=dom-media-endtime><a href="#endtime">endTime</a></code>. If the attribute is
  419. set to a value greater than <code title=dom-media-endtime><a href="#endtime">endTime</a></code>,
  420. it is clipped to <code title=dom-media-endtime><a href="#endtime">endTime</a></code>.
  421. <span class="big-issue">Or should it retain the previous value???</span>
  422. </p>
  423. <p>The DOM attribute <dfn id=endtime title=dom-media-endtime><code>endTime</code></dfn>
  424. gets and sets the time at which a movie stops playing, and the time at which it begins when
  425. playing in reverse. This attribute is initially set to <code>Number.NaN</code> to signal
  426. that it has not been set. The value must be in the range from
  427. <code title=dom-media-starttime><a href="#starttime">startTime</a></code> to
  428. <code title=dom-media-duration><a href="#duration">duration</a></code>. If the attribute
  429. is set to a value outside this range, it is clipped to the nearest legal value.
  430. <span class="big-issue">Or should it retain the previous value???</span>
  431. </p>
  432. <p>The DOM attribute <dfn id=currenttime title=dom-media-currentTime><code>currentTime</code></dfn>
  433. gets and sets the position of the play head in the media element's timeline.</p>
  434. <h6 id="playback-attributes"><span class=secno>2.3.2.2.</span> Playback Attributes</h6>
  435. <p>The DOM attribute <dfn id=currentrate title=dom-media-currentrate><code>currentRate</code></dfn>
  436. is the rate at which a media element is currently playing.</p>
  437. <p>The DOM attribute <dfn id=playrate title=dom-media-playrate><code>playRate</code></dfn>
  438. is the rate that is implicitly set on a media element when its play() method is invoked.
  439. Some media formats do not allow the play rate to be changed, for example a live RTP stream.
  440. <span class="big-issue"> What should the UA do when someone tries to set the rate on a media
  441. format that doesn't allow it? Should we specify the behavior?</span> This value is
  442. initialized to the media resource's intrinsic value, eg. the <a href=
  443. "http://developer.apple.com/documentation/QuickTime/QTFF/QTFFChap2/chapter_3_section_2.html#//apple_ref/doc/uid/TP40000939-CH204-32947">
  444. <code>"preferred rate"</code></a> of a QuickTime movie, or 1 if there is no
  445. intrinsic value. Changing the <code title=dom-media-playrate>playRate</code> when an element
  446. is already playing shall <em>not</em> change the
  447. <code title=dom-media-currentrate>currentRate</code>. The rate change does not take effect until
  448. the <code title=dom-media-play>play()</code> method is called again.</p>
  449. <p>The DOM attribute <dfn id=ispaused title=dom-media-ispaused><code>isPaused</code></dfn>
  450. returns a value that specifies whether the element is in a paused state. An element that
  451. is not paused may have a rate of 0 if it is prerolling. <span class="big-issue">This
  452. should be clarified</span></p>
  453. <p>The <dfn id=play title=dom-media-play><code>play()
  454. </code></dfn> method begins playing the element at the <code title=dom-media-playrate>
  455. <a href="#playrate">playRate</a></code>. </p>
  456. <p>The <dfn id=pause title=dom-media-pause><code>pause()</code></dfn> method sets the
  457. play rate to zero.</p>
  458. <p>The <dfn id=step title=dom-media-step><code>step(<var title="">numberOfFrames</var>)
  459. </code></dfn> method steps the specified number of frames. Negative values step backwards.</p>
  460. <h6 id="audio-attributes"><span class=secno>2.3.2.3.</span> Audio Attributes</h6>
  461. <p>The DOM attribute <dfn id=volume title=dom-media-volume><code>volume</code></dfn>
  462. gets and sets the audio volume of the movie. Legal values are between '0' and '100',
  463. values outside of this range are clipped.</p>
  464. <p>The DOM attribute <dfn id=muted title=dom-media-muted><code>muted</code></dfn>
  465. gets and sets a value that indicates whether the audio is turned on or off.</p>
  466. <h6 id="looping-attributes"><span class=secno>2.3.2.4.</span> Looping Attributes</h6>
  467. <p>The DOM attribute <dfn id=loopcount title=dom-media-loopcount><code>loopCount</code></dfn>
  468. gets and sets the number of loop itterations that will be played before the media stops.</p>
  469. <p>The DOM attribute <dfn id=currentloop title=dom-media-currentloop><code>currentLoop</code></dfn>
  470. returns the index of the current itteration of the playback of the media. For example, on the
  471. first play through the value will be 0, the second time through it will be 1, etc. Playback
  472. stops when <code title=dom-media-currentloop><a href="#currentloop">currentloop</a></code>
  473. equals <code title=dom-media-loopcount><a href="#loopcount">loopCount</a></code>.</p>
  474. <p>The DOM attribute <dfn id=loopstarttime title=dom-media-loopstarttime><code>loopStartTime</code></dfn>
  475. gets and sets the time at which a movie begins to play after looping, and the time at which
  476. it loops when playing in reverse. The initial value is 0. The value must be in the range from 0
  477. to <code title=dom-media-loopendtime><a href="#loopendtime">loopEndTime</a></code>.
  478. If the attribute is set to a value outside this range, it is clipped to the nearest legal value.
  479. <span class="big-issue">Or should it retain the previous value???</span>
  480. </p>
  481. <p>The DOM attribute <dfn id=loopendtime title=dom-media-loopendtime><code>loopEndTime</code></dfn>
  482. gets and sets the time at which a movie loops, and the time at which it begins to play
  483. after looping when playing in reverse. This attribute is initially set to <code>Number.NaN</code>
  484. to signal that it has not been set. The value must be in the range from the
  485. <code title=dom-media-loopstarttime><a href="#loopstarttime">loopStartTime</a></code>
  486. to <code title=dom-media-duration><a href="#duration">duration</a></code>. If the attribute
  487. is set to a value outside this range, it is clipped to the nearest legal value.
  488. <span class="big-issue">Or should it retain the previous value???</span>
  489. </p>
  490. <h6 id="characteristics-attributes"><span class=secno>2.3.2.5.</span> Characteristics</h6>
  491. <p>The DOM attribute <dfn id=hasaudio title=dom-media-hasaudio><code>hasAudio</code></dfn>
  492. returns a value that specifies whether the element has audio media.</p>
  493. <p>The DOM attribute <dfn id=hasvisual title=dom-media-hasvisual><code>hasVisual</code></dfn>
  494. returns a value that specifies whether the element can draw on the screen. An
  495. <code title=element-audio><a href="#audio">audio</a></code> element whose
  496. <code title="attr-media-src">src</code>
  497. attribute specifies a media resource that contains visual media shall return false since
  498. the visual media will not be rendered.</p>
  499. <h6 id="state-attributes"><span class=secno>2.3.2.6.</span> State</h6>
  500. <p>The DOM attribute <dfn id=mediastatus title=dom-media-mediastatus><code>mediaStatus</code></dfn>
  501. returns the current state of the media element taking into consideration its current loading
  502. progress and its playability. As loading progresses and playability changes, appropriate
  503. events (e.g., "mediaunderstandable", "mediapresentable", "load") should be fired. However,
  504. as it may be necessary to know the current state of the media element after state
  505. transitions have already occurred, the mediaStatus attribute can be retrieved to know the
  506. media element's current status.</p>
  507. <p>When the element is created the attribute must be set to 0. It can have the following
  508. values:</p>
  509. <dl>
  510. <dt>0 <dfn id=uninitialized title=dom-media-UNINITIALIZED><code>UNINITIALIZED</code></dfn>
  511. <dd>The initial value.
  512. <dt>1 <dfn id=error title=dom-media-ERROR><code>ERROR</code></dfn>
  513. <dd>This playability state indicates that some kind of error has occurred (which
  514. should also be signaled by an error event). One reason this state might be set is
  515. that the media file is invalid.
  516. <dt>2 <dfn id=understandable title=dom-media-UNDERSTANDABLE><code>UNDERSTANDABLE</code></dfn>
  517. <dd>Attributes of the media element are now available for retrieval (e.g.,
  518. <code title=dom-media-duration><a href="#duration">duration</a></code>). It however
  519. has not reached a state where it can render anything (e.g., an image if the media
  520. type is visual) or an attempt to play the content should be made.
  521. <dt>3 <dfn id=presentable title=dom-media-PRESENTABLE><code>PRESENTABLE</code></dfn>
  522. <dd>The media element has loaded sufficient media data to render at the current time
  523. (e.g., it can render the video frame at the current time). It has not however loaded
  524. sufficient media data so that setting the
  525. <code title=dom-media-currentrate><a href="#currentrate">currentRate</a></code>
  526. property to a non-zero value will render anything (video or audio) more.
  527. <dt>4 <dfn id=playable title=dom-media-PLAYABLE><code>PLAYABLE</code></dfn>
  528. <dd>The media element has loaded sufficient media data so that if the play rate was
  529. set to a non-zero value, time will advance.
  530. <dt>5 <dfn id=playthroughok title=dom-media-PLAYTHROUGHOK><code>PLAYTHROUGHOK</code></dfn>
  531. <dd>The media element has loaded sufficient media data and playback conditions
  532. (e.g., download rates, data rate of the media, playback rate) should allow for
  533. uninterrupted playback (i.e., no stalls) if the current playback rate is set to the
  534. value of playbackRate.
  535. <dt>6 <dfn id=loaded title=dom-media-LOADED><code>LOADED</code></dfn>
  536. <dd>All necessary media data for the media element is available (and no data will be
  537. evicted). This is not strictly the same thing as all data for the media element's
  538. file or files is local, only that all data that can be referenced during playback
  539. will remain available for the life span of the element. To detect if all data
  540. across the media element's files is available, listen for the load event.
  541. </dl>
  542. <p>The <code title=dom-media-mediastatus><a href="#mediastatus">mediaStatus</a></code>
  543. attribute and associated events are useful to an implementor of a custom play controller as
  544. they can wait for <code title=dom-media-PLAYTHROUGHOK><a href="#playthroughok">PLAYTHROUGHOK</a></code>
  545. or <code title=dom-media-LOADED><a href="#loaded">LOADED</a></code> to know that autoplay may start. Likewise, if
  546. during playback, the playback catches up with download, one can pause playback by checking
  547. for a state less than <code title=dom-media-PLAYABLE><a href="#playable">PLAYABLE</a></code>.</p>
  548. <p>The mediaStatus state values are ordered so that as the media becomes more playable, the
  549. values increase. An effect of this is that to detect if the current playability allows for
  550. querying media properties (i.e., the media element is "understandable"), one can compare the current
  551. <code title=dom-media-mediastatus><a href="#mediastatus">mediaStatus</a></code> against
  552. <code title=dom-media-UNDERSTANDABLE><a href="#understandable">UNDERSTANDABLE</a></code>.
  553. If equal to or greater than <code title=dom-media-UNDERSTANDABLE><a href="#understandable">UNDERSTANDABLE</a></code>
  554. , then properties can be queried.
  555. If less than <code title=dom-media-UNDERSTANDABLE><a href="#understandable">UNDERSTANDABLE</a></code>
  556. (including the <code title=dom-media-ERROR><a href="#error">ERROR</a></code> state),
  557. properties should not be requested.</p>
  558. <p>The following state chart illustrates the possible <code title=dom-media-mediastatus>mediaStatus</code>
  559. state transitions.</p>
  560. <img src="movie-status-states.png" alt="State chart" />
  561. <p>It is possible for the states reported by <code title=dom-media-mediastatus><a href="#mediastatus">mediaStatus</a></code>
  562. to regress as the result of a seek, a change in network conditions (bandwidth changes or
  563. connection drops), changes in play rate/direction, changes in looping, cache unloading, etc.
  564. Such changes from any of the presentable/playable states (i.e.,
  565. <code title=dom-media-PRESENTABLE><a href="#presentable">PRESENTABLE</a></code>,
  566. <code title=dom-media-PLAYABLE><a href="#playable">PLAYABLE</a></code>,
  567. <code title=dom-media-PLAYTHROUGHOK><a href="#playthroughok">PLAYTHROUGHOK</a></code>)
  568. may push the media element's current media status to an earlier state,
  569. including <code title=dom-media-UNDERSTANDABLE><a href="#understandable">UNDERSTANDABLE</a></code>.
  570. <p>To accommodate media playback scenarios where previously loaded media data may be evicted
  571. during playback (e.g., because of limited caching by the user agent), the
  572. <code title=dom-media-LOADED><a href="#loaded">LOADED</a></code> state (and
  573. the firing of the "load" event) may only occur if all data becomes loaded and cannot be
  574. evicted during the life of the media element.</p>
  575. <h6 id="time-triggers"><span class=secno>2.3.2.7.</span> Time triggers</h6>
  576. <p>The <dfn id=settimetrigger title=dom-media-settimetrigger>
  577. <code>setTimeTrigger(<var title="">time</var>, <var title="">listener</var>)</code>
  578. </dfn> method registers a callback for when the media element plays through
  579. <var title="">time</var>. <var title="">listener</var> must be an object implementing
  580. the <code><a href="#time-trigger-listener">TimeTriggerListener</a></code> interface, or a JavaScript
  581. function.</p>
  582. <p>The <dfn id=removetimetrigger title=dom-media-removetimetrigger>
  583. <code>removeTimeTrigger(<var title="">time</var>, <var title="">listener</var>)</code>
  584. </dfn> method removes a previously registered <code><a href="#time-trigger-listener">
  585. TimeTriggerListener</a></code> from a media element.</p>
  586. <h2 id="events"><span class="secno">3.</span> Events</h2>
  587. <h3 id=load-events><span class=secno>3.1.</span> Media loading events</h3>
  588. <div class='event-definition'>
  589. <dl>
  590. <dt><dfn id=eventdef-event-abort class=event-abort><strong>abort</strong></dfn>
  591. <dd>
  592. <table >
  593. <tr><th><em>Type:</em><td>abort
  594. <tr><th><em>Namespace:</em><td>TBD
  595. <tr><th><em>Interface:</em><td><a href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-Event">Event</a>
  596. <tr><th><em>Cancelable:</em><td>No
  597. <tr><th><em>Bubbles:</em><td>Yes
  598. <tr><th><em>Target:</em><td>Element
  599. <tr><th><em>Context info:</em><td>None
  600. </table>
  601. <p>The <code title=event-abort>abort</code> event is fired when loading of the media
  602. element is canceled.
  603. </dl>
  604. </div>
  605. <div class='event-definition'>
  606. <dl>
  607. <dt><dfn id=eventdef-event-mediarendererror class=event-mediarendererror><strong>mediarendererror</strong></dfn>
  608. <dd>
  609. <table >
  610. <tr><th><em>Type:</em><td>mediarendererror
  611. <tr><th><em>Namespace:</em><td>TBD
  612. <tr><th><em>Interface:</em><td><a href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-Event">Event</a>
  613. <tr><th><em>Cancelable:</em><td>No
  614. <tr><th><em>Bubbles:</em><td>Yes
  615. <tr><th><em>Target:</em><td>Element
  616. <tr><th><em>Context info:</em><td>None
  617. </table>
  618. <p>The <code title=event-mediarendererror>mediarendererror</code> event is fired if a
  619. non-fatal error occurs during media playback that prevents the media resource from being
  620. completely rendered. For example: media type is not supported, i.e. the resource
  621. contains one or more renderable substreams of types not supported by the user agent; a
  622. media format is not supported, i.e. a renderable substream of a type that's supported by
  623. the user agent contains media that can't be decoded; or media can't be rendered under
  624. current constraints. Here there's no problem with media types or formats but the
  625. resource can't be rendered anyway, possibly temporarily.
  626. </dl>
  627. </div>
  628. <div class='event-definition'>
  629. <dl>
  630. <dt><dfn id=eventdef-event-error class=event-error><strong>error</strong></dfn>
  631. <dd>
  632. <table >
  633. <tr><th><em>Type:</em><td>error
  634. <tr><th><em>Namespace:</em><td>TBD
  635. <tr><th><em>Interface:</em><td><a href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-Event">Event</a>
  636. <tr><th><em>Cancelable:</em><td>No
  637. <tr><th><em>Bubbles:</em><td>Yes
  638. <tr><th><em>Target:</em><td>Element
  639. <tr><th><em>Context info:</em><td>None
  640. </table>
  641. <p>The <code title=event-error>error</code> event is fired if an error occurs during
  642. the loading of the media element. This event should not be fired if the loading was
  643. canceled; the abort error should be fired in that case.
  644. </dl>
  645. </div>
  646. <div class='event-definition'>
  647. <dl>
  648. <dt><dfn id=eventdef-event-load class=event-load><strong>load</strong></dfn>
  649. <dd>
  650. <table >
  651. <tr><th><em>Type:</em><td>load
  652. <tr><th><em>Namespace:</em><td>TBD
  653. <tr><th><em>Interface:</em><td><a href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-Event">Event</a>
  654. <tr><th><em>Cancelable:</em><td>No
  655. <tr><th><em>Bubbles:</em><td>No
  656. <tr><th><em>Target:</em><td>Element
  657. <tr><th><em>Context info:</em><td>None
  658. </table>
  659. <p>The <code title=event-load>load</code> event is fired when the media resource is
  660. completely loaded by the client. It should only be fired if the data will remain
  661. available for the life span of the element. Video and audio elements should be
  662. excluded from consideration for the document "load" event.
  663. </dl>
  664. </div>
  665. <code title=event-load><a href=#eventdef-event-load">load</a></code>
  666. <div class='event-definition'>
  667. <dl>
  668. <dt><dfn id=eventdef-event-ratechange class=event-ratechange><strong>ratechange</strong></dfn>
  669. <dd>
  670. <table >
  671. <tr><th><em>Type:</em><td>ratechange
  672. <tr><th><em>Namespace:</em><td>TBD
  673. <tr><th><em>Interface:</em><td><a href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-Event">Event</a>
  674. <tr><th><em>Cancelable:</em><td>No
  675. <tr><th><em>Bubbles:</em><td>No
  676. <tr><th><em>Target:</em><td>Element
  677. <tr><th><em>Context info:</em><td>None
  678. </table>
  679. <p>The <code title=event-ratechange>ratechange</code> event is fired soon after the
  680. <code title=dom-media-currentrate><a href="#currentrate">currentRate</a></code> property
  681. is changed from its previous value. Inspect the object's currentRate property for the new rate
  682. value. To detect that playback is starting, check that the new
  683. <code title=dom-media-currentrate><a href="#currentrate">currentRate</a></code> is
  684. non-zero; to detect that playback has paused, check that the new
  685. <code title=dom-media-currentrate><a href="#currentrate">currentRate</a></code> is zero (0).
  686. </dl>
  687. </div>
  688. <div class='event-definition'>
  689. <dl>
  690. <dt><dfn id=eventdef-event-volumechange class=event-volumechange><strong>volumechange</strong></dfn>
  691. <dd>
  692. <table >
  693. <tr><th><em>Type:</em><td>volumechange
  694. <tr><th><em>Namespace:</em><td>TBD
  695. <tr><th><em>Interface:</em><td><a href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-Event">Event</a>
  696. <tr><th><em>Cancelable:</em><td>No
  697. <tr><th><em>Bubbles:</em><td>No
  698. <tr><th><em>Target:</em><td>Element
  699. <tr><th><em>Context info:</em><td>None
  700. </table>
  701. <p>The <code title=event-volumechange>volumechange</code> event is fired after either
  702. the <code title=dom-media-volume><a href="#volume">volume</a></code>
  703. or the <code title=dom-media-muted><a href="#muted">muted</a></code> property has changed from its
  704. previous value. Inspect the object's properties for the new value.
  705. </dl>
  706. </div>
  707. <div class='event-definition'>
  708. <dl>
  709. <dt><dfn id=eventdef-event-durationchange class=event-durationchange><strong>durationchange</strong></dfn>
  710. <dd>
  711. <table >
  712. <tr><th><em>Type:</em><td>durationchange
  713. <tr><th><em>Namespace:</em><td>TBD
  714. <tr><th><em>Interface:</em><td><a href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-Event">Event</a>
  715. <tr><th><em>Cancelable:</em><td>No
  716. <tr><th><em>Bubbles:</em><td>No
  717. <tr><th><em>Target:</em><td>Element
  718. <tr><th><em>Context info:</em><td>None
  719. </table>
  720. <p>The <code title=event-durationchange>durationchange</code> event is fired if the
  721. <code title=dom-media-duration><a href="#duration">duration</a></code>
  722. property of the media element changes. One reason this might occur is when the
  723. <code title=dom-media-duration><a href="#duration">duration</a></code> for the media element
  724. which was previously estimated becomes known during loading. It might change for
  725. other reasons that are not defined here.
  726. </dl>
  727. </div>
  728. <div class='event-definition'>
  729. <dl>
  730. <dt><dfn id=eventdef-event-availabledurationchange class=event-availabledurationchange><strong>availabledurationchange</strong></dfn>
  731. <dd>
  732. <table >
  733. <tr><th><em>Type:</em><td>availabledurationchange
  734. <tr><th><em>Namespace:</em><td>TBD
  735. <tr><th><em>Interface:</em><td><a href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-Event">Event</a>
  736. <tr><th><em>Cancelable:</em><td>No
  737. <tr><th><em>Bubbles:</em><td>No
  738. <tr><th><em>Target:</em><td>Element
  739. <tr><th><em>Context info:</em><td>None
  740. </table>
  741. <p>The <code title=event-availabledurationchange>availabledurationchange</code>
  742. event is fired if the <code title=dom-media-availableduration><a href="#availableduration">availableduration</a></code>
  743. property of the media element changes. One reason this might occur is during progressive
  744. download as more media is downloaded. It might change for other reasons that are not
  745. defined here.
  746. </dl>
  747. <p class="big-issue">How often should the availabledurationchange event fire? Too often and we
  748. waste a lot of cycles, too infrequently and the UI can get out of sync with reality.
  749. Specifying a minimum time interval, eg. "at least once a second", is wasteful in a long file
  750. when the play head is not near the available duration, but useful when the two are close...
  751. </p>
  752. </div>
  753. <div class='event-definition'>
  754. <dl>
  755. <dt><dfn id=eventdef-event-loop class=event-loop><strong>loop</strong></dfn>
  756. <dd>
  757. <table >
  758. <tr><th><em>Type:</em><td>loop
  759. <tr><th><em>Namespace:</em><td>TBD
  760. <tr><th><em>Interface:</em><td><a href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-Event">Event</a>
  761. <tr><th><em>Cancelable:</em><td>No
  762. <tr><th><em>Bubbles:</em><td>No
  763. <tr><th><em>Target:</em><td>Element
  764. <tr><th><em>Context info:</em><td>None
  765. </table>
  766. <p>The <code title=event-loop>loop</code> event is fired when the media is playing
  767. through a loop prior to its final loop according to its <code title=dom-media-loopcount>
  768. <a href="#loopcount">loopCount</a></code>.
  769. </dl>
  770. </div>
  771. <div class='event-definition'>
  772. <dl>
  773. <dt><dfn id=eventdef-event-playcomplete class=event-playcomplete><strong>playcomplete</strong></dfn>
  774. <dd>
  775. <table >
  776. <tr><th><em>Type:</em><td>playcomplete
  777. <tr><th><em>Namespace:</em><td>TBD
  778. <tr><th><em>Interface:</em><td><a href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-Event">Event</a>
  779. <tr><th><em>Cancelable:</em><td>No
  780. <tr><th><em>Bubbles:</em><td>No
  781. <tr><th><em>Target:</em><td>Element
  782. <tr><th><em>Context info:</em><td>None
  783. </table>
  784. <p>The <code title=event-playcomplete>playcomplete</code> event is fired when the element
  785. automatically stops playback because it reaches the limit of playback (i.e., the value of the
  786. <code title=dom-media-endtime><a href="#endtime">endTime</a></code>
  787. property if playing forward, <code title=dom-media-starttime><a href="#starttime">startTime</a></code>
  788. if playing backward) and the media is playing through its final repetition, according to its
  789. <code title=dom-media-loopcount><a href="#loopcount">loopCount</a></code>.
  790. </dl>
  791. </div>
  792. <div class='event-definition'>
  793. <dl>
  794. <dt><dfn id=eventdef-event-timejump class=event-timejump><strong>timejump</strong></dfn>
  795. <dd>
  796. <table >
  797. <tr><th><em>Type:</em><td>timejump
  798. <tr><th><em>Namespace:</em><td>TBD
  799. <tr><th><em>Interface:</em><td><a href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-Event">Event</a>
  800. <tr><th><em>Cancelable:</em><td>No
  801. <tr><th><em>Bubbles:</em><td>No
  802. <tr><th><em>Target:</em><td>Element
  803. <tr><th><em>Context info:</em><td>None
  804. </table>
  805. <p>The <code title=event-timechange>timechange</code> event is fired when the media element's
  806. current time changes by any other means than playback at the current rate. This can be either by an explicit
  807. change to the <code title=dom-media-currenttime><a href="#currenttime">currentTime</a></code>
  808. property (e.g., under script control) or by any other means than playback at the current rate.
  809. In other words, this event is not fired during play back but is fired if the
  810. <code title=dom-media-currenttime><a href="#currenttime">currentTime</a></code>
  811. property is explicitly changed. Setting the <code title=dom-media-currenttime>
  812. <a href="#currenttime">currentTime</a></code> to its current value shall not fire the timechange event.
  813. </dl>
  814. </div>
  815. <h3 id=playback-events><span class=secno>3.2.</span> Media playback events</h3>
  816. <div class='event-definition'>
  817. <dl>
  818. <dt><dfn id=eventdef-event-mediaunderstandable class=event-mediaunderstandable><strong>mediaunderstandable</strong></dfn>
  819. <dd>
  820. <table >
  821. <tr><th><em>Type:</em><td>mediaunderstandable
  822. <tr><th><em>Namespace:</em><td>TBD
  823. <tr><th><em>Interface:</em><td><a href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-Event">Event</a>
  824. <tr><th><em>Cancelable:</em><td>No
  825. <tr><th><em>Bubbles:</em><td>No
  826. <tr><th><em>Target:</em><td>Element
  827. <tr><th><em>Context info:</em><td>None
  828. </table>
  829. <p>The <code title=event-mediaunderstandable>mediaunderstandable</code> event is
  830. fired when the element's <code title=dom-media-mediastatus>
  831. <a href="#mediastatus">mediaStatus</a></code> transitions to or
  832. past the UNDERSTANDABLE state. This indicates that attributes of the object that are
  833. dependent upon the media resource or the loading of the resource (e.g.,
  834. <code title=dom-media-duration><a href="#duration">duration</a></code>,
  835. <code title=dom-media-availableduration><a href="#availableduration">availableDuration</a></code>,
  836. <code title=dom-media-hasaudio><a href="#hasaudio">hasAudio</a></code>, etc)
  837. can be retrieved. The UNDERSTANDABLE state does not
  838. indicate that the element can render anything (e.g., drawing a frame if the media
  839. is visual or decoding audio if it has audio).
  840. </dl>
  841. </div>
  842. <div class='event-definition'>
  843. <dl>
  844. <dt><dfn id=eventdef-event-mediapresentable class=event-mediapresentable><strong>mediapresentable</strong></dfn>
  845. <dd>
  846. <table >
  847. <tr><th><em>Type:</em><td>mediapresentable
  848. <tr><th><em>Namespace:</em><td>TBD
  849. <tr><th><em>Interface:</em><td><a href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-Event">Event</a>
  850. <tr><th><em>Cancelable:</em><td>No
  851. <tr><th><em>Bubbles:</em><td>No
  852. <tr><th><em>Target:</em><td>Element
  853. <tr><th><em>Context info:</em><td>None
  854. </table>
  855. <p>The <code title=event-mediapresentable>mediapresentable</code> event is fired
  856. when the element's <code title=dom-media-mediastatus>
  857. <a href="#mediastatus">mediaStatus</a></code> transitions to or past the
  858. the PRESENTABLE state. This indicates that the media object can render something at
  859. the current time (e.g., it can render the video frame at the current time). The
  860. PRESENTABLE state does not however indicate that it has loaded sufficient media so
  861. that setting the <code title=dom-media-currentrate><a href="#currentrate">currentRate</a></code>
  862. property to a non-zero value will render anything more (video or audio).
  863. </dl>
  864. </div>
  865. <div class='event-definition'>
  866. <dl>
  867. <dt><dfn id=eventdef-event-mediaplayable class=event-mediaplayable><strong>mediaplayable</strong></dfn>
  868. <dd>
  869. <table >
  870. <tr><th><em>Type:</em><td>mediaplayable
  871. <tr><th><em>Namespace:</em><td>TBD
  872. <tr><th><em>Interface:</em><td><a href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-Event">Event</a>
  873. <tr><th><em>Cancelable:</em><td>No
  874. <tr><th><em>Bubbles:</em><td>No
  875. <tr><th><em>Target:</em><td>Element
  876. <tr><th><em>Context info:</em><td>None
  877. </table>
  878. <p>The <code title=event-mediaplayable>mediaplayable</code> event is fired
  879. when the element's <code title=dom-media-mediastatus>
  880. <a href="#mediastatus">mediaStatus</a></code> transitions to or past the
  881. PLAYABLE state. This indicates the object has loaded sufficient media data so that
  882. if the <code title=dom-media-currentrate><a href="#currentrate">currentRate</a></code>
  883. is set to a non-zero value, time will advance. An example usage
  884. would be not to allow the play button in a custom movie controller to take effect
  885. unless this state or better has been reached.
  886. </dl>
  887. </div>
  888. <div class='event-definition'>
  889. <dl>
  890. <dt><dfn id=eventdef-event-mediacanplaythrough class=event-mediacanplaythrough><strong>mediacanplaythrough</strong></dfn>
  891. <dd>
  892. <table >
  893. <tr><th><em>Type:</em><td>mediacanplaythrough
  894. <tr><th><em>Namespace:</em><td>TBD
  895. <tr><th><em>Interface:</em><td><a href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-Event">Event</a>
  896. <tr><th><em>Cancelable:</em><td>No
  897. <tr><th><em>Bubbles:</em><td>No
  898. <tr><th><em>Target:</em><td>Element
  899. <tr><th><em>Context info:</em><td>None
  900. </table>
  901. <p>The <code title=event-mediacanplaythrough>mediacanplaythrough</code> event is
  902. fired when the element's <code title=dom-media-mediastatus>
  903. <a href="#mediastatus">mediaStatus</a></code> transitions to
  904. or past the PLAYTHROUGHOK state. This indicates the object has loaded sufficient
  905. media data and playback conditions (e.g., download rates, data rate of the media,
  906. playback rate) are sufficient to allow for uninterrupted playback (i.e., no stalls)
  907. if the current playback rate is set to the value of <code title=dom-media-playrate>
  908. <a href="#playrate">playRate</a></code>.
  909. </dl>
  910. </div>
  911. <h2 id="window-additions"><span class="secno">4.</span> WindowHTML Additions</h2>
  912. <p>The <code><a href="#windowhtml">WindowHTML</a></code> object must
  913. provide the following constructors:
  914. <dl>
  915. <dt><dfn id=audio-constructor title=dom-audio-constructor><code>Audio()</code></dfn>
  916. <dd>
  917. <p>Constructs an <code><a href="#html-audio-element">
  918. HTMLAudioElement</a></code> object (a new <code title=element-audio><a href="#audio">audio</a></code>
  919. element).
  920. <dt><dfn id=video-constructor title=dom-video-constructor><code>Video()</code></dfn>
  921. <dt><dfn id=video-constructor-w title=dom-video-constructor-w><code>Video(in unsigned long <var
  922. title="">width</var>)</code></dfn>
  923. <dt><dfn id=video-constructor-wh title=dom-video-constructor-wh><code>Video(in unsigned long <var
  924. title="">width</var>, in unsigned long <var title="">height</var>)</code></dfn>
  925. <dd>
  926. <p>Constructs an <code><a href="#html-video-element">
  927. HTMLVideoElement</a></code> object (a new
  928. <code title=element-video><a href="#video">video</a></code> element). If the <var title="">width</var>
  929. and <var title="">height</var> arguments are both present, the new object's <code title=video-element-width>
  930. <a href="#dom-video-width">width</a></code> and <code title=video-element-height><a href="#dom-video-height">
  931. height</a></code> content attributes must be set to <var title="">width</var> and
  932. <var title="">height</var>. If only the <var title="">width</var> argument is present,
  933. the new object's <code title=video-element-width><a href="#dom-video-width">width</a></code> content
  934. attribute must be set to <var title="">width</var> and the <code title=video-element-height>
  935. <a href="#dom-video-height">height</a></code> content attribute must be set to a value that
  936. maintains the media resource's intrinsic aspect ratio.
  937. </dl>
  938. <h2 class=no-num id=references>References</h2>
  939. <p>All references are normative unless marked "Informative".
  940. <dl>
  941. <dt id=refsCSS21>[CSS21]
  942. <dd><cite><a href="http://www.w3.org/TR/2006/WD-CSS21-20061106">
  943. Cascading Style Sheets, level 2 revision 1 CSS 2.1 Specification
  944. </a></cite>,
  945. H&aring;kon Wium Lie, Tantek &Ccedil;elik, Bert Bos, and Ian Hickson, Editors.
  946. World Wide Web Consortium, 06&nbsp;Nov&nbsp;2006.
  947. CSS 2.1 Specification is available at http://www.w3.org/TR/2006/WD-CSS21-20061106
  948. <dt id=refsRFC2046>[RFC2046]
  949. <dd><cite><a href="http://www.ietf.org/rfc/rfc2046">
  950. Multipurpose Internet Mail Extensions (MIME) Part Two: Media Types
  951. </a></cite>,
  952. N. Freed, N. Borenstein. IETF, November&nbsp;1996.
  953. RFC 2046 is available at http://www.ietf.org/rfc/rfc2046
  954. <dt id=refsRFC4281>[RFC4281]
  955. <dd><cite><a href="http://www.ietf.org/rfc/rfc4281">
  956. The Codecs Parameter for "Bucket" Media Types
  957. </a></cite>,
  958. R. Gellens, D. Singer, P. Frojdh. IETF, November&nbsp;2005.
  959. RFC 4281 is available at http://www.ietf.org/rfc/rfc4281
  960. </dl>
  961. <h2 class=no-num id=acknowledgements>Acknowledgements</h2>
  962. <p class="big-issue">Coming soon</p>
  963. </body>
  964. </html>