[html5] r5961 - [agiow] (0) Introduce a multitrack API for handling such use cases as sign-langu [...]
whatwg at whatwg.org
whatwg at whatwg.org
Mon Mar 21 03:50:26 PDT 2011
Author: ianh
Date: 2011-03-21 03:50:25 -0700 (Mon, 21 Mar 2011)
New Revision: 5961
Modified:
complete.html
index
source
Log:
[agiow] (0) Introduce a multitrack API for handling such use cases as sign-language PIP or director's commentary tracks. Also involves some minor changes to how the media element spec is written, to make it easier to integrate with the multitrack features. The multitrack part of this are hidden in the W3C copy so that I can include them in a change proposal for issue-152, per Sam's suggestion in private e-mail dated 2011-03-06.
Modified: complete.html
===================================================================
--- complete.html 2011-03-21 03:05:39 UTC (rev 5960)
+++ complete.html 2011-03-21 10:50:25 UTC (rev 5961)
@@ -589,27 +589,36 @@
<li><a href=#the-ready-states><span class=secno>4.8.10.7 </span>The ready states</a></li>
<li><a href=#playing-the-media-resource><span class=secno>4.8.10.8 </span>Playing the media resource</a></li>
<li><a href=#seeking><span class=secno>4.8.10.9 </span>Seeking</a></li>
- <li><a href=#timed-text-tracks><span class=secno>4.8.10.10 </span>Timed text tracks</a>
+ <li><a href=#media-resources-with-multiple-media-tracks><span class=secno>4.8.10.10 </span>Media resources with multiple media tracks</a>
<ol>
- <li><a href=#text-track-model><span class=secno>4.8.10.10.1 </span>Text track model</a></li>
- <li><a href=#sourcing-in-band-text-tracks><span class=secno>4.8.10.10.2 </span>Sourcing in-band text tracks</a></li>
- <li><a href=#sourcing-out-of-band-text-tracks><span class=secno>4.8.10.10.3 </span>Sourcing out-of-band text tracks</a></li>
- <li><a href=#guidelines-for-exposing-cues-in-various-formats-as-text-track-cues><span class=secno>4.8.10.10.4 </span>Guidelines for exposing cues in various formats as
+ <li><a href=#tracklist-objects><span class=secno>4.8.10.10.1 </span><code>TrackList</code> objects</a></li>
+ <li><a href=#selecting-specific-audio-and-video-tracks-declaratively><span class=secno>4.8.10.10.2 </span>Selecting specific audio and video tracks declaratively</a></ol></li>
+ <li><a href=#synchronising-multiple-media-elements><span class=secno>4.8.10.11 </span>Synchronising multiple media elements</a>
+ <ol>
+ <li><a href=#introduction-0><span class=secno>4.8.10.11.1 </span>Introduction</a></li>
+ <li><a href=#media-controllers><span class=secno>4.8.10.11.2 </span>Media controllers</a></li>
+ <li><a href=#assigning-a-media-controller-declaratively><span class=secno>4.8.10.11.3 </span>Assigning a media controller declaratively</a></ol></li>
+ <li><a href=#timed-text-tracks><span class=secno>4.8.10.12 </span>Timed text tracks</a>
+ <ol>
+ <li><a href=#text-track-model><span class=secno>4.8.10.12.1 </span>Text track model</a></li>
+ <li><a href=#sourcing-in-band-text-tracks><span class=secno>4.8.10.12.2 </span>Sourcing in-band text tracks</a></li>
+ <li><a href=#sourcing-out-of-band-text-tracks><span class=secno>4.8.10.12.3 </span>Sourcing out-of-band text tracks</a></li>
+ <li><a href=#guidelines-for-exposing-cues-in-various-formats-as-text-track-cues><span class=secno>4.8.10.12.4 </span>Guidelines for exposing cues in various formats as
text track cues</a></li>
- <li><a href=#text-track-api><span class=secno>4.8.10.10.5 </span>Text track API</a></li>
- <li><a href=#cue-events><span class=secno>4.8.10.10.6 </span>Event definitions</a></ol></li>
- <li><a href=#webvtt-0><span class=secno>4.8.10.11 </span>WebVTT</a>
+ <li><a href=#text-track-api><span class=secno>4.8.10.12.5 </span>Text track API</a></li>
+ <li><a href=#cue-events><span class=secno>4.8.10.12.6 </span>Event definitions</a></ol></li>
+ <li><a href=#webvtt-0><span class=secno>4.8.10.13 </span>WebVTT</a>
<ol>
- <li><a href=#syntax-0><span class=secno>4.8.10.11.1 </span>Syntax</a></li>
- <li><a href=#parsing-0><span class=secno>4.8.10.11.2 </span>Parsing</a></li>
- <li><a href=#webvtt-cue-text-parsing-rules><span class=secno>4.8.10.11.3 </span>WebVTT cue text parsing rules</a></li>
- <li><a href=#webvtt-cue-text-dom-construction-rules><span class=secno>4.8.10.11.4 </span>WebVTT cue text DOM construction rules</a></ol></li>
- <li><a href=#user-interface><span class=secno>4.8.10.12 </span>User interface</a></li>
- <li><a href=#time-ranges><span class=secno>4.8.10.13 </span>Time ranges</a></li>
- <li><a href=#mediaevents><span class=secno>4.8.10.14 </span>Event summary</a></li>
- <li><a href=#security-and-privacy-considerations><span class=secno>4.8.10.15 </span>Security and privacy considerations</a></li>
- <li><a href=#best-practices-for-authors-using-media-elements><span class=secno>4.8.10.16 </span>Best practices for authors using media elements</a></li>
- <li><a href=#best-practices-for-implementors-of-media-elements><span class=secno>4.8.10.17 </span>Best practices for implementors of media elements</a></ol></li>
+ <li><a href=#syntax-0><span class=secno>4.8.10.13.1 </span>Syntax</a></li>
+ <li><a href=#parsing-0><span class=secno>4.8.10.13.2 </span>Parsing</a></li>
+ <li><a href=#webvtt-cue-text-parsing-rules><span class=secno>4.8.10.13.3 </span>WebVTT cue text parsing rules</a></li>
+ <li><a href=#webvtt-cue-text-dom-construction-rules><span class=secno>4.8.10.13.4 </span>WebVTT cue text DOM construction rules</a></ol></li>
+ <li><a href=#user-interface><span class=secno>4.8.10.14 </span>User interface</a></li>
+ <li><a href=#time-ranges><span class=secno>4.8.10.15 </span>Time ranges</a></li>
+ <li><a href=#mediaevents><span class=secno>4.8.10.16 </span>Event summary</a></li>
+ <li><a href=#security-and-privacy-considerations><span class=secno>4.8.10.17 </span>Security and privacy considerations</a></li>
+ <li><a href=#best-practices-for-authors-using-media-elements><span class=secno>4.8.10.18 </span>Best practices for authors using media elements</a></li>
+ <li><a href=#best-practices-for-implementors-of-media-elements><span class=secno>4.8.10.19 </span>Best practices for implementors of media elements</a></ol></li>
<li><a href=#the-canvas-element><span class=secno>4.8.11 </span>The <code>canvas</code> element</a>
<ol>
<li><a href=#2dcontext><span class=secno>4.8.11.1 </span>The 2D context</a>
@@ -659,7 +668,7 @@
<li><a href=#examples-0><span class=secno>4.9.13 </span>Examples</a></ol></li>
<li><a href=#forms><span class=secno>4.10 </span>Forms</a>
<ol>
- <li><a href=#introduction-0><span class=secno>4.10.1 </span>Introduction</a>
+ <li><a href=#introduction-1><span class=secno>4.10.1 </span>Introduction</a>
<ol>
<li><a href="#writing-a-form's-user-interface"><span class=secno>4.10.1.1 </span>Writing a form's user interface</a></li>
<li><a href=#implementing-the-server-side-processing-for-a-form><span class=secno>4.10.1.2 </span>Implementing the server-side processing for a form</a></li>
@@ -741,7 +750,7 @@
<li><a href=#security-forms><span class=secno>4.10.21.4 </span>Security</a></ol></li>
<li><a href=#form-submission><span class=secno>4.10.22 </span>Form submission</a>
<ol>
- <li><a href=#introduction-1><span class=secno>4.10.22.1 </span>Introduction</a></li>
+ <li><a href=#introduction-2><span class=secno>4.10.22.1 </span>Introduction</a></li>
<li><a href=#implicit-submission><span class=secno>4.10.22.2 </span>Implicit submission</a></li>
<li><a href=#form-submission-algorithm><span class=secno>4.10.22.3 </span>Form submission algorithm</a></li>
<li><a href=#constructing-form-data-set><span class=secno>4.10.22.4 </span>Constructing the form data set</a></li>
@@ -773,7 +782,7 @@
<li><a href=#using-the-accesskey-attribute-to-define-a-command-on-other-elements><span class=secno>4.11.5.8 </span>Using the <code title=attr-accesskey>accesskey</code> attribute to define a command on other elements</a></ol></ol></li>
<li><a href=#links><span class=secno>4.12 </span>Links</a>
<ol>
- <li><a href=#introduction-2><span class=secno>4.12.1 </span>Introduction</a></li>
+ <li><a href=#introduction-3><span class=secno>4.12.1 </span>Introduction</a></li>
<li><a href=#links-created-by-a-and-area-elements><span class=secno>4.12.2 </span>Links created by <code>a</code> and <code>area</code> elements</a></li>
<li><a href=#following-hyperlinks><span class=secno>4.12.3 </span>Following hyperlinks</a>
<ol>
@@ -813,7 +822,7 @@
<li><a href=#pseudo-classes><span class=secno>4.14.2 </span>Pseudo-classes</a></ol></ol></li>
<li><a href=#microdata><span class=secno>5 </span>Microdata</a>
<ol>
- <li><a href=#introduction-3><span class=secno>5.1 </span>Introduction</a>
+ <li><a href=#introduction-4><span class=secno>5.1 </span>Introduction</a>
<ol>
<li><a href=#overview><span class=secno>5.1.1 </span>Overview</a></li>
<li><a href=#the-basic-syntax><span class=secno>5.1.2 </span>The basic syntax</a></li>
@@ -903,7 +912,7 @@
<li><a href=#aborting-a-document-load><span class=secno>6.5.11 </span>Aborting a document load</a></ol></li>
<li><a href=#offline><span class=secno>6.6 </span>Offline Web applications</a>
<ol>
- <li><a href=#introduction-4><span class=secno>6.6.1 </span>Introduction</a>
+ <li><a href=#introduction-5><span class=secno>6.6.1 </span>Introduction</a>
<ol>
<li><a href=#appcacheevents><span class=secno>6.6.1.1 </span>Event summary</a></ol></li>
<li><a href=#appcache><span class=secno>6.6.2 </span>Application caches</a></li>
@@ -923,7 +932,7 @@
<ol>
<li><a href=#scripting><span class=secno>7.1 </span>Scripting</a>
<ol>
- <li><a href=#introduction-5><span class=secno>7.1.1 </span>Introduction</a></li>
+ <li><a href=#introduction-6><span class=secno>7.1.1 </span>Introduction</a></li>
<li><a href=#enabling-and-disabling-scripting><span class=secno>7.1.2 </span>Enabling and disabling scripting</a></li>
<li><a href=#processing-model-1><span class=secno>7.1.3 </span>Processing model</a>
<ol>
@@ -971,7 +980,7 @@
<li><a href=#element-level-focus-apis><span class=secno>8.3.4 </span>Element-level focus APIs</a></ol></li>
<li><a href=#assigning-keyboard-shortcuts><span class=secno>8.4 </span>Assigning keyboard shortcuts</a>
<ol>
- <li><a href=#introduction-6><span class=secno>8.4.1 </span>Introduction</a></li>
+ <li><a href=#introduction-7><span class=secno>8.4.1 </span>Introduction</a></li>
<li><a href=#the-accesskey-attribute><span class=secno>8.4.2 </span>The <code>accesskey</code> attribute</a></li>
<li><a href=#processing-model-3><span class=secno>8.4.3 </span>Processing model</a></ol></li>
<li><a href=#contenteditable><span class=secno>8.5 </span>The <code title=attr-contenteditable>contenteditable</code> attribute</a>
@@ -981,7 +990,7 @@
<li><a href=#spelling-and-grammar-checking><span class=secno>8.6 </span>Spelling and grammar checking</a></li>
<li><a href=#dnd><span class=secno>8.7 </span>Drag and drop</a>
<ol>
- <li><a href=#introduction-7><span class=secno>8.7.1 </span>Introduction</a></li>
+ <li><a href=#introduction-8><span class=secno>8.7.1 </span>Introduction</a></li>
<li><a href=#the-drag-data-store><span class=secno>8.7.2 </span>The drag data store</a></li>
<li><a href=#the-datatransfer-interface><span class=secno>8.7.3 </span>The <code>DataTransfer</code> interface</a>
<ol>
@@ -1004,7 +1013,7 @@
<li><a href=#editing-apis><span class=secno>8.9 </span>Editing APIs</a></ol></li>
<li><a href=#video-conferencing-and-peer-to-peer-communication><span class=secno>9 </span>Video conferencing and peer-to-peer communication</a>
<ol>
- <li><a href=#introduction-8><span class=secno>9.1 </span>Introduction</a></li>
+ <li><a href=#introduction-9><span class=secno>9.1 </span>Introduction</a></li>
<li><a href=#obtaining-local-multimedia-content><span class=secno>9.2 </span>Obtaining local multimedia content</a></li>
<li><a href=#stream-api><span class=secno>9.3 </span>Stream API</a></li>
<li><a href=#peer-to-peer-connections><span class=secno>9.4 </span>Peer-to-peer connections</a></li>
@@ -1014,7 +1023,7 @@
<li><a href=#event-summary><span class=secno>9.8 </span>Event Summary</a></ol></li>
<li><a href=#workers><span class=secno>10 </span>Web workers</a>
<ol>
- <li><a href=#introduction-9><span class=secno>10.1 </span>Introduction</a>
+ <li><a href=#introduction-10><span class=secno>10.1 </span>Introduction</a>
<ol>
<li><a href=#scope-0><span class=secno>10.1.1 </span>Scope</a></li>
<li><a href=#tutorial><span class=secno>10.1.2 </span>Tutorial</a>
@@ -1075,7 +1084,7 @@
<li><a href=#garbage-collection-1><span class=secno>11.3.3.2 </span>Garbage collection</a></ol></ol></li>
<li><a href=#web-messaging><span class=secno>11.4 </span>Cross-document messaging</a>
<ol>
- <li><a href=#introduction-10><span class=secno>11.4.1 </span>Introduction</a></li>
+ <li><a href=#introduction-11><span class=secno>11.4.1 </span>Introduction</a></li>
<li><a href=#security-postmsg><span class=secno>11.4.2 </span>Security</a>
<ol>
<li><a href=#authors><span class=secno>11.4.2.1 </span>Authors</a></li>
@@ -1083,14 +1092,14 @@
<li><a href=#posting-messages><span class=secno>11.4.3 </span>Posting messages</a></ol></li>
<li><a href=#channel-messaging><span class=secno>11.5 </span>Channel messaging</a>
<ol>
- <li><a href=#introduction-11><span class=secno>11.5.1 </span>Introduction</a></li>
+ <li><a href=#introduction-12><span class=secno>11.5.1 </span>Introduction</a></li>
<li><a href=#message-channels><span class=secno>11.5.2 </span>Message channels</a></li>
<li><a href=#message-ports><span class=secno>11.5.3 </span>Message ports</a>
<ol>
<li><a href=#ports-and-garbage-collection><span class=secno>11.5.3.1 </span>Ports and garbage collection</a></ol></ol></ol></li>
<li><a href=#webstorage><span class=secno>12 </span>Web storage</a>
<ol>
- <li><a href=#introduction-12><span class=secno>12.1 </span>Introduction</a></li>
+ <li><a href=#introduction-13><span class=secno>12.1 </span>Introduction</a></li>
<li><a href=#storage><span class=secno>12.2 </span>The API</a>
<ol>
<li><a href=#the-storage-interface><span class=secno>12.2.1 </span>The <code>Storage</code> interface</a></li>
@@ -1269,10 +1278,10 @@
<li><a href=#parsing-xhtml-fragments><span class=secno>14.4 </span>Parsing XHTML fragments</a></ol></li>
<li><a href=#rendering><span class=secno>15 </span>Rendering</a>
<ol>
- <li><a href=#introduction-13><span class=secno>15.1 </span>Introduction</a></li>
+ <li><a href=#introduction-14><span class=secno>15.1 </span>Introduction</a></li>
<li><a href=#the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>15.2 </span>The CSS user agent style sheet and presentational hints</a>
<ol>
- <li><a href=#introduction-14><span class=secno>15.2.1 </span>Introduction</a></li>
+ <li><a href=#introduction-15><span class=secno>15.2.1 </span>Introduction</a></li>
<li><a href=#display-types><span class=secno>15.2.2 </span>Display types</a></li>
<li><a href=#margins-and-padding><span class=secno>15.2.3 </span>Margins and padding</a></li>
<li><a href=#alignment><span class=secno>15.2.4 </span>Alignment</a></li>
@@ -1298,7 +1307,7 @@
<li><a href=#toolbars-0><span class=secno>15.3.6 </span>Toolbars</a></ol></li>
<li><a href=#bindings><span class=secno>15.4 </span>Bindings</a>
<ol>
- <li><a href=#introduction-15><span class=secno>15.4.1 </span>Introduction</a></li>
+ <li><a href=#introduction-16><span class=secno>15.4.1 </span>Introduction</a></li>
<li><a href=#the-button-element-0><span class=secno>15.4.2 </span>The <code>button</code> element</a></li>
<li><a href=#the-details-element-0><span class=secno>15.4.3 </span>The <code>details</code> element</a></li>
<li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>15.4.4 </span>The <code>input</code> element as a text entry widget</a></li>
@@ -24826,6 +24835,7 @@
<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>
+<!--CONTROLLER--> <dd><code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code></dd><!--CONTROLLER-->
<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>
@@ -24864,7 +24874,11 @@
whose <a href=#media-data>media data</a> is ostensibly video data, possibly
with associated audio data.</p>
- <p>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
+ <p>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>,
+<!--CONTROLLER-->
+ <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code>,
+<!--CONTROLLER-->
+ <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>.</p>
@@ -24954,7 +24968,8 @@
Similarly, any audio associated with the <a href=#media-resource>media resource</a>
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>.</p>
+ playback position</a>, at the element's <a href=#effective-media-volume>effective media
+ volume</a>.</p>
<p>When a <code><a href=#video>video</a></code> element whose <a href=#media-resource>media
resource</a> has a video channel is neither <a href=#potentially-playing>potentially
@@ -25165,6 +25180,7 @@
<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>
+<!--CONTROLLER--> <dd><code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code></dd><!--CONTROLLER-->
<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>
@@ -25210,14 +25226,19 @@
<p>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.</p>
- <p>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
+ <p>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>,
+<!--CONTROLLER-->
+ <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code>,
+<!--CONTROLLER-->
+ <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>.</p>
<div class=impl>
<p>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>.</p>
+ the <a href=#current-playback-position>current playback position</a>, at the element's
+ <a href=#effective-media-volume>effective media volume</a>.</p>
<p>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.</p>
@@ -25706,24 +25727,35 @@
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>();
+<!--CONTROLLER-->
+ // media controller
+ attribute <span>DOMString</span> <a href=#dom-media-mediagroup title=dom-media-mediaGroup>mediaGroup</a>;
+ attribute <a href=#mediacontroller>MediaController</a> <a href=#dom-media-controller title=dom-media-controller>controller</a>;<!--CONTROLLER-->
// 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>;
<!--KEEP-END w3c-html--><!--TT-->
- // text tracks
+ // tracks
+<!--CONTROLLER-->
+ readonly attribute <a href=#multipletracklist>MultipleTrackList</a> <a href=#dom-media-audiotracks title=dom-media-audioTracks>audioTracks</a>;
+ readonly attribute <a href=#exclusivetracklist>ExclusiveTrackList</a> <a href=#dom-media-videotracks title=dom-media-videoTracks>videoTracks</a>;
+<!--CONTROLLER-->
readonly attribute <a href=#texttrack>TextTrack</a>[] <a href=#dom-media-texttracks title=dom-media-textTracks>textTracks</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);
<!--KEEP-START w3c-html--><!--TT-->
};</pre>
- <p>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
+ <p>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>,
+<!--CONTROLLER-->
+ <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code>,
+<!--CONTROLLER-->
+ <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.</p> <!-- attr-media-audio -->
<!-- proposed v2 (actually v3!) features:
* frame forward / backwards / step(n) while paused
- * hasAudio, hasVideo, hasCaptions, etc
* per-frame control: get current frame; set current frame
* queue of content
- pause current stream and insert content at front of queue to play immediately
@@ -25738,6 +25770,7 @@
* video: applying CSS filters
* an event to notify people of when the video size changes
(e.g. for chained Ogg streams of multiple independent videos)
+ (or for when the current video track changes)
* balance and 3D position audio
* audio filters
* audio synthesis (see <audio> section for use cases)
@@ -25763,6 +25796,17 @@
resource</dfn> is used to refer to the complete set of media data,
e.g. the complete video file, or complete audio file.</p>
+<!--CONTROLLER-->
+ <p>A <a href=#media-resource>media resource</a> can have multiple audio and video
+ tracks. For the purposes of a <a href=#media-element>media element</a>, the video
+ data of the <a href=#media-resource>media resource</a> is only that of the
+ currently selected track (if any) given by the element's <code title=dom-media-videoTracks><a href=#dom-media-videotracks>videoTracks</a></code> attribute, and the
+ audio data of the <a href=#media-resource>media resource</a> is the result of
+ mixing all the currently enabled tracks (if any) given by the
+ element's <code title=dom-media-audioTracks><a href=#dom-media-audiotracks>audioTracks</a></code>
+ attribute.</p>
+<!--CONTROLLER-->
+
<div class=impl>
<p>Except where otherwise specified, the <a href=#task-source>task source</a>
@@ -26623,13 +26667,28 @@
resulting exceptions (if the position is out of range, it is
effectively ignored).</p>
- <p class=example>For example, a fragment identifier could be
- used to indicate a start position.</p>
+ <p class=example>For example, with media formats that
+ support the <cite>Media Fragments URI</cite> fragment
+ identifier syntax, the fragment identifier can be used to
+ indicate a start position. <a href=#refsMEDIAFRAG>[MEDIAFRAG]</a></p>
</li>
+<!--CONTROLLER-->
<li>
+ <p>If either the <a href=#media-resource>media resource</a> or the address of
+ the <var title="">current media resource</var> indicate a
+ particular set of audio or video tracks to enable, then the
+ selected audio tracks must be enabled in the element's <code title=dom-media-audioTracks><a href=#dom-media-audiotracks>audioTracks</a></code> object, and
+ the the first selected video track must be selected in the
+ element's <code title=dom-media-videoTracks><a href=#dom-media-videotracks>videoTracks</a></code> object.</p>
+
+ </li>
+<!--CONTROLLER-->
+
+ <li>
+
<p>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
@@ -27476,15 +27535,23 @@
attribute represents whether the <a href=#media-element>media element</a> is
paused or not. The attribute must initially be true.</p>
+ <p>A <a href=#media-element>media element</a> is a <dfn id=blocked-media-element>blocked media
+ element</dfn> if its <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is in the
+ <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> state or
+ the <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>
+ state, or if the element has <a href=#paused-for-user-interaction>paused for user
+ interaction</a>.</p>
+
<p>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_CURRENT_DATA><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code>,
- <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>.</p>
+ attribute is false, 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>,
+<!--CONTROLLER-->
+ the element either has no <a href=#current-media-controller>current media controller</a> or
+ has a <a href=#current-media-controller>current media controller</a> that is itself not a
+ <a href=#blocked-media-controller>blocked media controller</a>,
+<!--CONTROLLER-->
+ and the element is not a <a href=#blocked-media-element>blocked media element</a>.</p>
<p>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
@@ -27579,6 +27646,10 @@
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.</p>
+ <p class=note>The <code title=dom-media-defaultPlaybackRate><a href=#dom-media-defaultplaybackrate>defaultPlaybackRate</a></code> is
+ used by the user agent when it <a href=#expose-a-user-interface-to-the-user title="expose a user interface
+ to the user">exposes a user interface to the user</a>.</p>
+
<p>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
@@ -27590,25 +27661,18 @@
value, and the playback must change speed (if the element is
<a href=#potentially-playing>potentially playing</a>).</p>
- <p>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.</p>
+ <p>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).</p>
- <p>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.</p>
-
<p id=rateUpdate>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=#queue-a-task>queue a task</a> to <a href=#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>.</p>
+ 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>.</p>
<p>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
@@ -27701,12 +27765,33 @@
</ol></li>
- </ol><hr><p id=media-playback>When a <a href=#media-element>media element</a> is
+ </ol><hr><p>The
+<!--CONTROLLER-->
+ <var title="">effective playback rate</var> is not necessarily the
+ element's <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code>.
+ When a <a href=#media-element>media element</a> has a <a href=#current-media-controller>current media
+ controller</a>, its <var title="">effective playback rate</var>
+ is the element's <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code> multiplied by the
+ <code><a href=#mediacontroller>MediaController</a></code>'s <a href=#media-controller-playback-rate-multiplier>media controller playback rate
+ multiplier</a>. Otherwise, the
+<!--CONTROLLER-->
+ <var title="">effective playback rate</var> is just the
+ element's <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code>.</p>
+
+ <p>If the <var title="">effective playback rate</var> is positive or
+ zero, then the <dfn id=direction-of-playback>direction of playback</dfn> is forwards.
+ Otherwise, it is backwards.</p>
+
+ <p id=media-playback>When a <a href=#media-element>media element</a> is
<a href=#potentially-playing>potentially playing</a> and its <code><a href=#document>Document</a></code> is a
<a href=#fully-active>fully active</a> <code><a href=#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.</p>
+ playback position</a> must increase monotonically at <var title="">effective playback rate</var> units of media time per unit
+ time of wall clock time.</p> <!--XXX will change with bug 12339 -->
+ <p class=note>If the <var title="">effective playback rate</var>
+ is zero, the <a href=#current-playback-position>current playback position</a> doesn't
+ move.</p>
+
<p class=note>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
@@ -27716,19 +27801,14 @@
playback rate) the client doesn't actually have to drop or
interpolate any frames.</p>
- <p>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
+ <p>When the <a href=#direction-of-playback>direction of playback</a> is backwards, any
+ corresponding audio must be muted. When the <var title="">effective
+ playback rate</var> is so low or so high that the user agent cannot
+ play audio usefully, the corresponding audio must also be muted. If
+ the <var title="">effective playback rate</var> is not 1.0, the user
+ agent may apply pitch adjustments to the audio as necessary to
render it faithfully.</p>
- <p>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).</p>
-
<p><a href=#media-element title="media element">Media elements</a> that are
<a href=#potentially-playing>potentially playing</a> while not <a href=#in-a-document>in a
<code>Document</code></a> must not play any video, but should
@@ -28039,13 +28119,709 @@
</div>
+<!--CONTROLLER-->
+ <h5 id=media-resources-with-multiple-media-tracks><span class=secno>4.8.10.10 </span>Media resources with multiple media tracks</h5>
+ <p>A <a href=#media-resource>media resource</a> can have multiple embedded audio
+ and video tracks. For example, in addition to the primary video and
+ audio tracks, a <a href=#media-resource>media resource</a> could have
+ foreign-language dubbed dialogues, director's commentaries, audio
+ descriptions, alternative angles, or sign-language overlays.</p>
+
+ <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-audioTracks><a href=#dom-media-audiotracks>audioTracks</a></code></dt>
+
+ <dd>
+
+ <p>Returns a <code><a href=#multipletracklist>MultipleTrackList</a></code> object representing
+ the audio tracks available in the <a href=#media-resource>media resource</a>.</p>
+
+ </dd>
+
+ <dt><var title="">media</var> . <code title=dom-media-videoTracks><a href=#dom-media-videotracks>videoTracks</a></code></dt>
+
+ <dd>
+
+ <p>Returns an <code><a href=#exclusivetracklist>ExclusiveTrackList</a></code> object representing
+ the video tracks available in the <a href=#media-resource>media resource</a>.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>The <dfn id=dom-media-audiotracks title=dom-media-audioTracks><code>audioTracks</code></dfn>
+ attribute of a <a href=#media-element>media element</a> must return a
+ <a href=#live>live</a> <code><a href=#multipletracklist>MultipleTrackList</a></code> object representing
+ the audio tracks available in the <a href=#media-element>media element</a>'s
+ <a href=#media-resource>media resource</a>. The same object must be returned each
+ time.</p>
+
+ <p>The <dfn id=dom-media-videotracks title=dom-media-videoTracks><code>videoTracks</code></dfn>
+ attribute of a <a href=#media-element>media element</a> must return a
+ <a href=#live>live</a> <code><a href=#exclusivetracklist>ExclusiveTrackList</a></code> object
+ representing the video tracks available in the <a href=#media-element>media
+ element</a>'s <a href=#media-resource>media resource</a>. The same object must
+ be returned each time.</p>
+
+ </div>
+
+
+ <h6 id=tracklist-objects><span class=secno>4.8.10.10.1 </span><code><a href=#tracklist>TrackList</a></code> objects</h6>
+
+ <p>The <code><a href=#multipletracklist>MultipleTrackList</a></code> and
+ <code><a href=#exclusivetracklist>ExclusiveTrackList</a></code> interfaces, used by the attributes
+ defined in the previous section, are substantially similar. Their
+ common features are defined in the <code><a href=#tracklist>TrackList</a></code> interface,
+ from which they both inherit.</p>
+
+ <pre class=idl>interface <dfn id=tracklist>TrackList</dfn> {
+ readonly attribute unsigned long <a href=#dom-tracklist-length title=dom-TrackList-length>length</a>;
+ DOMString <a href=#dom-tracklist-getname title=dom-TrackList-getName>getName</a>(in unsigned long index);
+ DOMString <a href=#dom-tracklist-getlanguage title=dom-TrackList-getLanguage>getLanguage</a>(in unsigned long index);
+};
+
+interface <dfn id=multipletracklist>MultipleTrackList</dfn> : <a href=#tracklist>TrackList</a> {
+ boolean <a href=#dom-tracklist-isenabled title=dom-TrackList-isEnabled>isEnabled</a>(in unsigned long index);
+ void <a href=#dom-tracklist-enable title=dom-TrackList-enable>enable</a>(in unsigned long index);
+ void <a href=#dom-tracklist-disable title=dom-TrackList-disable>disable</a>(in unsigned long index);
+};
+
+interface <dfn id=exclusivetracklist>ExclusiveTrackList</dfn> : <a href=#tracklist>TrackList</a> {
+ readonly attribute unsigned long <a href=#dom-tracklist-selectedindex title=dom-TrackList-selectedIndex>selectedIndex</a>;
+ void <a href=#dom-tracklist-select title=dom-TrackList-select>select</a>(in unsigned long index);
+};</pre>
+
+ <dl class=domintro><dt><var title="">tracks</var> . <code title=dom-TrackList-length><a href=#dom-tracklist-length>length</a></code></dt>
+
+ <dd>
+
+ <p>Returns the number of tracks in the list.</p>
+
+ </dd>
+
+ <dt><var title="">name</var> = <var title="">tracks</var> . <code title=dom-TrackList-getName><a href=#dom-tracklist-getname>getName</a></code>( <var title="">index</var> )</dt>
+
+ <dd>
+
+ <p>Returns the name of the given track, if known, or the empty string otherwise.</p>
+
+ </dd>
+
+ <dt><var title="">language</var> = <var title="">tracks</var> . <code title=dom-TrackList-getLanguage><a href=#dom-tracklist-getlanguage>getLanguage</a></code>( <var title="">index</var> )</dt>
+
+ <dd>
+
+ <p>Returns the language of the given track, if known, or the empty string otherwise.</p>
+
+ </dd>
+
+ <dt><var title="">enabled</var> = <var title="">audioTracks</var> . <code title=dom-TrackList-isEnabled><a href=#dom-tracklist-isenabled>isEnabled</a></code>( <var title="">index</var> )</dt>
+
+ <dd>
+
+ <p>Returns true if the given track is active, and false otherwise.</p>
+
+ </dd>
+
+ <dt><var title="">audioTracks</var> . <code title=dom-TrackList-enable><a href=#dom-tracklist-enable>enable</a></code>( <var title="">index</var> )</dt>
+
+ <dd>
+
+ <p>Enables the given track.</p>
+
+ </dd>
+
+ <dt><var title="">audioTracks</var> . <code title=dom-TrackList-disable><a href=#dom-tracklist-disable>disable</a></code>( <var title="">index</var> )</dt>
+
+ <dd>
+
+ <p>Disables the given track.</p>
+
+ </dd>
+
+ <dt><var title="">videoTracks</var> . <code title=dom-TrackList-selectedIndex><a href=#dom-tracklist-selectedindex>isEnabled</a></code></dt>
+
+ <dd>
+
+ <p>Returns the index of the currently selected track, if any, or −1 otherwise.</p>
+
+ </dd>
+
+ <dt><var title="">videoTracks</var> . <code title=dom-TrackList-select><a href=#dom-tracklist-select>select</a></code>( <var title="">index</var> )</dt>
+
+ <dd>
+
+ <p>Selects the given track.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p class=note>There are only ever two <code><a href=#tracklist>TrackList</a></code>
+ objects (one <code><a href=#multipletracklist>MultipleTrackList</a></code> object and one
+ <code><a href=#exclusivetracklist>ExclusiveTrackList</a></code> object) per <a href=#media-element>media
+ element</a>, even if another <a href=#media-resource>media resource</a> is
+ loaded into the element: the objects are reused.</p>
+
+ <p>The <dfn id=dom-tracklist-length title=dom-TrackList-length><code>length</code></dfn>
+ attribute must return the number of tracks represented by the
+ <code><a href=#tracklist>TrackList</a></code> object at the time of getting.</p>
+
+ <p>Tracks in a <code><a href=#tracklist>TrackList</a></code> object must be consistently
+ ordered. If the <a href=#media-resource>media resource</a> is in a format that
+ defines an order, then that order must be used; otherwise, the order
+ must be the relative order in which the tracks are declared in the
+ <a href=#media-resource>media resource</a>. Each track in a <code><a href=#tracklist>TrackList</a></code>
+ thus has an index; the first has the index 0, and each subsequent
+ track is numbered one higher than the previous one.</p>
+
+ <p>The <dfn id=dom-tracklist-getname title=dom-TrackList-getName><code>getName(<var title="">index</var>)</code></dfn> method must return the name of
+ the track with index <var title="">index</var>, if there is one and
+ it has a name. If there is no such track, then the method must
+ instead throw an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception. If there is
+ a track with index <var title="">index</var>, but it has no name,
+ then the method must return the empty string.</p>
+
+ <p>The <dfn id=dom-tracklist-getlanguage title=dom-TrackList-getLanguage><code>getLanguage(<var title="">index</var>)</code></dfn> method must return the BCP 47
+ language tag of the language of the track with index <var title="">index</var>, if there is one and it has a language. If
+ there is no such track, then the method must instead throw an
+ <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception. If there is a track with
+ index <var title="">index</var>, but it has no language, or the user
+ agent is not able to express that language as a BCP 47 language tag
+ (for example because the language information in the <a href=#media-resource>media
+ resource</a>'s format is a free-form string without a defined
+ interpretation), then the method must return the empty string.</p>
+
+ <hr><p>A <code><a href=#multipletracklist>MultipleTrackList</a></code> object represents a track list
+ where multiple tracks can be enabled simultaneously. Each track is
+ either enabled or disabled.</p>
+
+ <p>The <dfn id=dom-tracklist-isenabled title=dom-TrackList-isEnabled><code>isEnabled(<var title="">index</var>)</code></dfn> method must return true if there
+ is a track with index <var title="">index</var>, and it is currently
+ enabled, false if there is a track with index <var title="">index</var>, but it is currently disabled, and must throw
+ an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception if there is no track with
+ index <var title="">index</var>.</p>
+
+ <p>The <dfn id=dom-tracklist-enable title=dom-TrackList-enable><code>enable(<var title="">index</var>)</code></dfn> method must enable the track with
+ index <var title="">index</var>, if there is one. If there is not,
+ it must instead throw an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>
+
+ <p>The <dfn id=dom-tracklist-disable title=dom-TrackList-disable><code>disable(<var title="">index</var>)</code></dfn> method must disable the track with
+ index <var title="">index</var>, if there is one. If there is not,
+ it must instead throw an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>
+
+ <hr><p>An <code><a href=#exclusivetracklist>ExclusiveTrackList</a></code> object represents a track list
+ where exactly one track is selected at a time.</p>
+
+ <p>The <dfn id=dom-tracklist-selectedindex title=dom-TrackList-selectedIndex><code>selectedIndex</code></dfn>
+ attribute must return the index of the currently selected track. If
+ the <code><a href=#exclusivetracklist>ExclusiveTrackList</a></code> object does not represent any
+ tracks, it must instead return −1.</p>
+
+ <p>The <dfn id=dom-tracklist-select title=dom-TrackList-select><code>select(<var title="">index</var>)</code></dfn> must select the track with index
+ <var title="">index</var>, if there is one, unselecting whichever
+ track was previously selected. If there is no track with index <var title="">index</var>, it must instead throw an
+ <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>
+
+ </div>
+
+
+ <h6 id=selecting-specific-audio-and-video-tracks-declaratively><span class=secno>4.8.10.10.2 </span>Selecting specific audio and video tracks declaratively</h6>
+
+ <p>The <code title=dom-media-audioTracks><a href=#dom-media-audiotracks>audioTracks</a></code> and
+ <code title=dom-media-videoTracks><a href=#dom-media-videotracks>videoTracks</a></code> attributes
+ allow scripts to select which track should play, but it is also
+ possible to select specific tracks declaratively, by specifying
+ particular tracks in the fragment identifier of the <a href=#url>URL</a>
+ of the <a href=#media-resource>media resource</a>. The format of the fragment
+ identifier depends on the <a href=#mime-type>MIME type</a> of the <a href=#media-resource>media
+ resource</a>. <a href=#refsRFC2046>[RFC2046]</a> <a href=#refsRFC3986>[RFC3986]</a></p>
+
+ <div class=example>
+
+ <p>In this example, a video that uses a format that supports the
+ <cite>Media Fragments URI</cite> fragment identifier syntax is
+ embedded in such a way that the alternative angles labeled
+ "Alternative" are enabled instead of the default video track. <a href=#refsMEDIAFRAG>[MEDIAFRAG]</a></p>
+
+ <pre><video src="myvideo#track=Alternative"></video></pre>
+
+ <!-- XXX need to check with the mediafrag people about whether
+ there's a way to select a specific audio or video track without
+ affecting the default track selection of the other axis, e.g.
+ setting the video track without changing the default audio track
+ selection -->
+
+ </div>
+
+
+ <h5 id=synchronising-multiple-media-elements><span class=secno>4.8.10.11 </span>Synchronising multiple media elements</h5>
+
+ <h6 id=introduction-0><span class=secno>4.8.10.11.1 </span>Introduction</h6>
+
+ <p>Each <a href=#media-element>media element</a> can have a
+ <code><a href=#mediacontroller>MediaController</a></code>. A <code><a href=#mediacontroller>MediaController</a></code> is an
+ object that coordinates the playback of multiple <a href=#media-element title="media
+ element">media elements</a>, for instance so that a sign-language
+ interpreter track can be overlaid on a video track, with the two
+ being kept in sync.</p>
+
+ <p>By default, a <a href=#media-element>media element</a> has no
+ <code><a href=#mediacontroller>MediaController</a></code>. An implicit
+ <code><a href=#mediacontroller>MediaController</a></code> can be assigned using the <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code> content attribute.
+ An explicit <code><a href=#mediacontroller>MediaController</a></code> can be assigned directly
+ using the <code title=dom-media-controller><a href=#dom-media-controller>controller</a></code> IDL
+ attribute.</p>
+
+ <p><a href=#media-element title="media element">Media elements</a> with a
+ <code><a href=#mediacontroller>MediaController</a></code> are said to be <i>slaved</i> to their
+ controller. The <code><a href=#mediacontroller>MediaController</a></code> modifies the playback
+ rate and the playback volume of each of the <a href=#media-element title="media
+ element">media elements</a> slaved to it, and ensures that when
+ any of its slaved <a href=#media-element title="media element">media elements</a>
+ unexpectedly stall, the others are stopped at the same time.</p>
+
+ <div class=example>
+
+ <p>In this example, two audio elements are slaved to the same
+ (implicit) controller so that a waltz played by one audio element
+ is kept exactly synchronised to the "tick tock tock" sound of the
+ metronome played by the second element:</p>
+
+ <pre><audio src="The%20Amelia%20Earhart%20Waltz.wav" controls autoplay mediagroup="song"></audio>
+<audio src="metronomes/3-4.wav" autoplay loop mediagroup="song"></audio></pre>
+
+ <p>Assuming the song keeps a regular tempo throughout and assuming
+ the metronome has the same tempo, this works even though if the
+ metronome file only has one measure's worth of "tick tock tock",
+ because the controller (implied by the <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code> attribute)
+ guarantees that the two elements will be kept synchronised, even if
+ the user rewinds, jumps to a different part of the song, etc (the
+ user agent controls made available by the <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute on the song's
+ <code><a href=#audio>audio</a></code> element affect the
+ <code><a href=#mediacontroller>MediaController</a></code>'s state).</p>
+
+ <p>If the metronome has the wrong rate, its rate can be adjusted by
+ script separately from the song's (using the <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>audio.playbackRate</a></code> IDL
+ attribute). The two elements will play back their <a href=#media-data>media
+ data</a> at different rates, but the ratio will again be
+ controlled by the <code><a href=#mediacontroller>MediaController</a></code>.</p>
+
+ </div>
+
+
+ <h6 id=media-controllers><span class=secno>4.8.10.11.2 </span>Media controllers</h6>
+
+ <pre class=idl>[<a href=#dom-mediacontroller title=dom-MediaController>Constructor</a>]
+interface <dfn id=mediacontroller>MediaController</dfn> {
+ readonly attribute boolean <a href=#dom-mediacontroller-paused title=dom-MediaController-paused>paused</a>;
+ void <a href=#dom-mediacontroller-play title=dom-MediaController-play>play</a>();
+ void <a href=#dom-mediacontroller-pause title=dom-MediaController-pause>pause</a>();
+
+ attribute double <a href=#dom-mediacontroller-defaultplaybackrate title=dom-MediaController-defaultPlaybackRate>defaultPlaybackRate</a>;
+ attribute double <a href=#dom-mediacontroller-playbackrate title=dom-MediaController-playbackRate>playbackRate</a>;
+
+ attribute double <a href=#dom-mediacontroller-volume title=dom-MediaController-volume>volume</a>;
+ attribute boolean <a href=#dom-mediacontroller-muted title=dom-MediaController-muted>muted</a>;
+
+ void <a href=#dom-mediacontroller-seek title=dom-MediaController-seek>seek</a>(in double delta);
+
+ attribute <a href=#function>Function</a> <a href=#handler-mediacontroller-onplay title=handler-MediaController-onplay>onplay</a>;
+ attribute <a href=#function>Function</a> <a href=#handler-mediacontroller-onpause title=handler-MediaController-onpause>onpause</a>;
+ attribute <a href=#function>Function</a> <a href=#handler-mediacontroller-onratechange title=handler-MediaController-onratechange>onratechange</a>;
+ attribute <a href=#function>Function</a> <a href=#handler-mediacontroller-onvolumechange title=handler-MediaController-onvolumechange>onvolumechange</a>;
+};</pre>
+
+ <dl class=domintro><dt><var title="">controller</var> = new <code title=dom-MediaController><a href=#dom-mediacontroller>MediaController</a></code>()</dt>
+
+ <dd>
+
+ <p>Returns a new <code><a href=#mediacontroller>MediaController</a></code> object.</p>
+
+ </dd>
+
+ <dt><var title="">media</var> . <code title=dom-media-controller><a href=#dom-media-controller>controller</a></code> [ = <var title="">controller</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current <code><a href=#mediacontroller>MediaController</a></code> for the <a href=#media-element>media element</a>, if any; returns null otherwise.</p>
+
+ <p>Can be set, to set an explicit <code><a href=#mediacontroller>MediaController</a></code>.
+ Doing so removes the <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code> attribute, if
+ any.</p>
+
+ </dd>
+
+ <dt><var title="">controller</var> . <code title=dom-MediaController-paused><a href=#dom-mediacontroller-paused>paused</a></code></dt>
+
+ <dd>
+
+ <p>Returns true if playback is paused; false otherwise. When this
+ attribute is true, any <a href=#media-element>media element</a> slaved to this
+ controller will be stopped.</p>
+
+ </dd>
+
+ <dt><var title="">controller</var> . <code title=dom-MediaController-play><a href=#dom-mediacontroller-play>play</a></code>()</dt>
+
+ <dd>
+
+ <p>Sets the <code title=dom-MediaController-paused><a href=#dom-mediacontroller-paused>paused</a></code>
+ attribute to false.</p>
+
+ </dd>
+
+ <dt><var title="">controller</var> . <code title=dom-MediaController-pause><a href=#dom-mediacontroller-pause>pause</a></code>()</dt>
+
+ <dd>
+
+ <p>Sets the <code title=dom-MediaController-paused><a href=#dom-mediacontroller-paused>paused</a></code>
+ attribute to true.</p>
+
+ </dd>
+
+ <dt><var title="">controller</var> . <code title=dom-MediaController-defaultPlaybackRate><a href=#dom-mediacontroller-defaultplaybackrate>defaultPlaybackRate</a></code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the default multiplier of the rate of playback.</p>
+
+ <p>Can be set, to change the default multiplier of the rate of
+ playback.</p>
+
+ <p>This default multiplier 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 rate of playback
+ multiplier (<code title=dom-MediaController-playbackRate><a href=#dom-mediacontroller-playbackrate>playbackRate</a></code>) will
+ be returned to this default multiplier.</p>
+
+ </dd>
+
+ <dt><var title="">controller</var> . <code title=dom-MediaController-playbackRate><a href=#dom-mediacontroller-playbackrate>playbackRate</a></code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current multiplier of the rate playback, where 1.0
+ is no multiplier.</p>
+
+ <p>Can be set, to change the rate of playback of the <a href=#media-element title="media element">media elements</a> slaved to this
+ controller.</p>
+
+ </dd>
+
+ <dt><var title="">controller</var> . <code title=dom-MediaController-volume><a href=#dom-mediacontroller-volume>volume</a></code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current playback volume multiplier, as a number in
+ the range 0.0 to 1.0, where 0.0 is the quietest and 1.0 the
+ loudest.</p>
+
+ <p>Can be set, to change the volume multiplier.</p>
+
+ <p>Throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> if the new value is not
+ in the range 0.0 .. 1.0.</p>
+
+ </dd>
+
+ <dt><var title="">controller</var> . <code title=dom-MediaController-muted><a href=#dom-mediacontroller-muted>muted</a></code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns true if all audio is muted (regardless of other
+ attributes either on the controller or on any <a href=#media-element title="media
+ element">media elements</a> slaved to this controller), and
+ false otherwise.</p>
+
+ <p>Can be set, to change whether the audio is muted or not.</p>
+
+ </dd>
+
+ <dt><var title="">controller</var> . <code title=dom-MediaController-seek><a href=#dom-mediacontroller-seek>seek</a></code>( <var title="">delta</var> )</dt>
+
+ <dd>
+
+ <p>Advances the <a href=#media-element title="media element">media elements</a>
+ slaved to this controller by <var title="">delta</var> seconds,
+ corrected to take into account their relative playback rates.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>A <a href=#media-element>media element</a> can have a <dfn id=current-media-controller>current media
+ controller</dfn>, which is a <code><a href=#mediacontroller>MediaController</a></code> object.
+ The <dfn id=slaved-media-elements>slaved media elements</dfn> of a
+ <code><a href=#mediacontroller>MediaController</a></code> are the <a href=#media-element title="media
+ element">media elements</a> whose <a href=#current-media-controller>current media
+ controller</a> is that <code><a href=#mediacontroller>MediaController</a></code>.</p>
+
+ <p>All the <a href=#slaved-media-elements>slaved media elements</a> of a
+ <code><a href=#mediacontroller>MediaController</a></code> must use the same clock for their
+ definition of their <a href=#media-timeline>media timeline</a>'s unit time.</p>
+
+ <p>When a <code><a href=#mediacontroller>MediaController</a></code> is created it is a
+ <dfn id=playing-media-controller>playing media controller</dfn>. It can be changed into a
+ <dfn id=paused-media-controller>paused media controller</dfn> and back either via the user
+ agent's user interface (when the element is <a href=#expose-a-user-interface-to-the-user title="expose a
+ user interface to the user">exposing a user interface to the
+ user</a>) or via the APIs defined in this section (see
+ below).</p>
+
+ <p>A <code><a href=#mediacontroller>MediaController</a></code> is a <dfn id=blocked-media-controller>blocked media
+ controller</dfn> if the <code><a href=#mediacontroller>MediaController</a></code> is a
+ <a href=#paused-media-controller>paused media controller</a>, or if any of its <a href=#slaved-media-elements>slaved
+ media elements</a> are <a href=#blocked-media-element title="blocked media
+ element">blocked media elements</a>, or if any of its
+ <a href=#slaved-media-elements>slaved media elements</a> whose <a href=#autoplaying-flag>autoplaying
+ flag</a> is true still have a <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> attribute this is true.</p>
+
+ <p>A <code><a href=#mediacontroller>MediaController</a></code> has a <dfn id=media-controller-default-playback-rate-multiplier>media controller
+ default playback rate multiplier</dfn>, a <dfn id=media-controller-playback-rate-multiplier>media controller
+ playback rate multiplier</dfn>, and a <dfn id=media-controller-volume-multiplier>media controller volume
+ multiplier</dfn>, which must all be set to 1.0 when the
+ <code><a href=#mediacontroller>MediaController</a></code> object is created. A
+ <code><a href=#mediacontroller>MediaController</a></code> also has a <dfn id=media-controller-mute-override>media controller mute
+ override</dfn>, much must initially be false.</p>
+
+ <hr><p>The <dfn id=dom-media-controller title=dom-media-controller><code>controller</code></dfn> attribute
+ on a <a href=#media-element>media element</a>, on getting, must return the
+ element's <a href=#current-media-controller>current media controller</a>, if any, or null
+ otherwise. On setting, it must first remove the element's <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code> attribute, if any,
+ and then set the <a href=#current-media-controller>current media controller</a> to the given
+ value. If the given value is null, the element no longer has a
+ <a href=#current-media-controller>current media controller</a>.</p>
+
+ <hr><p>The <dfn id=dom-mediacontroller title=dom-MediaController><code>MediaController()</code></dfn>
+ constructor, when invoked, must return a newly created
+ <code><a href=#mediacontroller>MediaController</a></code> object.</p>
+
+ <hr><p>The <dfn id=dom-mediacontroller-paused title=dom-MediaController-paused><code>paused</code></dfn>
+ attribute must return true if the <code><a href=#mediacontroller>MediaController</a></code>
+ object is a <a href=#paused-media-controller>paused media controller</a>, and false
+ otherwise.</p>
+
+ <p>When the <dfn id=dom-mediacontroller-pause title=dom-MediaController-pause><code>pause()</code></dfn> method
+ is invoked, the user agent must change the
+ <code><a href=#mediacontroller>MediaController</a></code> into a <a href=#paused-media-controller>paused media
+ controller</a>.</p>
+
+ <p>Whenever the <code><a href=#mediacontroller>MediaController</a></code> changes from a
+ <a href=#playing-media-controller>playing media controller</a> to a <a href=#paused-media-controller>paused media
+ controller</a>, the user agent must <a href=#queue-a-task>queue a task</a> to
+ <a href=#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
+ <code><a href=#mediacontroller>MediaController</a></code>.</p>
+
+ <p>When the <dfn id=dom-mediacontroller-play title=dom-MediaController-play><code>play()</code></dfn> method
+ is invoked, the user agent must change the
+ <code><a href=#mediacontroller>MediaController</a></code> into a <a href=#playing-media-controller>playing media
+ controller</a>.</p>
+
+ <p>Whenever the <code><a href=#mediacontroller>MediaController</a></code> changes from a
+ <a href=#paused-media-controller>paused media controller</a> to a <a href=#playing-media-controller>playing media
+ controller</a>, the user agent must <a href=#queue-a-task>queue a task</a> to
+ <a href=#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
+ <code><a href=#mediacontroller>MediaController</a></code>.</p>
+
+ <hr><p>The <dfn id=dom-mediacontroller-defaultplaybackrate title=dom-MediaController-defaultPlaybackRate><code>defaultPlaybackRate</code></dfn>
+ attribute, on getting, must return the
+ <code><a href=#mediacontroller>MediaController</a></code>'s <a href=#media-controller-default-playback-rate-multiplier>media controller default
+ playback rate multiplier</a>, and on setting, must set the
+ <code><a href=#mediacontroller>MediaController</a></code>'s <a href=#media-controller-default-playback-rate-multiplier>media controller default
+ playback rate multiplier</a> to the new value.</p>
+
+ <p>The <dfn id=dom-mediacontroller-playbackrate title=dom-MediaController-playbackRate><code>playbackRate</code></dfn>
+ attribute, on getting, must return the
+ <code><a href=#mediacontroller>MediaController</a></code>'s <a href=#media-controller-playback-rate-multiplier>media controller playback rate
+ multiplier</a>, and on setting, must set the
+ <code><a href=#mediacontroller>MediaController</a></code>'s <a href=#media-controller-playback-rate-multiplier>media controller playback rate
+ multiplier</a> to the new value.</p>
+
+ <p>Whenever the <a href=#media-controller-default-playback-rate-multiplier>media controller default playback rate
+ multiplier</a> or the <a href=#media-controller-playback-rate-multiplier>media controller playback rate
+ multiplier</a> are changed, the user agent must <a href=#queue-a-task>queue a
+ task</a> to <a href=#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
+ <code><a href=#mediacontroller>MediaController</a></code>.</p>
+
+ <hr><p>The <dfn id=dom-mediacontroller-volume title=dom-MediaController-volume><code>volume</code></dfn>
+ attribute, on getting, must return the
+ <code><a href=#mediacontroller>MediaController</a></code>'s <a href=#media-controller-volume-multiplier>media controller volume
+ multiplier</a>, and on setting, if the new value is in the range
+ 0.0 to 1.0 inclusive, must set the <code><a href=#mediacontroller>MediaController</a></code>'s
+ <a href=#media-controller-volume-multiplier>media controller volume multiplier</a> to the new value. If
+ the new value is outside the range 0.0 to 1.0 inclusive, then, on
+ setting, an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception must be raised
+ instead.</p>
+
+ <p>The <dfn id=dom-mediacontroller-muted title=dom-MediaController-muted><code>muted</code></dfn>
+ attribute, on getting, must return the
+ <code><a href=#mediacontroller>MediaController</a></code>'s <a href=#media-controller-mute-override>media controller mute
+ override</a>, and on setting, must set the
+ <code><a href=#mediacontroller>MediaController</a></code>'s <a href=#media-controller-mute-override>media controller mute
+ override</a> to the new value.</p>
+
+ <p>Whenever either the <a href=#media-controller-volume-multiplier>media controller volume
+ multiplier</a> or the <a href=#media-controller-mute-override>media controller mute override</a>
+ are changed, the user agent must <a href=#queue-a-task>queue a task</a> to
+ <a href=#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
+ <code><a href=#mediacontroller>MediaController</a></code>.</p>
+
+ <hr><p>The <dfn id=dom-mediacontroller-seek title=dom-MediaController-seek><code>seek()</code></dfn> method
+ must run the following steps for each <a href=#slaved-media-elements title="slaved media
+ elements">slaved media element</a>, if any:</p>
+
+ <ol><li><p>Let <var title="">delta</var> be the method's argument.</li>
+
+ <li><p>Let <var title="">element</var> be the <a href=#slaved-media-elements title="slaved
+ media elements">slaved media element</a> being processed in this
+ iteration.</li>
+
+ <li><p>Let <var title="">effective delta</var> be <var title="">delta</var> multiplied by the value of <var title="">element</var>'s <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code>
+ attribute.</li>
+
+ <li><p>Let <var title="">new position</var> be <var title="">element</var>'s <a href=#current-playback-position>current playback position</a> (in
+ seconds) plus <var title="">effective delta</var>.</li>
+
+ <li><p>Let <var title="">duration</var> be the difference between
+ <var title="">element</var>'s <a href=#earliest-possible-position>earliest possible
+ position</a> (in seconds) and the time at the end of <var title="">element</var>'s <a href=#media-data>media data</a> (in
+ seconds).</li>
+
+ <li>
+
+ <p>If <var title="">element</var>'s <code title=attr-media-loop><a href=#attr-media-loop>loop</a></code> attribute is not specified,
+ then skip this step. Otherwise:</p>
+
+ <p>While <var title="">new position</var> is greater than the time
+ at the end of <var title="">element</var>'s <a href=#media-data>media
+ data</a> (in seconds), decrement <var title="">new
+ position</var> by <var title="">duration</var>.</p>
+
+ <p>While <var title="">new position</var> is less than <var title="">element</var>'s <a href=#earliest-possible-position>earliest possible position</a>
+ (in seconds), increment <var title="">new position</var> by <var title="">duration</var>.</p>
+
+ </li>
+
+ <li><p><a href=#dom-media-seek title=dom-media-seek>Seek</a> <var title="">element</var> to <var title="">new position</var>
+ (interpreted as a time in seconds).</li>
+
+ </ol><hr><p>The following are the <a href=#event-handlers>event handlers</a> that must be
+ supported, as IDL attributes, by all objects implementing the
+ <code><a href=#mediacontroller>MediaController</a></code> interface:</p>
+
+ <table><thead><tr><th><a href=#event-handlers title="event handlers">Event handler</a> <th><a href=#event-handler-event-type>Event handler event type</a>
+ <tbody><tr><td><dfn id=handler-mediacontroller-onplay title=handler-MediaController-onplay><code>onplay</code></dfn> <td> <code title=event-play>play</code>
+ <tr><td><dfn id=handler-mediacontroller-onpause title=handler-MediaController-onpause><code>onpause</code></dfn> <td> <code title=event-pause>pause</code>
+ <tr><td><dfn id=handler-mediacontroller-onratechange title=handler-MediaController-onratechange><code>onratechange</code></dfn> <td> <code title=event-ratechange>ratechange</code>
+ <tr><td><dfn id=handler-mediacontroller-onvolumechange title=handler-MediaController-onvolumechange><code>onvolumechange</code></dfn> <td> <code title=event-volumechange>volumechange</code>
+ </table></div>
+
+
+ <h6 id=assigning-a-media-controller-declaratively><span class=secno>4.8.10.11.3 </span>Assigning a media controller declaratively</h6>
+
+ <p>The <dfn id=attr-media-mediagroup title=attr-media-mediagroup><code>mediagroup</code></dfn> content
+ attribute on <a href=#media-element title="media element">media elements</a> can
+ be used to link multiple <a href=#media-element title="media element">media
+ elements</a> together by implicitly creating a
+ <code><a href=#mediacontroller>MediaController</a></code>.</p>
+
+ <div class=impl>
+
+ <p>When a <a href=#media-element>media element</a> is created with a <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code> attribute, and when
+ a <a href=#media-element>media element</a>'s <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code> attribute is set,
+ changed, or removed, the user agent must run the following
+ steps:</p>
+
+ <ol><li><p>Let <var title="">m</var> be the <a href=#media-element>media element</a>
+ in question.</li>
+
+ <li><p>Let <var title="">m</var> have no <a href=#current-media-controller>current
+ media controller</a>, if it currently has one.</li>
+
+ <li><p>If <var title="">m</var>'s <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code> attribute is being
+ removed, then abort these steps.</li>
+
+ <li>
+
+ <p>If there is another <a href=#media-element>media element</a> whose
+ <code><a href=#document>Document</a></code> is the same as <var title="">m</var>'s
+ <code><a href=#document>Document</a></code> (even if one or both of these elements are
+ not actually <a href=#in-a-document title="in a Document"><em>in</em> the
+ <code>Document</code></a>), and which also has a <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code> attribute, and
+ whose <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code>
+ attribute has the same value as the new value of <var title="">m</var>'s <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code> attribute, then
+ let <var title="">controller</var> be that <a href=#media-element>media
+ element</a>'s <a href=#current-media-controller>current media controller</a>.</p>
+
+ <p>Otherwise, let <var title="">controller</var> be a newly created
+ <code><a href=#mediacontroller>MediaController</a></code>.</p>
+
+ </li>
+
+ <li><p>Let <var title="">m</var>'s <a href=#current-media-controller>current media
+ controller</a> be <var title="">controller</var>.</li>
+
+ </ol><p>The <dfn id=dom-media-mediagroup title=dom-media-mediaGroup><code>mediaGroup</code></dfn> IDL
+ attribute on <a href=#media-element title="media element">media elements</a> must
+ <a href=#reflect>reflect</a> the <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code> content
+ attribute.</p>
+
+ </div>
+
+ <div class=example>
+
+ <p>Multiple <a href=#media-element title="media element">media elements</a>
+ referencing the same <a href=#media-resource>media resource</a> will share a
+ single network request. This can be used to efficiently play two
+ (video) tracks from the same <a href=#media-resource>media resource</a> in two
+ different places on the screen. Used with the <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code> attribute, these
+ elements can also be kept synchronised.</p>
+
+ <p>In this example, a sign-languge interpreter track from a movie
+ file is overlaid on the primary video track of that same video file
+ using two <code><a href=#video>video</a></code> elements, some CSS, and an implicit
+ <code><a href=#mediacontroller>MediaController</a></code>:</p>
+
+ <pre><article>
+ <style scoped>
+ div { margin: 1em auto; position: relative; width: 400px; height: 300px; }
+ video { position; absolute; bottom: 0; right: 0; }
+ video:first-child { width: 100%; height: 100%; }
+ video:last-child { width: 30%; }
+ </style>
+ <div>
+ <video src="movie.vid#track=Video&track=English" autoplay controls mediagroup=movie></video>
+ <video src="movie.vid#track=sign" autoplay mediagroup=movie></video>
+ </div>
+</article></pre>
+
+ </div>
+
+
+<!--v2:
+ <h6>Ducking</h6>
+
+ <p><dfn>Ducking</dfn> is the process of reducing the volume of one
+ audio track when another audio track is playing, for example
+ occasionally reducing the volume of a the soundtrack to allow the
+ viewer to hear an intermittent commentary track.</p>
+
+ (add an "autoduck" attribute that reduces the volume of other media
+ elements with the same <span>current media controller</span>
+ whenever this media element is playing audio)
+
+ <video src="movie.vid#track=Video&track=English" autoplay controls mediagroup=main></video>
+ <audio src="movie.vid#track=Descriptions" mediagroup=main autoduck></audio>
+-->
+
+<!--CONTROLLER-->
+
+
<!--KEEP-END w3c-html--><!--TT-->
<!--<div data-component="other Hixie drafts (editor: Ian Hickson)">-->
- <h5 id=timed-text-tracks><span class=secno>4.8.10.10 </span>Timed text tracks</h5>
+ <h5 id=timed-text-tracks><span class=secno>4.8.10.12 </span>Timed text tracks</h5>
- <h6 id=text-track-model><span class=secno>4.8.10.10.1 </span>Text track model</h6>
+ <h6 id=text-track-model><span class=secno>4.8.10.12.1 </span>Text track model</h6>
<p>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:</p>
@@ -28458,7 +29234,7 @@
order in which the cues were listed in the file).</p>
- <h6 id=sourcing-in-band-text-tracks><span class=secno>4.8.10.10.2 </span>Sourcing in-band text tracks</h6>
+ <h6 id=sourcing-in-band-text-tracks><span class=secno>4.8.10.12.2 </span>Sourcing in-band text tracks</h6>
<p>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
@@ -28535,7 +29311,7 @@
<div class=impl>
- <h6 id=sourcing-out-of-band-text-tracks><span class=secno>4.8.10.10.3 </span>Sourcing out-of-band text tracks</h6>
+ <h6 id=sourcing-out-of-band-text-tracks><span class=secno>4.8.10.12.3 </span>Sourcing out-of-band text tracks</h6>
<p>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
@@ -28807,7 +29583,7 @@
<!--TTVTT-->
<div class=impl>
- <h6 id=guidelines-for-exposing-cues-in-various-formats-as-text-track-cues><span class=secno>4.8.10.10.4 </span><dfn>Guidelines for exposing cues</dfn> in various formats as
+ <h6 id=guidelines-for-exposing-cues-in-various-formats-as-text-track-cues><span class=secno>4.8.10.12.4 </span><dfn>Guidelines for exposing cues</dfn> in various formats as
<a href=#text-track-cue title="text track cue">text track cues</a></h6>
<p>How a specific format's text track cues are to be interpreted
@@ -28866,7 +29642,7 @@
<!--TTVTT-->
- <h6 id=text-track-api><span class=secno>4.8.10.10.5 </span>Text track API</h6>
+ <h6 id=text-track-api><span class=secno>4.8.10.12.5 </span>Text track API</h6>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-textTracks><a href=#dom-media-texttracks>textTracks</a></code> . <code title="">length</code></dt>
<dd>
@@ -29624,7 +30400,7 @@
<div class=impl>
- <h6 id=cue-events><span class=secno>4.8.10.10.6 </span>Event definitions</h6>
+ <h6 id=cue-events><span class=secno>4.8.10.12.6 </span>Event definitions</h6>
<p>The following are the <a href=#event-handlers>event handlers</a> that must be
supported, as IDL attributes, by all objects implementing the
@@ -29646,13 +30422,13 @@
<!--TT-->
- <h5 id=webvtt-0><span class=secno>4.8.10.11 </span>WebVTT</h5>
+ <h5 id=webvtt-0><span class=secno>4.8.10.13 </span>WebVTT</h5>
<p>The <dfn id=webvtt>WebVTT</dfn> format (Web Video Text Tracks) is a
format intended for marking up external text track resources.</p>
- <h6 id=syntax-0><span class=secno>4.8.10.11.1 </span>Syntax</h6>
+ <h6 id=syntax-0><span class=secno>4.8.10.13.1 </span>Syntax</h6>
<p>A <dfn id=webvtt-file>WebVTT file</dfn> must consist of a <a href=#webvtt-file-body>WebVTT file
body</a> encoded as UTF-8 and labeled with the <a href=#mime-type>MIME
@@ -30004,7 +30780,7 @@
<div class=impl>
- <h6 id=parsing-0><span class=secno>4.8.10.11.2 </span>Parsing</h6>
+ <h6 id=parsing-0><span class=secno>4.8.10.13.2 </span>Parsing</h6>
<p>A <dfn id=webvtt-parser>WebVTT parser</dfn>, given an input byte stream and a
<a href=#text-track-list-of-cues>text track list of cues</a> <var title="">output</var>,
@@ -30638,7 +31414,7 @@
<li><p>Return <var title="">result</var>.</li>
- </ol><h6 id=webvtt-cue-text-parsing-rules><span class=secno>4.8.10.11.3 </span><dfn>WebVTT cue text parsing rules</dfn></h6>
+ </ol><h6 id=webvtt-cue-text-parsing-rules><span class=secno>4.8.10.13.3 </span><dfn>WebVTT cue text parsing rules</dfn></h6>
<p>A <dfn id=webvtt-node-object>WebVTT Node Object</dfn> is a conceptual construct used to
represent components of <a href=#webvtt-cue-text>WebVTT cue text</a> so that its
@@ -31224,7 +32000,7 @@
<li><p>Jump to the step labeled <i>loop</i>.</li>
- </ol><h6 id=webvtt-cue-text-dom-construction-rules><span class=secno>4.8.10.11.4 </span><dfn>WebVTT cue text DOM construction rules</dfn></h6>
+ </ol><h6 id=webvtt-cue-text-dom-construction-rules><span class=secno>4.8.10.13.4 </span><dfn>WebVTT cue text DOM construction rules</dfn></h6>
<p>To convert a <a href=#list-of-webvtt-node-objects>List of WebVTT Node Objects</a> to a DOM
tree for <code><a href=#document>Document</a></code> <var title="">owner</var>, user
@@ -31275,7 +32051,7 @@
<!--TT-->
- <h5 id=user-interface><span class=secno>4.8.10.12 </span>User interface</h5>
+ <h5 id=user-interface><span class=secno>4.8.10.14 </span>User interface</h5>
<p>The <dfn id=attr-media-controls title=attr-media-controls><code>controls</code></dfn>
attribute is a <a href=#boolean-attribute>boolean attribute</a>. If present, it
@@ -31303,7 +32079,8 @@
context menu.</p>
<p>Where possible (specifically, for starting, stopping, pausing,
- and unpausing playback, for seeking,
+ and unpausing playback, for seeking, for changing the rate of
+ playback, for fast-forwarding or rewinding,
<!--KEEP-END w3c-html--><!--TT-->
for listing, enabling, and disabling text tracks,
<!--KEEP-START w3c-html--><!--TT-->
@@ -31312,6 +32089,58 @@
the DOM API described above, so that, e.g., all the same events
fire.</p>
+<!--CONTROLLER-->
+ <p>When a <a href=#media-element>media element</a> has a <a href=#current-media-controller>current media
+ controller</a>, the user agent must implement its user interface
+ for pausing and unpausing playback, for seeking, for changing the
+ rate of playback, for fast-forwarding or rewinding, and for muting
+ or changing the volume of audio must be implemented specifically in
+ terms of the <code><a href=#mediacontroller>MediaController</a></code> API exposed on that
+ <a href=#current-media-controller>current media controller</a>.</p>
+<!--CONTROLLER-->
+
+ <p>The "play" function in the user agent's interface must set the
+ <code title="">playbackRate</code> attribute to the value of the
+ <code title="">defaultPlaybackRate</code> attribute before invoking
+ the <code title="">play()</code> method.
+<!--CONTROLLER-->
+ When a <a href=#media-element>media element</a> has a <a href=#current-media-controller>current media
+ controller</a>, the attributes and method with those names on
+ that <code><a href=#mediacontroller>MediaController</a></code> object must be used. Otherwise,
+ the attributes and method with those names on the <a href=#media-element>media
+ element</a> itself must be used.
+<!--CONTROLLER-->
+ </p>
+
+ <p>Features such as fast-forward or rewind must be implemented by
+ only changing the <code title="">playbackRate</code> attribute (and
+ not the <code title="">defaultPlaybackRate</code> attribute).
+<!--CONTROLLER-->
+ Again, when a <a href=#media-element>media element</a> has a <a href=#current-media-controller>current media
+ controller</a>, the attributes with those names on that
+ <code><a href=#mediacontroller>MediaController</a></code> object must be used; otherwise, the
+ attributes with those names on the <a href=#media-element>media element</a> itself
+ must be used.
+<!--CONTROLLER-->
+ </p>
+
+<!--CONTROLLER-->
+
+ <p>When a <a href=#media-element>media element</a> has a <a href=#current-media-controller>current media
+ controller</a>, seeking must be implemented in terms of the <code title=dom-MediaController-seek><a href=#dom-mediacontroller-seek>seek()</a></code> method on that
+ <code><a href=#mediacontroller>MediaController</a></code> object. Otherwise, the user agent must
+ directly <a href=#dom-media-seek title=dom-media-seek>seek</a> to the requested
+ position in the <a href=#media-element>media element</a>'s <a href=#media-timeline>media
+ timeline</a>.</p>
+
+ <p>When a <a href=#media-element>media element</a> has a <a href=#current-media-controller>current media
+ controller</a>, user agents may additionally provide the user
+ with controls that directly manipulate an individual <a href=#media-element>media
+ element</a> without affecting the <code><a href=#mediacontroller>MediaController</a></code>,
+ but such features are considered relatively advanced and unlikely to
+ be useful to most users.
+<!--CONTROLLER-->
+
<!--KEEP-END w3c-html--><!--TT-->
<p>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>
@@ -31366,15 +32195,9 @@
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=#index_size_err>INDEX_SIZE_ERR</a></code> exception must be
- raised instead.</p>
+ must be set to the new value. If the new value is outside the range
+ 0.0 to 1.0 inclusive, then, on setting, an
+ <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception must be raised instead.</p>
<p>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
@@ -31382,9 +32205,7 @@
(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.</p>
+ new value.</p>
<p>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,
@@ -31392,8 +32213,40 @@
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>.</p>
- </div>
+ <p>An element's <dfn id=effective-media-volume>effective media volume</dfn> is determined as
+ follows:</p>
+ <ol><li><p>If the element's <code title=dom-media-muted><a href=#dom-media-muted>muted</a></code>
+ attribute is true, the element's <a href=#effective-media-volume>effective media
+ volume</a> is zero. Abort these steps.</li>
+
+<!--CONTROLLER-->
+ <li><p>If the element has a <a href=#current-media-controller>current media controller</a>
+ and that <code><a href=#mediacontroller>MediaController</a></code> object's <a href=#media-controller-mute-override>media
+ controller mute override</a> is true, the element's
+ <a href=#effective-media-volume>effective media volume</a> is zero. Abort these
+ steps.</li>
+<!--CONTROLLER-->
+
+ <li><p>Let <var title="">volume</var> be the value of the element's
+ <code title=dom-media-volume><a href=#dom-media-volume>volume</a></code> attribute.</li>
+
+<!--CONTROLLER-->
+ <li><p>If the element has a <a href=#current-media-controller>current media controller</a>,
+ multiply <var title="">volume</var> by that
+ <code><a href=#mediacontroller>MediaController</a></code> object's <a href=#media-controller-volume-multiplier>media controller volume
+ multiplier</a>.</li>
+<!--CONTROLLER-->
+
+ <li><p>The element's <a href=#effective-media-volume>effective media volume</a> is <var title="">volume</var>, interpreted relative to the range 0.0 to
+ 1.0, 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.</li>
+
+ </ol></div>
+
<p>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>,
@@ -31451,7 +32304,7 @@
- <h5 id=time-ranges><span class=secno>4.8.10.13 </span>Time ranges</h5>
+ <h5 id=time-ranges><span class=secno>4.8.10.15 </span>Time ranges</h5>
<p>Objects implementing the <code><a href=#timeranges>TimeRanges</a></code> interface
represent a list of ranges (periods) of time.</p>
@@ -31529,7 +32382,7 @@
</div>
- <h5 id=mediaevents><span class=secno>4.8.10.14 </span>Event summary</h5>
+ <h5 id=mediaevents><span class=secno>4.8.10.16 </span>Event summary</h5>
<p><i>This section is non-normative.</i></p>
@@ -31572,15 +32425,6 @@
<td>The user agent is trying to fetch <a href=#media-data>media data</a>, but data is unexpectedly not forthcoming.
<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>.
- <tbody><tr><td><dfn id=event-media-play title=event-media-play><code>play</code></dfn>
- <td><code><a href=#event>Event</a></code>
- <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><code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> is newly false.
- <tr><td><dfn id=event-media-pause title=event-media-pause><code>pause</code></dfn>
- <td><code><a href=#event>Event</a></code>
- <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><code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> is newly true.
-
<tbody><tr><td><dfn id=event-media-loadedmetadata title=event-media-loadedmetadata><code>loadedmetadata</code></dfn>
<td><code><a href=#event>Event</a></code>
<td>The user agent has just determined the duration and dimensions of the <a href=#media-resource>media resource</a>
@@ -31625,23 +32469,35 @@
<td><code><a href=#event>Event</a></code>
<td>Playback has stopped because the end of the <a href=#media-resource>media resource</a> was reached.
<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.
+ <tr><td><dfn id=event-media-durationchange title=event-media-durationchange><code>durationchange</code></dfn>
+ <td><code><a href=#event>Event</a></code>
+ <td>The <code title=dom-media-duration><a href=#dom-media-duration>duration</a></code> attribute has just been updated.
+ <td>
- <tbody><tr><td><dfn id=event-media-ratechange title=event-media-ratechange><code>ratechange</code></dfn>
+ <tbody><tr><td><dfn id=event-media-play title=event-media-play><code>play</code></dfn>
<td><code><a href=#event>Event</a></code>
+ <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><code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> is newly false.
+ <tr><td><dfn id=event-media-pause title=event-media-pause><code>pause</code></dfn>
+ <td><code><a href=#event>Event</a></code>
+ <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><code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> is newly true.
+ <tr><td><dfn id=event-media-ratechange title=event-media-ratechange><code>ratechange</code></dfn>
+ <td><code><a href=#event>Event</a></code>
<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>
- <tr><td><dfn id=event-media-durationchange title=event-media-durationchange><code>durationchange</code></dfn>
- <td><code><a href=#event>Event</a></code>
- <td>The <code title=dom-media-duration><a href=#dom-media-duration>duration</a></code> attribute has just been updated.
- <td>
<tr><td><dfn id=event-media-volumechange title=event-media-volumechange><code>volumechange</code></dfn>
<td><code><a href=#event>Event</a></code>
<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>
- </table><div class=impl>
+ </table><!--CONTROLLER--><p>The last four events in this table are also fired on <code><a href=#mediacontroller>MediaController</a></code> objects.</p>
+<!--CONTROLLER-->
- <h5 id=security-and-privacy-considerations><span class=secno>4.8.10.15 </span>Security and privacy considerations</h5>
+ <div class=impl>
+
+ <h5 id=security-and-privacy-considerations><span class=secno>4.8.10.17 </span>Security and privacy considerations</h5>
+
<p>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
@@ -31688,7 +32544,7 @@
</div>
- <h5 id=best-practices-for-authors-using-media-elements><span class=secno>4.8.10.16 </span>Best practices for authors using media elements</h5>
+ <h5 id=best-practices-for-authors-using-media-elements><span class=secno>4.8.10.18 </span>Best practices for authors using media elements</h5>
<p><i>This section is non-normative.</i></p>
@@ -31707,7 +32563,7 @@
<div class=impl>
- <h5 id=best-practices-for-implementors-of-media-elements><span class=secno>4.8.10.17 </span>Best practices for implementors of media elements</h5>
+ <h5 id=best-practices-for-implementors-of-media-elements><span class=secno>4.8.10.19 </span>Best practices for implementors of media elements</h5>
<p><i>This section is non-normative.</i></p>
@@ -38421,7 +39277,7 @@
<td> 11.6% <td> 12.3% <td> 12.6%
</table><h3 id=forms><span class=secno>4.10 </span>Forms</h3>
- <h4 id=introduction-0><span class=secno>4.10.1 </span>Introduction</h4>
+ <h4 id=introduction-1><span class=secno>4.10.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -48527,7 +49383,7 @@
<div class=impl>
- <h5 id=introduction-1><span class=secno>4.10.22.1 </span>Introduction</h5>
+ <h5 id=introduction-2><span class=secno>4.10.22.1 </span>Introduction</h5>
</div>
@@ -50751,7 +51607,7 @@
<h3 id=links><span class=secno>4.12 </span>Links</h3>
- <h4 id=introduction-2><span class=secno>4.12.1 </span>Introduction</h4>
+ <h4 id=introduction-3><span class=secno>4.12.1 </span>Introduction</h4>
<p>Links are a conceptual construct, created by <code><a href=#the-a-element>a</a></code>,
<code><a href=#the-area-element>area</a></code>, and <code><a href=#the-link-element>link</a></code> elements, that <a href=#represents title=represents>represent</a> a connection between two
@@ -52874,7 +53730,7 @@
-->
- <h3 id=introduction-3><span class=secno>5.1 </span>Introduction</h3>
+ <h3 id=introduction-4><span class=secno>5.1 </span>Introduction</h3>
<h4 id=overview><span class=secno>5.1.1 </span>Overview</h4>
@@ -61668,7 +62524,7 @@
-->
- <h4 id=introduction-4><span class=secno>6.6.1 </span>Introduction</h4>
+ <h4 id=introduction-5><span class=secno>6.6.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -63787,7 +64643,7 @@
<h3 id=scripting><span class=secno>7.1 </span>Scripting</h3>
- <h4 id=introduction-5><span class=secno>7.1.1 </span>Introduction</h4>
+ <h4 id=introduction-6><span class=secno>7.1.1 </span>Introduction</h4>
<p>Various mechanisms can cause author-provided executable code to
run in the context of a document. These mechanisms include, but are
@@ -67066,7 +67922,7 @@
<h3 id=assigning-keyboard-shortcuts><span class=secno>8.4 </span>Assigning keyboard shortcuts</h3>
- <h4 id=introduction-6><span class=secno>8.4.1 </span>Introduction</h4>
+ <h4 id=introduction-7><span class=secno>8.4.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -67864,7 +68720,7 @@
</div>
- <h4 id=introduction-7><span class=secno>8.7.1 </span>Introduction</h4>
+ <h4 id=introduction-8><span class=secno>8.7.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -70989,7 +71845,7 @@
<h2 id=video-conferencing-and-peer-to-peer-communication><span class=secno>9 </span>Video conferencing and peer-to-peer communication</h2>
- <h3 id=introduction-8><span class=secno>9.1 </span>Introduction</h3>
+ <h3 id=introduction-9><span class=secno>9.1 </span>Introduction</h3>
<p><i>This section is non-normative.</i></p>
@@ -72614,7 +73470,7 @@
- <h3 id=introduction-9><span class=secno>10.1 </span>Introduction</h3>
+ <h3 id=introduction-10><span class=secno>10.1 </span>Introduction</h3>
<h4 id=scope-0><span class=secno>10.1.1 </span>Scope</h4>
@@ -76101,7 +76957,7 @@
</div>
- <h4 id=introduction-10><span class=secno>11.4.1 </span>Introduction</h4>
+ <h4 id=introduction-11><span class=secno>11.4.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -76334,7 +77190,7 @@
<h3 id=channel-messaging><span class=secno>11.5 </span><dfn>Channel messaging</dfn></h3>
- <h4 id=introduction-11><span class=secno>11.5.1 </span>Introduction</h4>
+ <h4 id=introduction-12><span class=secno>11.5.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -76784,7 +77640,7 @@
- <h3 id=introduction-12><span class=secno>12.1 </span>Introduction</h3>
+ <h3 id=introduction-13><span class=secno>12.1 </span>Introduction</h3>
<p><i>This section is non-normative.</i></p>
@@ -86934,7 +87790,7 @@
"must".</i></p>
- <h3 id=introduction-13><span class=secno>15.1 </span>Introduction</h3>
+ <h3 id=introduction-14><span class=secno>15.1 </span>Introduction</h3>
<p>In general, user agents are expected to support CSS, and many of
the suggestions in this section are expressed in CSS terms. User
@@ -86972,7 +87828,7 @@
<h3 id=the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>15.2 </span>The CSS user agent style sheet and presentational hints</h3>
- <h4 id=introduction-14><span class=secno>15.2.1 </span>Introduction</h4>
+ <h4 id=introduction-15><span class=secno>15.2.1 </span>Introduction</h4>
<p>The CSS rules given in these subsections are, except where
otherwise specified, expected to be used as part of the user-agent
@@ -89081,7 +89937,7 @@
<h3 id=bindings><span class=secno>15.4 </span>Bindings</h3>
- <h4 id=introduction-15><span class=secno>15.4.1 </span>Introduction</h4>
+ <h4 id=introduction-16><span class=secno>15.4.1 </span>Introduction</h4>
<p>A number of elements have their rendering defined in terms of the
'binding' property. <a href=#refsBECSS>[BECSS]</a></p>
@@ -92552,6 +93408,7 @@
<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>;
+<!--CONTROLLER--> <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code>;<!--CONTROLLER-->
<code title=attr-media-loop><a href=#attr-media-loop>loop</a></code>;
<code title=attr-media-controls><a href=#attr-media-controls>controls</a></code></td>
<td><code><a href=#htmlaudioelement>HTMLAudioElement</a></code></td>
@@ -93584,6 +94441,7 @@
<code title=attr-video-poster><a href=#attr-video-poster>poster</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>;
+<!--CONTROLLER--> <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code>;<!--CONTROLLER-->
<code title=attr-media-loop><a href=#attr-media-loop>loop</a></code>;
<code title=attr-media-controls><a href=#attr-media-controls>controls</a></code>;
<code title=attr-dim-width><a href=#attr-dim-width>width</a></code>;
@@ -94287,6 +95145,13 @@
<code title=attr-style-media><a href=#attr-style-media>style</a></code>
<td> Applicable media
<td> <a href=#valid-media-query>Valid media query</a>
+<!--CONTROLLER-->
+ <tr><th> <code title="">mediagroup</code>
+ <td> <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>audio</a></code>;
+ <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>video</a></code>
+ <td> Groups <a href=#media-element title="media element">media elements</a> together with an implicit <code><a href=#mediacontroller>MediaController</a></code>
+ <td> <a href=#attribute-text>Text</a>
+<!--CONTROLLER-->
<tr><th> <code title="">method</code>
<td> <code title=attr-fs-method><a href=#attr-fs-method>form</a></code>
<td> HTTP method to use for <a href=#form-submission>form submission</a>
@@ -95616,6 +96481,11 @@
Markup Language (MathML)</a></cite>, D. Carlisle, P. Ion, R. Miner,
N. Poppelier. W3C.</dd>
+ <dt id=refsMEDIAFRAG>[MEDIAFRAG]</dt>
+ <dd><cite><a href=http://www.w3.org/2008/WebVideo/Fragments/WD-media-fragments-spec/>Media
+ Fragments URI</a></cite>, R. Troncy, E. Mannens, S. Pfeiffer, D.
+ Van Deursen. W3C.</dd>
+
<dt id=refsMIMESNIFF>[MIMESNIFF]</dt>
<dd><cite><a href=http://tools.ietf.org/html/draft-abarth-mime-sniff>Media
Type Sniffing</a></cite>, A. Barth, I. Hickson. IETF.</dd>
Modified: index
===================================================================
--- index 2011-03-21 03:05:39 UTC (rev 5960)
+++ index 2011-03-21 10:50:25 UTC (rev 5961)
@@ -597,27 +597,36 @@
<li><a href=#the-ready-states><span class=secno>4.8.10.7 </span>The ready states</a></li>
<li><a href=#playing-the-media-resource><span class=secno>4.8.10.8 </span>Playing the media resource</a></li>
<li><a href=#seeking><span class=secno>4.8.10.9 </span>Seeking</a></li>
- <li><a href=#timed-text-tracks><span class=secno>4.8.10.10 </span>Timed text tracks</a>
+ <li><a href=#media-resources-with-multiple-media-tracks><span class=secno>4.8.10.10 </span>Media resources with multiple media tracks</a>
<ol>
- <li><a href=#text-track-model><span class=secno>4.8.10.10.1 </span>Text track model</a></li>
- <li><a href=#sourcing-in-band-text-tracks><span class=secno>4.8.10.10.2 </span>Sourcing in-band text tracks</a></li>
- <li><a href=#sourcing-out-of-band-text-tracks><span class=secno>4.8.10.10.3 </span>Sourcing out-of-band text tracks</a></li>
- <li><a href=#guidelines-for-exposing-cues-in-various-formats-as-text-track-cues><span class=secno>4.8.10.10.4 </span>Guidelines for exposing cues in various formats as
+ <li><a href=#tracklist-objects><span class=secno>4.8.10.10.1 </span><code>TrackList</code> objects</a></li>
+ <li><a href=#selecting-specific-audio-and-video-tracks-declaratively><span class=secno>4.8.10.10.2 </span>Selecting specific audio and video tracks declaratively</a></ol></li>
+ <li><a href=#synchronising-multiple-media-elements><span class=secno>4.8.10.11 </span>Synchronising multiple media elements</a>
+ <ol>
+ <li><a href=#introduction-0><span class=secno>4.8.10.11.1 </span>Introduction</a></li>
+ <li><a href=#media-controllers><span class=secno>4.8.10.11.2 </span>Media controllers</a></li>
+ <li><a href=#assigning-a-media-controller-declaratively><span class=secno>4.8.10.11.3 </span>Assigning a media controller declaratively</a></ol></li>
+ <li><a href=#timed-text-tracks><span class=secno>4.8.10.12 </span>Timed text tracks</a>
+ <ol>
+ <li><a href=#text-track-model><span class=secno>4.8.10.12.1 </span>Text track model</a></li>
+ <li><a href=#sourcing-in-band-text-tracks><span class=secno>4.8.10.12.2 </span>Sourcing in-band text tracks</a></li>
+ <li><a href=#sourcing-out-of-band-text-tracks><span class=secno>4.8.10.12.3 </span>Sourcing out-of-band text tracks</a></li>
+ <li><a href=#guidelines-for-exposing-cues-in-various-formats-as-text-track-cues><span class=secno>4.8.10.12.4 </span>Guidelines for exposing cues in various formats as
text track cues</a></li>
- <li><a href=#text-track-api><span class=secno>4.8.10.10.5 </span>Text track API</a></li>
- <li><a href=#cue-events><span class=secno>4.8.10.10.6 </span>Event definitions</a></ol></li>
- <li><a href=#webvtt-0><span class=secno>4.8.10.11 </span>WebVTT</a>
+ <li><a href=#text-track-api><span class=secno>4.8.10.12.5 </span>Text track API</a></li>
+ <li><a href=#cue-events><span class=secno>4.8.10.12.6 </span>Event definitions</a></ol></li>
+ <li><a href=#webvtt-0><span class=secno>4.8.10.13 </span>WebVTT</a>
<ol>
- <li><a href=#syntax-0><span class=secno>4.8.10.11.1 </span>Syntax</a></li>
- <li><a href=#parsing-0><span class=secno>4.8.10.11.2 </span>Parsing</a></li>
- <li><a href=#webvtt-cue-text-parsing-rules><span class=secno>4.8.10.11.3 </span>WebVTT cue text parsing rules</a></li>
- <li><a href=#webvtt-cue-text-dom-construction-rules><span class=secno>4.8.10.11.4 </span>WebVTT cue text DOM construction rules</a></ol></li>
- <li><a href=#user-interface><span class=secno>4.8.10.12 </span>User interface</a></li>
- <li><a href=#time-ranges><span class=secno>4.8.10.13 </span>Time ranges</a></li>
- <li><a href=#mediaevents><span class=secno>4.8.10.14 </span>Event summary</a></li>
- <li><a href=#security-and-privacy-considerations><span class=secno>4.8.10.15 </span>Security and privacy considerations</a></li>
- <li><a href=#best-practices-for-authors-using-media-elements><span class=secno>4.8.10.16 </span>Best practices for authors using media elements</a></li>
- <li><a href=#best-practices-for-implementors-of-media-elements><span class=secno>4.8.10.17 </span>Best practices for implementors of media elements</a></ol></li>
+ <li><a href=#syntax-0><span class=secno>4.8.10.13.1 </span>Syntax</a></li>
+ <li><a href=#parsing-0><span class=secno>4.8.10.13.2 </span>Parsing</a></li>
+ <li><a href=#webvtt-cue-text-parsing-rules><span class=secno>4.8.10.13.3 </span>WebVTT cue text parsing rules</a></li>
+ <li><a href=#webvtt-cue-text-dom-construction-rules><span class=secno>4.8.10.13.4 </span>WebVTT cue text DOM construction rules</a></ol></li>
+ <li><a href=#user-interface><span class=secno>4.8.10.14 </span>User interface</a></li>
+ <li><a href=#time-ranges><span class=secno>4.8.10.15 </span>Time ranges</a></li>
+ <li><a href=#mediaevents><span class=secno>4.8.10.16 </span>Event summary</a></li>
+ <li><a href=#security-and-privacy-considerations><span class=secno>4.8.10.17 </span>Security and privacy considerations</a></li>
+ <li><a href=#best-practices-for-authors-using-media-elements><span class=secno>4.8.10.18 </span>Best practices for authors using media elements</a></li>
+ <li><a href=#best-practices-for-implementors-of-media-elements><span class=secno>4.8.10.19 </span>Best practices for implementors of media elements</a></ol></li>
<li><a href=#the-canvas-element><span class=secno>4.8.11 </span>The <code>canvas</code> element</a>
<ol>
<li><a href=#2dcontext><span class=secno>4.8.11.1 </span>The 2D context</a>
@@ -667,7 +676,7 @@
<li><a href=#examples-0><span class=secno>4.9.13 </span>Examples</a></ol></li>
<li><a href=#forms><span class=secno>4.10 </span>Forms</a>
<ol>
- <li><a href=#introduction-0><span class=secno>4.10.1 </span>Introduction</a>
+ <li><a href=#introduction-1><span class=secno>4.10.1 </span>Introduction</a>
<ol>
<li><a href="#writing-a-form's-user-interface"><span class=secno>4.10.1.1 </span>Writing a form's user interface</a></li>
<li><a href=#implementing-the-server-side-processing-for-a-form><span class=secno>4.10.1.2 </span>Implementing the server-side processing for a form</a></li>
@@ -749,7 +758,7 @@
<li><a href=#security-forms><span class=secno>4.10.21.4 </span>Security</a></ol></li>
<li><a href=#form-submission><span class=secno>4.10.22 </span>Form submission</a>
<ol>
- <li><a href=#introduction-1><span class=secno>4.10.22.1 </span>Introduction</a></li>
+ <li><a href=#introduction-2><span class=secno>4.10.22.1 </span>Introduction</a></li>
<li><a href=#implicit-submission><span class=secno>4.10.22.2 </span>Implicit submission</a></li>
<li><a href=#form-submission-algorithm><span class=secno>4.10.22.3 </span>Form submission algorithm</a></li>
<li><a href=#constructing-form-data-set><span class=secno>4.10.22.4 </span>Constructing the form data set</a></li>
@@ -781,7 +790,7 @@
<li><a href=#using-the-accesskey-attribute-to-define-a-command-on-other-elements><span class=secno>4.11.5.8 </span>Using the <code title=attr-accesskey>accesskey</code> attribute to define a command on other elements</a></ol></ol></li>
<li><a href=#links><span class=secno>4.12 </span>Links</a>
<ol>
- <li><a href=#introduction-2><span class=secno>4.12.1 </span>Introduction</a></li>
+ <li><a href=#introduction-3><span class=secno>4.12.1 </span>Introduction</a></li>
<li><a href=#links-created-by-a-and-area-elements><span class=secno>4.12.2 </span>Links created by <code>a</code> and <code>area</code> elements</a></li>
<li><a href=#following-hyperlinks><span class=secno>4.12.3 </span>Following hyperlinks</a>
<ol>
@@ -821,7 +830,7 @@
<li><a href=#pseudo-classes><span class=secno>4.14.2 </span>Pseudo-classes</a></ol></ol></li>
<li><a href=#microdata><span class=secno>5 </span>Microdata</a>
<ol>
- <li><a href=#introduction-3><span class=secno>5.1 </span>Introduction</a>
+ <li><a href=#introduction-4><span class=secno>5.1 </span>Introduction</a>
<ol>
<li><a href=#overview><span class=secno>5.1.1 </span>Overview</a></li>
<li><a href=#the-basic-syntax><span class=secno>5.1.2 </span>The basic syntax</a></li>
@@ -911,7 +920,7 @@
<li><a href=#aborting-a-document-load><span class=secno>6.5.11 </span>Aborting a document load</a></ol></li>
<li><a href=#offline><span class=secno>6.6 </span>Offline Web applications</a>
<ol>
- <li><a href=#introduction-4><span class=secno>6.6.1 </span>Introduction</a>
+ <li><a href=#introduction-5><span class=secno>6.6.1 </span>Introduction</a>
<ol>
<li><a href=#appcacheevents><span class=secno>6.6.1.1 </span>Event summary</a></ol></li>
<li><a href=#appcache><span class=secno>6.6.2 </span>Application caches</a></li>
@@ -931,7 +940,7 @@
<ol>
<li><a href=#scripting><span class=secno>7.1 </span>Scripting</a>
<ol>
- <li><a href=#introduction-5><span class=secno>7.1.1 </span>Introduction</a></li>
+ <li><a href=#introduction-6><span class=secno>7.1.1 </span>Introduction</a></li>
<li><a href=#enabling-and-disabling-scripting><span class=secno>7.1.2 </span>Enabling and disabling scripting</a></li>
<li><a href=#processing-model-1><span class=secno>7.1.3 </span>Processing model</a>
<ol>
@@ -979,7 +988,7 @@
<li><a href=#element-level-focus-apis><span class=secno>8.3.4 </span>Element-level focus APIs</a></ol></li>
<li><a href=#assigning-keyboard-shortcuts><span class=secno>8.4 </span>Assigning keyboard shortcuts</a>
<ol>
- <li><a href=#introduction-6><span class=secno>8.4.1 </span>Introduction</a></li>
+ <li><a href=#introduction-7><span class=secno>8.4.1 </span>Introduction</a></li>
<li><a href=#the-accesskey-attribute><span class=secno>8.4.2 </span>The <code>accesskey</code> attribute</a></li>
<li><a href=#processing-model-3><span class=secno>8.4.3 </span>Processing model</a></ol></li>
<li><a href=#contenteditable><span class=secno>8.5 </span>The <code title=attr-contenteditable>contenteditable</code> attribute</a>
@@ -989,7 +998,7 @@
<li><a href=#spelling-and-grammar-checking><span class=secno>8.6 </span>Spelling and grammar checking</a></li>
<li><a href=#dnd><span class=secno>8.7 </span>Drag and drop</a>
<ol>
- <li><a href=#introduction-7><span class=secno>8.7.1 </span>Introduction</a></li>
+ <li><a href=#introduction-8><span class=secno>8.7.1 </span>Introduction</a></li>
<li><a href=#the-drag-data-store><span class=secno>8.7.2 </span>The drag data store</a></li>
<li><a href=#the-datatransfer-interface><span class=secno>8.7.3 </span>The <code>DataTransfer</code> interface</a>
<ol>
@@ -1012,7 +1021,7 @@
<li><a href=#editing-apis><span class=secno>8.9 </span>Editing APIs</a></ol></li>
<li><a href=#video-conferencing-and-peer-to-peer-communication><span class=secno>9 </span>Video conferencing and peer-to-peer communication</a>
<ol>
- <li><a href=#introduction-8><span class=secno>9.1 </span>Introduction</a></li>
+ <li><a href=#introduction-9><span class=secno>9.1 </span>Introduction</a></li>
<li><a href=#obtaining-local-multimedia-content><span class=secno>9.2 </span>Obtaining local multimedia content</a></li>
<li><a href=#stream-api><span class=secno>9.3 </span>Stream API</a></li>
<li><a href=#peer-to-peer-connections><span class=secno>9.4 </span>Peer-to-peer connections</a></li>
@@ -1025,7 +1034,7 @@
<li><a href=#event-definitions-1><span class=secno>10.1 </span>Event definitions</a></li>
<li><a href=#web-messaging><span class=secno>10.2 </span>Cross-document messaging</a>
<ol>
- <li><a href=#introduction-9><span class=secno>10.2.1 </span>Introduction</a></li>
+ <li><a href=#introduction-10><span class=secno>10.2.1 </span>Introduction</a></li>
<li><a href=#security-postmsg><span class=secno>10.2.2 </span>Security</a>
<ol>
<li><a href=#authors><span class=secno>10.2.2.1 </span>Authors</a></li>
@@ -1033,7 +1042,7 @@
<li><a href=#posting-messages><span class=secno>10.2.3 </span>Posting messages</a></ol></li>
<li><a href=#channel-messaging><span class=secno>10.3 </span>Channel messaging</a>
<ol>
- <li><a href=#introduction-10><span class=secno>10.3.1 </span>Introduction</a></li>
+ <li><a href=#introduction-11><span class=secno>10.3.1 </span>Introduction</a></li>
<li><a href=#message-channels><span class=secno>10.3.2 </span>Message channels</a></li>
<li><a href=#message-ports><span class=secno>10.3.3 </span>Message ports</a>
<ol>
@@ -1195,10 +1204,10 @@
<li><a href=#parsing-xhtml-fragments><span class=secno>12.4 </span>Parsing XHTML fragments</a></ol></li>
<li><a href=#rendering><span class=secno>13 </span>Rendering</a>
<ol>
- <li><a href=#introduction-11><span class=secno>13.1 </span>Introduction</a></li>
+ <li><a href=#introduction-12><span class=secno>13.1 </span>Introduction</a></li>
<li><a href=#the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>13.2 </span>The CSS user agent style sheet and presentational hints</a>
<ol>
- <li><a href=#introduction-12><span class=secno>13.2.1 </span>Introduction</a></li>
+ <li><a href=#introduction-13><span class=secno>13.2.1 </span>Introduction</a></li>
<li><a href=#display-types><span class=secno>13.2.2 </span>Display types</a></li>
<li><a href=#margins-and-padding><span class=secno>13.2.3 </span>Margins and padding</a></li>
<li><a href=#alignment><span class=secno>13.2.4 </span>Alignment</a></li>
@@ -1224,7 +1233,7 @@
<li><a href=#toolbars-0><span class=secno>13.3.6 </span>Toolbars</a></ol></li>
<li><a href=#bindings><span class=secno>13.4 </span>Bindings</a>
<ol>
- <li><a href=#introduction-13><span class=secno>13.4.1 </span>Introduction</a></li>
+ <li><a href=#introduction-14><span class=secno>13.4.1 </span>Introduction</a></li>
<li><a href=#the-button-element-0><span class=secno>13.4.2 </span>The <code>button</code> element</a></li>
<li><a href=#the-details-element-0><span class=secno>13.4.3 </span>The <code>details</code> element</a></li>
<li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>13.4.4 </span>The <code>input</code> element as a text entry widget</a></li>
@@ -24809,6 +24818,7 @@
<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>
+<!--CONTROLLER--> <dd><code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code></dd><!--CONTROLLER-->
<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>
@@ -24847,7 +24857,11 @@
whose <a href=#media-data>media data</a> is ostensibly video data, possibly
with associated audio data.</p>
- <p>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
+ <p>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>,
+<!--CONTROLLER-->
+ <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code>,
+<!--CONTROLLER-->
+ <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>.</p>
@@ -24937,7 +24951,8 @@
Similarly, any audio associated with the <a href=#media-resource>media resource</a>
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>.</p>
+ playback position</a>, at the element's <a href=#effective-media-volume>effective media
+ volume</a>.</p>
<p>When a <code><a href=#video>video</a></code> element whose <a href=#media-resource>media
resource</a> has a video channel is neither <a href=#potentially-playing>potentially
@@ -25148,6 +25163,7 @@
<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>
+<!--CONTROLLER--> <dd><code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code></dd><!--CONTROLLER-->
<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>
@@ -25193,14 +25209,19 @@
<p>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.</p>
- <p>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
+ <p>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>,
+<!--CONTROLLER-->
+ <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code>,
+<!--CONTROLLER-->
+ <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>.</p>
<div class=impl>
<p>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>.</p>
+ the <a href=#current-playback-position>current playback position</a>, at the element's
+ <a href=#effective-media-volume>effective media volume</a>.</p>
<p>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.</p>
@@ -25689,24 +25710,35 @@
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>();
+<!--CONTROLLER-->
+ // media controller
+ attribute <span>DOMString</span> <a href=#dom-media-mediagroup title=dom-media-mediaGroup>mediaGroup</a>;
+ attribute <a href=#mediacontroller>MediaController</a> <a href=#dom-media-controller title=dom-media-controller>controller</a>;<!--CONTROLLER-->
// 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>;
<!--KEEP-END w3c-html--><!--TT-->
- // text tracks
+ // tracks
+<!--CONTROLLER-->
+ readonly attribute <a href=#multipletracklist>MultipleTrackList</a> <a href=#dom-media-audiotracks title=dom-media-audioTracks>audioTracks</a>;
+ readonly attribute <a href=#exclusivetracklist>ExclusiveTrackList</a> <a href=#dom-media-videotracks title=dom-media-videoTracks>videoTracks</a>;
+<!--CONTROLLER-->
readonly attribute <a href=#texttrack>TextTrack</a>[] <a href=#dom-media-texttracks title=dom-media-textTracks>textTracks</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);
<!--KEEP-START w3c-html--><!--TT-->
};</pre>
- <p>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
+ <p>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>,
+<!--CONTROLLER-->
+ <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code>,
+<!--CONTROLLER-->
+ <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.</p> <!-- attr-media-audio -->
<!-- proposed v2 (actually v3!) features:
* frame forward / backwards / step(n) while paused
- * hasAudio, hasVideo, hasCaptions, etc
* per-frame control: get current frame; set current frame
* queue of content
- pause current stream and insert content at front of queue to play immediately
@@ -25721,6 +25753,7 @@
* video: applying CSS filters
* an event to notify people of when the video size changes
(e.g. for chained Ogg streams of multiple independent videos)
+ (or for when the current video track changes)
* balance and 3D position audio
* audio filters
* audio synthesis (see <audio> section for use cases)
@@ -25746,6 +25779,17 @@
resource</dfn> is used to refer to the complete set of media data,
e.g. the complete video file, or complete audio file.</p>
+<!--CONTROLLER-->
+ <p>A <a href=#media-resource>media resource</a> can have multiple audio and video
+ tracks. For the purposes of a <a href=#media-element>media element</a>, the video
+ data of the <a href=#media-resource>media resource</a> is only that of the
+ currently selected track (if any) given by the element's <code title=dom-media-videoTracks><a href=#dom-media-videotracks>videoTracks</a></code> attribute, and the
+ audio data of the <a href=#media-resource>media resource</a> is the result of
+ mixing all the currently enabled tracks (if any) given by the
+ element's <code title=dom-media-audioTracks><a href=#dom-media-audiotracks>audioTracks</a></code>
+ attribute.</p>
+<!--CONTROLLER-->
+
<div class=impl>
<p>Except where otherwise specified, the <a href=#task-source>task source</a>
@@ -26606,13 +26650,28 @@
resulting exceptions (if the position is out of range, it is
effectively ignored).</p>
- <p class=example>For example, a fragment identifier could be
- used to indicate a start position.</p>
+ <p class=example>For example, with media formats that
+ support the <cite>Media Fragments URI</cite> fragment
+ identifier syntax, the fragment identifier can be used to
+ indicate a start position. <a href=#refsMEDIAFRAG>[MEDIAFRAG]</a></p>
</li>
+<!--CONTROLLER-->
<li>
+ <p>If either the <a href=#media-resource>media resource</a> or the address of
+ the <var title="">current media resource</var> indicate a
+ particular set of audio or video tracks to enable, then the
+ selected audio tracks must be enabled in the element's <code title=dom-media-audioTracks><a href=#dom-media-audiotracks>audioTracks</a></code> object, and
+ the the first selected video track must be selected in the
+ element's <code title=dom-media-videoTracks><a href=#dom-media-videotracks>videoTracks</a></code> object.</p>
+
+ </li>
+<!--CONTROLLER-->
+
+ <li>
+
<p>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
@@ -27459,15 +27518,23 @@
attribute represents whether the <a href=#media-element>media element</a> is
paused or not. The attribute must initially be true.</p>
+ <p>A <a href=#media-element>media element</a> is a <dfn id=blocked-media-element>blocked media
+ element</dfn> if its <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is in the
+ <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> state or
+ the <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>
+ state, or if the element has <a href=#paused-for-user-interaction>paused for user
+ interaction</a>.</p>
+
<p>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_CURRENT_DATA><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code>,
- <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>.</p>
+ attribute is false, 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>,
+<!--CONTROLLER-->
+ the element either has no <a href=#current-media-controller>current media controller</a> or
+ has a <a href=#current-media-controller>current media controller</a> that is itself not a
+ <a href=#blocked-media-controller>blocked media controller</a>,
+<!--CONTROLLER-->
+ and the element is not a <a href=#blocked-media-element>blocked media element</a>.</p>
<p>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
@@ -27562,6 +27629,10 @@
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.</p>
+ <p class=note>The <code title=dom-media-defaultPlaybackRate><a href=#dom-media-defaultplaybackrate>defaultPlaybackRate</a></code> is
+ used by the user agent when it <a href=#expose-a-user-interface-to-the-user title="expose a user interface
+ to the user">exposes a user interface to the user</a>.</p>
+
<p>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
@@ -27573,25 +27644,18 @@
value, and the playback must change speed (if the element is
<a href=#potentially-playing>potentially playing</a>).</p>
- <p>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.</p>
+ <p>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).</p>
- <p>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.</p>
-
<p id=rateUpdate>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=#queue-a-task>queue a task</a> to <a href=#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>.</p>
+ 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>.</p>
<p>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
@@ -27684,12 +27748,33 @@
</ol></li>
- </ol><hr><p id=media-playback>When a <a href=#media-element>media element</a> is
+ </ol><hr><p>The
+<!--CONTROLLER-->
+ <var title="">effective playback rate</var> is not necessarily the
+ element's <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code>.
+ When a <a href=#media-element>media element</a> has a <a href=#current-media-controller>current media
+ controller</a>, its <var title="">effective playback rate</var>
+ is the element's <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code> multiplied by the
+ <code><a href=#mediacontroller>MediaController</a></code>'s <a href=#media-controller-playback-rate-multiplier>media controller playback rate
+ multiplier</a>. Otherwise, the
+<!--CONTROLLER-->
+ <var title="">effective playback rate</var> is just the
+ element's <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code>.</p>
+
+ <p>If the <var title="">effective playback rate</var> is positive or
+ zero, then the <dfn id=direction-of-playback>direction of playback</dfn> is forwards.
+ Otherwise, it is backwards.</p>
+
+ <p id=media-playback>When a <a href=#media-element>media element</a> is
<a href=#potentially-playing>potentially playing</a> and its <code><a href=#document>Document</a></code> is a
<a href=#fully-active>fully active</a> <code><a href=#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.</p>
+ playback position</a> must increase monotonically at <var title="">effective playback rate</var> units of media time per unit
+ time of wall clock time.</p> <!--XXX will change with bug 12339 -->
+ <p class=note>If the <var title="">effective playback rate</var>
+ is zero, the <a href=#current-playback-position>current playback position</a> doesn't
+ move.</p>
+
<p class=note>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
@@ -27699,19 +27784,14 @@
playback rate) the client doesn't actually have to drop or
interpolate any frames.</p>
- <p>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
+ <p>When the <a href=#direction-of-playback>direction of playback</a> is backwards, any
+ corresponding audio must be muted. When the <var title="">effective
+ playback rate</var> is so low or so high that the user agent cannot
+ play audio usefully, the corresponding audio must also be muted. If
+ the <var title="">effective playback rate</var> is not 1.0, the user
+ agent may apply pitch adjustments to the audio as necessary to
render it faithfully.</p>
- <p>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).</p>
-
<p><a href=#media-element title="media element">Media elements</a> that are
<a href=#potentially-playing>potentially playing</a> while not <a href=#in-a-document>in a
<code>Document</code></a> must not play any video, but should
@@ -28022,13 +28102,709 @@
</div>
+<!--CONTROLLER-->
+ <h5 id=media-resources-with-multiple-media-tracks><span class=secno>4.8.10.10 </span>Media resources with multiple media tracks</h5>
+ <p>A <a href=#media-resource>media resource</a> can have multiple embedded audio
+ and video tracks. For example, in addition to the primary video and
+ audio tracks, a <a href=#media-resource>media resource</a> could have
+ foreign-language dubbed dialogues, director's commentaries, audio
+ descriptions, alternative angles, or sign-language overlays.</p>
+
+ <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-audioTracks><a href=#dom-media-audiotracks>audioTracks</a></code></dt>
+
+ <dd>
+
+ <p>Returns a <code><a href=#multipletracklist>MultipleTrackList</a></code> object representing
+ the audio tracks available in the <a href=#media-resource>media resource</a>.</p>
+
+ </dd>
+
+ <dt><var title="">media</var> . <code title=dom-media-videoTracks><a href=#dom-media-videotracks>videoTracks</a></code></dt>
+
+ <dd>
+
+ <p>Returns an <code><a href=#exclusivetracklist>ExclusiveTrackList</a></code> object representing
+ the video tracks available in the <a href=#media-resource>media resource</a>.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>The <dfn id=dom-media-audiotracks title=dom-media-audioTracks><code>audioTracks</code></dfn>
+ attribute of a <a href=#media-element>media element</a> must return a
+ <a href=#live>live</a> <code><a href=#multipletracklist>MultipleTrackList</a></code> object representing
+ the audio tracks available in the <a href=#media-element>media element</a>'s
+ <a href=#media-resource>media resource</a>. The same object must be returned each
+ time.</p>
+
+ <p>The <dfn id=dom-media-videotracks title=dom-media-videoTracks><code>videoTracks</code></dfn>
+ attribute of a <a href=#media-element>media element</a> must return a
+ <a href=#live>live</a> <code><a href=#exclusivetracklist>ExclusiveTrackList</a></code> object
+ representing the video tracks available in the <a href=#media-element>media
+ element</a>'s <a href=#media-resource>media resource</a>. The same object must
+ be returned each time.</p>
+
+ </div>
+
+
+ <h6 id=tracklist-objects><span class=secno>4.8.10.10.1 </span><code><a href=#tracklist>TrackList</a></code> objects</h6>
+
+ <p>The <code><a href=#multipletracklist>MultipleTrackList</a></code> and
+ <code><a href=#exclusivetracklist>ExclusiveTrackList</a></code> interfaces, used by the attributes
+ defined in the previous section, are substantially similar. Their
+ common features are defined in the <code><a href=#tracklist>TrackList</a></code> interface,
+ from which they both inherit.</p>
+
+ <pre class=idl>interface <dfn id=tracklist>TrackList</dfn> {
+ readonly attribute unsigned long <a href=#dom-tracklist-length title=dom-TrackList-length>length</a>;
+ DOMString <a href=#dom-tracklist-getname title=dom-TrackList-getName>getName</a>(in unsigned long index);
+ DOMString <a href=#dom-tracklist-getlanguage title=dom-TrackList-getLanguage>getLanguage</a>(in unsigned long index);
+};
+
+interface <dfn id=multipletracklist>MultipleTrackList</dfn> : <a href=#tracklist>TrackList</a> {
+ boolean <a href=#dom-tracklist-isenabled title=dom-TrackList-isEnabled>isEnabled</a>(in unsigned long index);
+ void <a href=#dom-tracklist-enable title=dom-TrackList-enable>enable</a>(in unsigned long index);
+ void <a href=#dom-tracklist-disable title=dom-TrackList-disable>disable</a>(in unsigned long index);
+};
+
+interface <dfn id=exclusivetracklist>ExclusiveTrackList</dfn> : <a href=#tracklist>TrackList</a> {
+ readonly attribute unsigned long <a href=#dom-tracklist-selectedindex title=dom-TrackList-selectedIndex>selectedIndex</a>;
+ void <a href=#dom-tracklist-select title=dom-TrackList-select>select</a>(in unsigned long index);
+};</pre>
+
+ <dl class=domintro><dt><var title="">tracks</var> . <code title=dom-TrackList-length><a href=#dom-tracklist-length>length</a></code></dt>
+
+ <dd>
+
+ <p>Returns the number of tracks in the list.</p>
+
+ </dd>
+
+ <dt><var title="">name</var> = <var title="">tracks</var> . <code title=dom-TrackList-getName><a href=#dom-tracklist-getname>getName</a></code>( <var title="">index</var> )</dt>
+
+ <dd>
+
+ <p>Returns the name of the given track, if known, or the empty string otherwise.</p>
+
+ </dd>
+
+ <dt><var title="">language</var> = <var title="">tracks</var> . <code title=dom-TrackList-getLanguage><a href=#dom-tracklist-getlanguage>getLanguage</a></code>( <var title="">index</var> )</dt>
+
+ <dd>
+
+ <p>Returns the language of the given track, if known, or the empty string otherwise.</p>
+
+ </dd>
+
+ <dt><var title="">enabled</var> = <var title="">audioTracks</var> . <code title=dom-TrackList-isEnabled><a href=#dom-tracklist-isenabled>isEnabled</a></code>( <var title="">index</var> )</dt>
+
+ <dd>
+
+ <p>Returns true if the given track is active, and false otherwise.</p>
+
+ </dd>
+
+ <dt><var title="">audioTracks</var> . <code title=dom-TrackList-enable><a href=#dom-tracklist-enable>enable</a></code>( <var title="">index</var> )</dt>
+
+ <dd>
+
+ <p>Enables the given track.</p>
+
+ </dd>
+
+ <dt><var title="">audioTracks</var> . <code title=dom-TrackList-disable><a href=#dom-tracklist-disable>disable</a></code>( <var title="">index</var> )</dt>
+
+ <dd>
+
+ <p>Disables the given track.</p>
+
+ </dd>
+
+ <dt><var title="">videoTracks</var> . <code title=dom-TrackList-selectedIndex><a href=#dom-tracklist-selectedindex>isEnabled</a></code></dt>
+
+ <dd>
+
+ <p>Returns the index of the currently selected track, if any, or −1 otherwise.</p>
+
+ </dd>
+
+ <dt><var title="">videoTracks</var> . <code title=dom-TrackList-select><a href=#dom-tracklist-select>select</a></code>( <var title="">index</var> )</dt>
+
+ <dd>
+
+ <p>Selects the given track.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p class=note>There are only ever two <code><a href=#tracklist>TrackList</a></code>
+ objects (one <code><a href=#multipletracklist>MultipleTrackList</a></code> object and one
+ <code><a href=#exclusivetracklist>ExclusiveTrackList</a></code> object) per <a href=#media-element>media
+ element</a>, even if another <a href=#media-resource>media resource</a> is
+ loaded into the element: the objects are reused.</p>
+
+ <p>The <dfn id=dom-tracklist-length title=dom-TrackList-length><code>length</code></dfn>
+ attribute must return the number of tracks represented by the
+ <code><a href=#tracklist>TrackList</a></code> object at the time of getting.</p>
+
+ <p>Tracks in a <code><a href=#tracklist>TrackList</a></code> object must be consistently
+ ordered. If the <a href=#media-resource>media resource</a> is in a format that
+ defines an order, then that order must be used; otherwise, the order
+ must be the relative order in which the tracks are declared in the
+ <a href=#media-resource>media resource</a>. Each track in a <code><a href=#tracklist>TrackList</a></code>
+ thus has an index; the first has the index 0, and each subsequent
+ track is numbered one higher than the previous one.</p>
+
+ <p>The <dfn id=dom-tracklist-getname title=dom-TrackList-getName><code>getName(<var title="">index</var>)</code></dfn> method must return the name of
+ the track with index <var title="">index</var>, if there is one and
+ it has a name. If there is no such track, then the method must
+ instead throw an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception. If there is
+ a track with index <var title="">index</var>, but it has no name,
+ then the method must return the empty string.</p>
+
+ <p>The <dfn id=dom-tracklist-getlanguage title=dom-TrackList-getLanguage><code>getLanguage(<var title="">index</var>)</code></dfn> method must return the BCP 47
+ language tag of the language of the track with index <var title="">index</var>, if there is one and it has a language. If
+ there is no such track, then the method must instead throw an
+ <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception. If there is a track with
+ index <var title="">index</var>, but it has no language, or the user
+ agent is not able to express that language as a BCP 47 language tag
+ (for example because the language information in the <a href=#media-resource>media
+ resource</a>'s format is a free-form string without a defined
+ interpretation), then the method must return the empty string.</p>
+
+ <hr><p>A <code><a href=#multipletracklist>MultipleTrackList</a></code> object represents a track list
+ where multiple tracks can be enabled simultaneously. Each track is
+ either enabled or disabled.</p>
+
+ <p>The <dfn id=dom-tracklist-isenabled title=dom-TrackList-isEnabled><code>isEnabled(<var title="">index</var>)</code></dfn> method must return true if there
+ is a track with index <var title="">index</var>, and it is currently
+ enabled, false if there is a track with index <var title="">index</var>, but it is currently disabled, and must throw
+ an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception if there is no track with
+ index <var title="">index</var>.</p>
+
+ <p>The <dfn id=dom-tracklist-enable title=dom-TrackList-enable><code>enable(<var title="">index</var>)</code></dfn> method must enable the track with
+ index <var title="">index</var>, if there is one. If there is not,
+ it must instead throw an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>
+
+ <p>The <dfn id=dom-tracklist-disable title=dom-TrackList-disable><code>disable(<var title="">index</var>)</code></dfn> method must disable the track with
+ index <var title="">index</var>, if there is one. If there is not,
+ it must instead throw an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>
+
+ <hr><p>An <code><a href=#exclusivetracklist>ExclusiveTrackList</a></code> object represents a track list
+ where exactly one track is selected at a time.</p>
+
+ <p>The <dfn id=dom-tracklist-selectedindex title=dom-TrackList-selectedIndex><code>selectedIndex</code></dfn>
+ attribute must return the index of the currently selected track. If
+ the <code><a href=#exclusivetracklist>ExclusiveTrackList</a></code> object does not represent any
+ tracks, it must instead return −1.</p>
+
+ <p>The <dfn id=dom-tracklist-select title=dom-TrackList-select><code>select(<var title="">index</var>)</code></dfn> must select the track with index
+ <var title="">index</var>, if there is one, unselecting whichever
+ track was previously selected. If there is no track with index <var title="">index</var>, it must instead throw an
+ <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception.</p>
+
+ </div>
+
+
+ <h6 id=selecting-specific-audio-and-video-tracks-declaratively><span class=secno>4.8.10.10.2 </span>Selecting specific audio and video tracks declaratively</h6>
+
+ <p>The <code title=dom-media-audioTracks><a href=#dom-media-audiotracks>audioTracks</a></code> and
+ <code title=dom-media-videoTracks><a href=#dom-media-videotracks>videoTracks</a></code> attributes
+ allow scripts to select which track should play, but it is also
+ possible to select specific tracks declaratively, by specifying
+ particular tracks in the fragment identifier of the <a href=#url>URL</a>
+ of the <a href=#media-resource>media resource</a>. The format of the fragment
+ identifier depends on the <a href=#mime-type>MIME type</a> of the <a href=#media-resource>media
+ resource</a>. <a href=#refsRFC2046>[RFC2046]</a> <a href=#refsRFC3986>[RFC3986]</a></p>
+
+ <div class=example>
+
+ <p>In this example, a video that uses a format that supports the
+ <cite>Media Fragments URI</cite> fragment identifier syntax is
+ embedded in such a way that the alternative angles labeled
+ "Alternative" are enabled instead of the default video track. <a href=#refsMEDIAFRAG>[MEDIAFRAG]</a></p>
+
+ <pre><video src="myvideo#track=Alternative"></video></pre>
+
+ <!-- XXX need to check with the mediafrag people about whether
+ there's a way to select a specific audio or video track without
+ affecting the default track selection of the other axis, e.g.
+ setting the video track without changing the default audio track
+ selection -->
+
+ </div>
+
+
+ <h5 id=synchronising-multiple-media-elements><span class=secno>4.8.10.11 </span>Synchronising multiple media elements</h5>
+
+ <h6 id=introduction-0><span class=secno>4.8.10.11.1 </span>Introduction</h6>
+
+ <p>Each <a href=#media-element>media element</a> can have a
+ <code><a href=#mediacontroller>MediaController</a></code>. A <code><a href=#mediacontroller>MediaController</a></code> is an
+ object that coordinates the playback of multiple <a href=#media-element title="media
+ element">media elements</a>, for instance so that a sign-language
+ interpreter track can be overlaid on a video track, with the two
+ being kept in sync.</p>
+
+ <p>By default, a <a href=#media-element>media element</a> has no
+ <code><a href=#mediacontroller>MediaController</a></code>. An implicit
+ <code><a href=#mediacontroller>MediaController</a></code> can be assigned using the <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code> content attribute.
+ An explicit <code><a href=#mediacontroller>MediaController</a></code> can be assigned directly
+ using the <code title=dom-media-controller><a href=#dom-media-controller>controller</a></code> IDL
+ attribute.</p>
+
+ <p><a href=#media-element title="media element">Media elements</a> with a
+ <code><a href=#mediacontroller>MediaController</a></code> are said to be <i>slaved</i> to their
+ controller. The <code><a href=#mediacontroller>MediaController</a></code> modifies the playback
+ rate and the playback volume of each of the <a href=#media-element title="media
+ element">media elements</a> slaved to it, and ensures that when
+ any of its slaved <a href=#media-element title="media element">media elements</a>
+ unexpectedly stall, the others are stopped at the same time.</p>
+
+ <div class=example>
+
+ <p>In this example, two audio elements are slaved to the same
+ (implicit) controller so that a waltz played by one audio element
+ is kept exactly synchronised to the "tick tock tock" sound of the
+ metronome played by the second element:</p>
+
+ <pre><audio src="The%20Amelia%20Earhart%20Waltz.wav" controls autoplay mediagroup="song"></audio>
+<audio src="metronomes/3-4.wav" autoplay loop mediagroup="song"></audio></pre>
+
+ <p>Assuming the song keeps a regular tempo throughout and assuming
+ the metronome has the same tempo, this works even though if the
+ metronome file only has one measure's worth of "tick tock tock",
+ because the controller (implied by the <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code> attribute)
+ guarantees that the two elements will be kept synchronised, even if
+ the user rewinds, jumps to a different part of the song, etc (the
+ user agent controls made available by the <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute on the song's
+ <code><a href=#audio>audio</a></code> element affect the
+ <code><a href=#mediacontroller>MediaController</a></code>'s state).</p>
+
+ <p>If the metronome has the wrong rate, its rate can be adjusted by
+ script separately from the song's (using the <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>audio.playbackRate</a></code> IDL
+ attribute). The two elements will play back their <a href=#media-data>media
+ data</a> at different rates, but the ratio will again be
+ controlled by the <code><a href=#mediacontroller>MediaController</a></code>.</p>
+
+ </div>
+
+
+ <h6 id=media-controllers><span class=secno>4.8.10.11.2 </span>Media controllers</h6>
+
+ <pre class=idl>[<a href=#dom-mediacontroller title=dom-MediaController>Constructor</a>]
+interface <dfn id=mediacontroller>MediaController</dfn> {
+ readonly attribute boolean <a href=#dom-mediacontroller-paused title=dom-MediaController-paused>paused</a>;
+ void <a href=#dom-mediacontroller-play title=dom-MediaController-play>play</a>();
+ void <a href=#dom-mediacontroller-pause title=dom-MediaController-pause>pause</a>();
+
+ attribute double <a href=#dom-mediacontroller-defaultplaybackrate title=dom-MediaController-defaultPlaybackRate>defaultPlaybackRate</a>;
+ attribute double <a href=#dom-mediacontroller-playbackrate title=dom-MediaController-playbackRate>playbackRate</a>;
+
+ attribute double <a href=#dom-mediacontroller-volume title=dom-MediaController-volume>volume</a>;
+ attribute boolean <a href=#dom-mediacontroller-muted title=dom-MediaController-muted>muted</a>;
+
+ void <a href=#dom-mediacontroller-seek title=dom-MediaController-seek>seek</a>(in double delta);
+
+ attribute <a href=#function>Function</a> <a href=#handler-mediacontroller-onplay title=handler-MediaController-onplay>onplay</a>;
+ attribute <a href=#function>Function</a> <a href=#handler-mediacontroller-onpause title=handler-MediaController-onpause>onpause</a>;
+ attribute <a href=#function>Function</a> <a href=#handler-mediacontroller-onratechange title=handler-MediaController-onratechange>onratechange</a>;
+ attribute <a href=#function>Function</a> <a href=#handler-mediacontroller-onvolumechange title=handler-MediaController-onvolumechange>onvolumechange</a>;
+};</pre>
+
+ <dl class=domintro><dt><var title="">controller</var> = new <code title=dom-MediaController><a href=#dom-mediacontroller>MediaController</a></code>()</dt>
+
+ <dd>
+
+ <p>Returns a new <code><a href=#mediacontroller>MediaController</a></code> object.</p>
+
+ </dd>
+
+ <dt><var title="">media</var> . <code title=dom-media-controller><a href=#dom-media-controller>controller</a></code> [ = <var title="">controller</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current <code><a href=#mediacontroller>MediaController</a></code> for the <a href=#media-element>media element</a>, if any; returns null otherwise.</p>
+
+ <p>Can be set, to set an explicit <code><a href=#mediacontroller>MediaController</a></code>.
+ Doing so removes the <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code> attribute, if
+ any.</p>
+
+ </dd>
+
+ <dt><var title="">controller</var> . <code title=dom-MediaController-paused><a href=#dom-mediacontroller-paused>paused</a></code></dt>
+
+ <dd>
+
+ <p>Returns true if playback is paused; false otherwise. When this
+ attribute is true, any <a href=#media-element>media element</a> slaved to this
+ controller will be stopped.</p>
+
+ </dd>
+
+ <dt><var title="">controller</var> . <code title=dom-MediaController-play><a href=#dom-mediacontroller-play>play</a></code>()</dt>
+
+ <dd>
+
+ <p>Sets the <code title=dom-MediaController-paused><a href=#dom-mediacontroller-paused>paused</a></code>
+ attribute to false.</p>
+
+ </dd>
+
+ <dt><var title="">controller</var> . <code title=dom-MediaController-pause><a href=#dom-mediacontroller-pause>pause</a></code>()</dt>
+
+ <dd>
+
+ <p>Sets the <code title=dom-MediaController-paused><a href=#dom-mediacontroller-paused>paused</a></code>
+ attribute to true.</p>
+
+ </dd>
+
+ <dt><var title="">controller</var> . <code title=dom-MediaController-defaultPlaybackRate><a href=#dom-mediacontroller-defaultplaybackrate>defaultPlaybackRate</a></code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the default multiplier of the rate of playback.</p>
+
+ <p>Can be set, to change the default multiplier of the rate of
+ playback.</p>
+
+ <p>This default multiplier 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 rate of playback
+ multiplier (<code title=dom-MediaController-playbackRate><a href=#dom-mediacontroller-playbackrate>playbackRate</a></code>) will
+ be returned to this default multiplier.</p>
+
+ </dd>
+
+ <dt><var title="">controller</var> . <code title=dom-MediaController-playbackRate><a href=#dom-mediacontroller-playbackrate>playbackRate</a></code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current multiplier of the rate playback, where 1.0
+ is no multiplier.</p>
+
+ <p>Can be set, to change the rate of playback of the <a href=#media-element title="media element">media elements</a> slaved to this
+ controller.</p>
+
+ </dd>
+
+ <dt><var title="">controller</var> . <code title=dom-MediaController-volume><a href=#dom-mediacontroller-volume>volume</a></code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current playback volume multiplier, as a number in
+ the range 0.0 to 1.0, where 0.0 is the quietest and 1.0 the
+ loudest.</p>
+
+ <p>Can be set, to change the volume multiplier.</p>
+
+ <p>Throws an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> if the new value is not
+ in the range 0.0 .. 1.0.</p>
+
+ </dd>
+
+ <dt><var title="">controller</var> . <code title=dom-MediaController-muted><a href=#dom-mediacontroller-muted>muted</a></code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns true if all audio is muted (regardless of other
+ attributes either on the controller or on any <a href=#media-element title="media
+ element">media elements</a> slaved to this controller), and
+ false otherwise.</p>
+
+ <p>Can be set, to change whether the audio is muted or not.</p>
+
+ </dd>
+
+ <dt><var title="">controller</var> . <code title=dom-MediaController-seek><a href=#dom-mediacontroller-seek>seek</a></code>( <var title="">delta</var> )</dt>
+
+ <dd>
+
+ <p>Advances the <a href=#media-element title="media element">media elements</a>
+ slaved to this controller by <var title="">delta</var> seconds,
+ corrected to take into account their relative playback rates.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>A <a href=#media-element>media element</a> can have a <dfn id=current-media-controller>current media
+ controller</dfn>, which is a <code><a href=#mediacontroller>MediaController</a></code> object.
+ The <dfn id=slaved-media-elements>slaved media elements</dfn> of a
+ <code><a href=#mediacontroller>MediaController</a></code> are the <a href=#media-element title="media
+ element">media elements</a> whose <a href=#current-media-controller>current media
+ controller</a> is that <code><a href=#mediacontroller>MediaController</a></code>.</p>
+
+ <p>All the <a href=#slaved-media-elements>slaved media elements</a> of a
+ <code><a href=#mediacontroller>MediaController</a></code> must use the same clock for their
+ definition of their <a href=#media-timeline>media timeline</a>'s unit time.</p>
+
+ <p>When a <code><a href=#mediacontroller>MediaController</a></code> is created it is a
+ <dfn id=playing-media-controller>playing media controller</dfn>. It can be changed into a
+ <dfn id=paused-media-controller>paused media controller</dfn> and back either via the user
+ agent's user interface (when the element is <a href=#expose-a-user-interface-to-the-user title="expose a
+ user interface to the user">exposing a user interface to the
+ user</a>) or via the APIs defined in this section (see
+ below).</p>
+
+ <p>A <code><a href=#mediacontroller>MediaController</a></code> is a <dfn id=blocked-media-controller>blocked media
+ controller</dfn> if the <code><a href=#mediacontroller>MediaController</a></code> is a
+ <a href=#paused-media-controller>paused media controller</a>, or if any of its <a href=#slaved-media-elements>slaved
+ media elements</a> are <a href=#blocked-media-element title="blocked media
+ element">blocked media elements</a>, or if any of its
+ <a href=#slaved-media-elements>slaved media elements</a> whose <a href=#autoplaying-flag>autoplaying
+ flag</a> is true still have a <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> attribute this is true.</p>
+
+ <p>A <code><a href=#mediacontroller>MediaController</a></code> has a <dfn id=media-controller-default-playback-rate-multiplier>media controller
+ default playback rate multiplier</dfn>, a <dfn id=media-controller-playback-rate-multiplier>media controller
+ playback rate multiplier</dfn>, and a <dfn id=media-controller-volume-multiplier>media controller volume
+ multiplier</dfn>, which must all be set to 1.0 when the
+ <code><a href=#mediacontroller>MediaController</a></code> object is created. A
+ <code><a href=#mediacontroller>MediaController</a></code> also has a <dfn id=media-controller-mute-override>media controller mute
+ override</dfn>, much must initially be false.</p>
+
+ <hr><p>The <dfn id=dom-media-controller title=dom-media-controller><code>controller</code></dfn> attribute
+ on a <a href=#media-element>media element</a>, on getting, must return the
+ element's <a href=#current-media-controller>current media controller</a>, if any, or null
+ otherwise. On setting, it must first remove the element's <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code> attribute, if any,
+ and then set the <a href=#current-media-controller>current media controller</a> to the given
+ value. If the given value is null, the element no longer has a
+ <a href=#current-media-controller>current media controller</a>.</p>
+
+ <hr><p>The <dfn id=dom-mediacontroller title=dom-MediaController><code>MediaController()</code></dfn>
+ constructor, when invoked, must return a newly created
+ <code><a href=#mediacontroller>MediaController</a></code> object.</p>
+
+ <hr><p>The <dfn id=dom-mediacontroller-paused title=dom-MediaController-paused><code>paused</code></dfn>
+ attribute must return true if the <code><a href=#mediacontroller>MediaController</a></code>
+ object is a <a href=#paused-media-controller>paused media controller</a>, and false
+ otherwise.</p>
+
+ <p>When the <dfn id=dom-mediacontroller-pause title=dom-MediaController-pause><code>pause()</code></dfn> method
+ is invoked, the user agent must change the
+ <code><a href=#mediacontroller>MediaController</a></code> into a <a href=#paused-media-controller>paused media
+ controller</a>.</p>
+
+ <p>Whenever the <code><a href=#mediacontroller>MediaController</a></code> changes from a
+ <a href=#playing-media-controller>playing media controller</a> to a <a href=#paused-media-controller>paused media
+ controller</a>, the user agent must <a href=#queue-a-task>queue a task</a> to
+ <a href=#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
+ <code><a href=#mediacontroller>MediaController</a></code>.</p>
+
+ <p>When the <dfn id=dom-mediacontroller-play title=dom-MediaController-play><code>play()</code></dfn> method
+ is invoked, the user agent must change the
+ <code><a href=#mediacontroller>MediaController</a></code> into a <a href=#playing-media-controller>playing media
+ controller</a>.</p>
+
+ <p>Whenever the <code><a href=#mediacontroller>MediaController</a></code> changes from a
+ <a href=#paused-media-controller>paused media controller</a> to a <a href=#playing-media-controller>playing media
+ controller</a>, the user agent must <a href=#queue-a-task>queue a task</a> to
+ <a href=#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
+ <code><a href=#mediacontroller>MediaController</a></code>.</p>
+
+ <hr><p>The <dfn id=dom-mediacontroller-defaultplaybackrate title=dom-MediaController-defaultPlaybackRate><code>defaultPlaybackRate</code></dfn>
+ attribute, on getting, must return the
+ <code><a href=#mediacontroller>MediaController</a></code>'s <a href=#media-controller-default-playback-rate-multiplier>media controller default
+ playback rate multiplier</a>, and on setting, must set the
+ <code><a href=#mediacontroller>MediaController</a></code>'s <a href=#media-controller-default-playback-rate-multiplier>media controller default
+ playback rate multiplier</a> to the new value.</p>
+
+ <p>The <dfn id=dom-mediacontroller-playbackrate title=dom-MediaController-playbackRate><code>playbackRate</code></dfn>
+ attribute, on getting, must return the
+ <code><a href=#mediacontroller>MediaController</a></code>'s <a href=#media-controller-playback-rate-multiplier>media controller playback rate
+ multiplier</a>, and on setting, must set the
+ <code><a href=#mediacontroller>MediaController</a></code>'s <a href=#media-controller-playback-rate-multiplier>media controller playback rate
+ multiplier</a> to the new value.</p>
+
+ <p>Whenever the <a href=#media-controller-default-playback-rate-multiplier>media controller default playback rate
+ multiplier</a> or the <a href=#media-controller-playback-rate-multiplier>media controller playback rate
+ multiplier</a> are changed, the user agent must <a href=#queue-a-task>queue a
+ task</a> to <a href=#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
+ <code><a href=#mediacontroller>MediaController</a></code>.</p>
+
+ <hr><p>The <dfn id=dom-mediacontroller-volume title=dom-MediaController-volume><code>volume</code></dfn>
+ attribute, on getting, must return the
+ <code><a href=#mediacontroller>MediaController</a></code>'s <a href=#media-controller-volume-multiplier>media controller volume
+ multiplier</a>, and on setting, if the new value is in the range
+ 0.0 to 1.0 inclusive, must set the <code><a href=#mediacontroller>MediaController</a></code>'s
+ <a href=#media-controller-volume-multiplier>media controller volume multiplier</a> to the new value. If
+ the new value is outside the range 0.0 to 1.0 inclusive, then, on
+ setting, an <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception must be raised
+ instead.</p>
+
+ <p>The <dfn id=dom-mediacontroller-muted title=dom-MediaController-muted><code>muted</code></dfn>
+ attribute, on getting, must return the
+ <code><a href=#mediacontroller>MediaController</a></code>'s <a href=#media-controller-mute-override>media controller mute
+ override</a>, and on setting, must set the
+ <code><a href=#mediacontroller>MediaController</a></code>'s <a href=#media-controller-mute-override>media controller mute
+ override</a> to the new value.</p>
+
+ <p>Whenever either the <a href=#media-controller-volume-multiplier>media controller volume
+ multiplier</a> or the <a href=#media-controller-mute-override>media controller mute override</a>
+ are changed, the user agent must <a href=#queue-a-task>queue a task</a> to
+ <a href=#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
+ <code><a href=#mediacontroller>MediaController</a></code>.</p>
+
+ <hr><p>The <dfn id=dom-mediacontroller-seek title=dom-MediaController-seek><code>seek()</code></dfn> method
+ must run the following steps for each <a href=#slaved-media-elements title="slaved media
+ elements">slaved media element</a>, if any:</p>
+
+ <ol><li><p>Let <var title="">delta</var> be the method's argument.</li>
+
+ <li><p>Let <var title="">element</var> be the <a href=#slaved-media-elements title="slaved
+ media elements">slaved media element</a> being processed in this
+ iteration.</li>
+
+ <li><p>Let <var title="">effective delta</var> be <var title="">delta</var> multiplied by the value of <var title="">element</var>'s <code title=dom-media-playbackRate><a href=#dom-media-playbackrate>playbackRate</a></code>
+ attribute.</li>
+
+ <li><p>Let <var title="">new position</var> be <var title="">element</var>'s <a href=#current-playback-position>current playback position</a> (in
+ seconds) plus <var title="">effective delta</var>.</li>
+
+ <li><p>Let <var title="">duration</var> be the difference between
+ <var title="">element</var>'s <a href=#earliest-possible-position>earliest possible
+ position</a> (in seconds) and the time at the end of <var title="">element</var>'s <a href=#media-data>media data</a> (in
+ seconds).</li>
+
+ <li>
+
+ <p>If <var title="">element</var>'s <code title=attr-media-loop><a href=#attr-media-loop>loop</a></code> attribute is not specified,
+ then skip this step. Otherwise:</p>
+
+ <p>While <var title="">new position</var> is greater than the time
+ at the end of <var title="">element</var>'s <a href=#media-data>media
+ data</a> (in seconds), decrement <var title="">new
+ position</var> by <var title="">duration</var>.</p>
+
+ <p>While <var title="">new position</var> is less than <var title="">element</var>'s <a href=#earliest-possible-position>earliest possible position</a>
+ (in seconds), increment <var title="">new position</var> by <var title="">duration</var>.</p>
+
+ </li>
+
+ <li><p><a href=#dom-media-seek title=dom-media-seek>Seek</a> <var title="">element</var> to <var title="">new position</var>
+ (interpreted as a time in seconds).</li>
+
+ </ol><hr><p>The following are the <a href=#event-handlers>event handlers</a> that must be
+ supported, as IDL attributes, by all objects implementing the
+ <code><a href=#mediacontroller>MediaController</a></code> interface:</p>
+
+ <table><thead><tr><th><a href=#event-handlers title="event handlers">Event handler</a> <th><a href=#event-handler-event-type>Event handler event type</a>
+ <tbody><tr><td><dfn id=handler-mediacontroller-onplay title=handler-MediaController-onplay><code>onplay</code></dfn> <td> <code title=event-play>play</code>
+ <tr><td><dfn id=handler-mediacontroller-onpause title=handler-MediaController-onpause><code>onpause</code></dfn> <td> <code title=event-pause>pause</code>
+ <tr><td><dfn id=handler-mediacontroller-onratechange title=handler-MediaController-onratechange><code>onratechange</code></dfn> <td> <code title=event-ratechange>ratechange</code>
+ <tr><td><dfn id=handler-mediacontroller-onvolumechange title=handler-MediaController-onvolumechange><code>onvolumechange</code></dfn> <td> <code title=event-volumechange>volumechange</code>
+ </table></div>
+
+
+ <h6 id=assigning-a-media-controller-declaratively><span class=secno>4.8.10.11.3 </span>Assigning a media controller declaratively</h6>
+
+ <p>The <dfn id=attr-media-mediagroup title=attr-media-mediagroup><code>mediagroup</code></dfn> content
+ attribute on <a href=#media-element title="media element">media elements</a> can
+ be used to link multiple <a href=#media-element title="media element">media
+ elements</a> together by implicitly creating a
+ <code><a href=#mediacontroller>MediaController</a></code>.</p>
+
+ <div class=impl>
+
+ <p>When a <a href=#media-element>media element</a> is created with a <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code> attribute, and when
+ a <a href=#media-element>media element</a>'s <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code> attribute is set,
+ changed, or removed, the user agent must run the following
+ steps:</p>
+
+ <ol><li><p>Let <var title="">m</var> be the <a href=#media-element>media element</a>
+ in question.</li>
+
+ <li><p>Let <var title="">m</var> have no <a href=#current-media-controller>current
+ media controller</a>, if it currently has one.</li>
+
+ <li><p>If <var title="">m</var>'s <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code> attribute is being
+ removed, then abort these steps.</li>
+
+ <li>
+
+ <p>If there is another <a href=#media-element>media element</a> whose
+ <code><a href=#document>Document</a></code> is the same as <var title="">m</var>'s
+ <code><a href=#document>Document</a></code> (even if one or both of these elements are
+ not actually <a href=#in-a-document title="in a Document"><em>in</em> the
+ <code>Document</code></a>), and which also has a <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code> attribute, and
+ whose <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code>
+ attribute has the same value as the new value of <var title="">m</var>'s <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code> attribute, then
+ let <var title="">controller</var> be that <a href=#media-element>media
+ element</a>'s <a href=#current-media-controller>current media controller</a>.</p>
+
+ <p>Otherwise, let <var title="">controller</var> be a newly created
+ <code><a href=#mediacontroller>MediaController</a></code>.</p>
+
+ </li>
+
+ <li><p>Let <var title="">m</var>'s <a href=#current-media-controller>current media
+ controller</a> be <var title="">controller</var>.</li>
+
+ </ol><p>The <dfn id=dom-media-mediagroup title=dom-media-mediaGroup><code>mediaGroup</code></dfn> IDL
+ attribute on <a href=#media-element title="media element">media elements</a> must
+ <a href=#reflect>reflect</a> the <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code> content
+ attribute.</p>
+
+ </div>
+
+ <div class=example>
+
+ <p>Multiple <a href=#media-element title="media element">media elements</a>
+ referencing the same <a href=#media-resource>media resource</a> will share a
+ single network request. This can be used to efficiently play two
+ (video) tracks from the same <a href=#media-resource>media resource</a> in two
+ different places on the screen. Used with the <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code> attribute, these
+ elements can also be kept synchronised.</p>
+
+ <p>In this example, a sign-languge interpreter track from a movie
+ file is overlaid on the primary video track of that same video file
+ using two <code><a href=#video>video</a></code> elements, some CSS, and an implicit
+ <code><a href=#mediacontroller>MediaController</a></code>:</p>
+
+ <pre><article>
+ <style scoped>
+ div { margin: 1em auto; position: relative; width: 400px; height: 300px; }
+ video { position; absolute; bottom: 0; right: 0; }
+ video:first-child { width: 100%; height: 100%; }
+ video:last-child { width: 30%; }
+ </style>
+ <div>
+ <video src="movie.vid#track=Video&track=English" autoplay controls mediagroup=movie></video>
+ <video src="movie.vid#track=sign" autoplay mediagroup=movie></video>
+ </div>
+</article></pre>
+
+ </div>
+
+
+<!--v2:
+ <h6>Ducking</h6>
+
+ <p><dfn>Ducking</dfn> is the process of reducing the volume of one
+ audio track when another audio track is playing, for example
+ occasionally reducing the volume of a the soundtrack to allow the
+ viewer to hear an intermittent commentary track.</p>
+
+ (add an "autoduck" attribute that reduces the volume of other media
+ elements with the same <span>current media controller</span>
+ whenever this media element is playing audio)
+
+ <video src="movie.vid#track=Video&track=English" autoplay controls mediagroup=main></video>
+ <audio src="movie.vid#track=Descriptions" mediagroup=main autoduck></audio>
+-->
+
+<!--CONTROLLER-->
+
+
<!--KEEP-END w3c-html--><!--TT-->
<!--<div data-component="other Hixie drafts (editor: Ian Hickson)">-->
- <h5 id=timed-text-tracks><span class=secno>4.8.10.10 </span>Timed text tracks</h5>
+ <h5 id=timed-text-tracks><span class=secno>4.8.10.12 </span>Timed text tracks</h5>
- <h6 id=text-track-model><span class=secno>4.8.10.10.1 </span>Text track model</h6>
+ <h6 id=text-track-model><span class=secno>4.8.10.12.1 </span>Text track model</h6>
<p>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:</p>
@@ -28441,7 +29217,7 @@
order in which the cues were listed in the file).</p>
- <h6 id=sourcing-in-band-text-tracks><span class=secno>4.8.10.10.2 </span>Sourcing in-band text tracks</h6>
+ <h6 id=sourcing-in-band-text-tracks><span class=secno>4.8.10.12.2 </span>Sourcing in-band text tracks</h6>
<p>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
@@ -28518,7 +29294,7 @@
<div class=impl>
- <h6 id=sourcing-out-of-band-text-tracks><span class=secno>4.8.10.10.3 </span>Sourcing out-of-band text tracks</h6>
+ <h6 id=sourcing-out-of-band-text-tracks><span class=secno>4.8.10.12.3 </span>Sourcing out-of-band text tracks</h6>
<p>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
@@ -28790,7 +29566,7 @@
<!--TTVTT-->
<div class=impl>
- <h6 id=guidelines-for-exposing-cues-in-various-formats-as-text-track-cues><span class=secno>4.8.10.10.4 </span><dfn>Guidelines for exposing cues</dfn> in various formats as
+ <h6 id=guidelines-for-exposing-cues-in-various-formats-as-text-track-cues><span class=secno>4.8.10.12.4 </span><dfn>Guidelines for exposing cues</dfn> in various formats as
<a href=#text-track-cue title="text track cue">text track cues</a></h6>
<p>How a specific format's text track cues are to be interpreted
@@ -28849,7 +29625,7 @@
<!--TTVTT-->
- <h6 id=text-track-api><span class=secno>4.8.10.10.5 </span>Text track API</h6>
+ <h6 id=text-track-api><span class=secno>4.8.10.12.5 </span>Text track API</h6>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-textTracks><a href=#dom-media-texttracks>textTracks</a></code> . <code title="">length</code></dt>
<dd>
@@ -29607,7 +30383,7 @@
<div class=impl>
- <h6 id=cue-events><span class=secno>4.8.10.10.6 </span>Event definitions</h6>
+ <h6 id=cue-events><span class=secno>4.8.10.12.6 </span>Event definitions</h6>
<p>The following are the <a href=#event-handlers>event handlers</a> that must be
supported, as IDL attributes, by all objects implementing the
@@ -29629,13 +30405,13 @@
<!--TT-->
- <h5 id=webvtt-0><span class=secno>4.8.10.11 </span>WebVTT</h5>
+ <h5 id=webvtt-0><span class=secno>4.8.10.13 </span>WebVTT</h5>
<p>The <dfn id=webvtt>WebVTT</dfn> format (Web Video Text Tracks) is a
format intended for marking up external text track resources.</p>
- <h6 id=syntax-0><span class=secno>4.8.10.11.1 </span>Syntax</h6>
+ <h6 id=syntax-0><span class=secno>4.8.10.13.1 </span>Syntax</h6>
<p>A <dfn id=webvtt-file>WebVTT file</dfn> must consist of a <a href=#webvtt-file-body>WebVTT file
body</a> encoded as UTF-8 and labeled with the <a href=#mime-type>MIME
@@ -29987,7 +30763,7 @@
<div class=impl>
- <h6 id=parsing-0><span class=secno>4.8.10.11.2 </span>Parsing</h6>
+ <h6 id=parsing-0><span class=secno>4.8.10.13.2 </span>Parsing</h6>
<p>A <dfn id=webvtt-parser>WebVTT parser</dfn>, given an input byte stream and a
<a href=#text-track-list-of-cues>text track list of cues</a> <var title="">output</var>,
@@ -30621,7 +31397,7 @@
<li><p>Return <var title="">result</var>.</li>
- </ol><h6 id=webvtt-cue-text-parsing-rules><span class=secno>4.8.10.11.3 </span><dfn>WebVTT cue text parsing rules</dfn></h6>
+ </ol><h6 id=webvtt-cue-text-parsing-rules><span class=secno>4.8.10.13.3 </span><dfn>WebVTT cue text parsing rules</dfn></h6>
<p>A <dfn id=webvtt-node-object>WebVTT Node Object</dfn> is a conceptual construct used to
represent components of <a href=#webvtt-cue-text>WebVTT cue text</a> so that its
@@ -31207,7 +31983,7 @@
<li><p>Jump to the step labeled <i>loop</i>.</li>
- </ol><h6 id=webvtt-cue-text-dom-construction-rules><span class=secno>4.8.10.11.4 </span><dfn>WebVTT cue text DOM construction rules</dfn></h6>
+ </ol><h6 id=webvtt-cue-text-dom-construction-rules><span class=secno>4.8.10.13.4 </span><dfn>WebVTT cue text DOM construction rules</dfn></h6>
<p>To convert a <a href=#list-of-webvtt-node-objects>List of WebVTT Node Objects</a> to a DOM
tree for <code><a href=#document>Document</a></code> <var title="">owner</var>, user
@@ -31258,7 +32034,7 @@
<!--TT-->
- <h5 id=user-interface><span class=secno>4.8.10.12 </span>User interface</h5>
+ <h5 id=user-interface><span class=secno>4.8.10.14 </span>User interface</h5>
<p>The <dfn id=attr-media-controls title=attr-media-controls><code>controls</code></dfn>
attribute is a <a href=#boolean-attribute>boolean attribute</a>. If present, it
@@ -31286,7 +32062,8 @@
context menu.</p>
<p>Where possible (specifically, for starting, stopping, pausing,
- and unpausing playback, for seeking,
+ and unpausing playback, for seeking, for changing the rate of
+ playback, for fast-forwarding or rewinding,
<!--KEEP-END w3c-html--><!--TT-->
for listing, enabling, and disabling text tracks,
<!--KEEP-START w3c-html--><!--TT-->
@@ -31295,6 +32072,58 @@
the DOM API described above, so that, e.g., all the same events
fire.</p>
+<!--CONTROLLER-->
+ <p>When a <a href=#media-element>media element</a> has a <a href=#current-media-controller>current media
+ controller</a>, the user agent must implement its user interface
+ for pausing and unpausing playback, for seeking, for changing the
+ rate of playback, for fast-forwarding or rewinding, and for muting
+ or changing the volume of audio must be implemented specifically in
+ terms of the <code><a href=#mediacontroller>MediaController</a></code> API exposed on that
+ <a href=#current-media-controller>current media controller</a>.</p>
+<!--CONTROLLER-->
+
+ <p>The "play" function in the user agent's interface must set the
+ <code title="">playbackRate</code> attribute to the value of the
+ <code title="">defaultPlaybackRate</code> attribute before invoking
+ the <code title="">play()</code> method.
+<!--CONTROLLER-->
+ When a <a href=#media-element>media element</a> has a <a href=#current-media-controller>current media
+ controller</a>, the attributes and method with those names on
+ that <code><a href=#mediacontroller>MediaController</a></code> object must be used. Otherwise,
+ the attributes and method with those names on the <a href=#media-element>media
+ element</a> itself must be used.
+<!--CONTROLLER-->
+ </p>
+
+ <p>Features such as fast-forward or rewind must be implemented by
+ only changing the <code title="">playbackRate</code> attribute (and
+ not the <code title="">defaultPlaybackRate</code> attribute).
+<!--CONTROLLER-->
+ Again, when a <a href=#media-element>media element</a> has a <a href=#current-media-controller>current media
+ controller</a>, the attributes with those names on that
+ <code><a href=#mediacontroller>MediaController</a></code> object must be used; otherwise, the
+ attributes with those names on the <a href=#media-element>media element</a> itself
+ must be used.
+<!--CONTROLLER-->
+ </p>
+
+<!--CONTROLLER-->
+
+ <p>When a <a href=#media-element>media element</a> has a <a href=#current-media-controller>current media
+ controller</a>, seeking must be implemented in terms of the <code title=dom-MediaController-seek><a href=#dom-mediacontroller-seek>seek()</a></code> method on that
+ <code><a href=#mediacontroller>MediaController</a></code> object. Otherwise, the user agent must
+ directly <a href=#dom-media-seek title=dom-media-seek>seek</a> to the requested
+ position in the <a href=#media-element>media element</a>'s <a href=#media-timeline>media
+ timeline</a>.</p>
+
+ <p>When a <a href=#media-element>media element</a> has a <a href=#current-media-controller>current media
+ controller</a>, user agents may additionally provide the user
+ with controls that directly manipulate an individual <a href=#media-element>media
+ element</a> without affecting the <code><a href=#mediacontroller>MediaController</a></code>,
+ but such features are considered relatively advanced and unlikely to
+ be useful to most users.
+<!--CONTROLLER-->
+
<!--KEEP-END w3c-html--><!--TT-->
<p>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>
@@ -31349,15 +32178,9 @@
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=#index_size_err>INDEX_SIZE_ERR</a></code> exception must be
- raised instead.</p>
+ must be set to the new value. If the new value is outside the range
+ 0.0 to 1.0 inclusive, then, on setting, an
+ <code><a href=#index_size_err>INDEX_SIZE_ERR</a></code> exception must be raised instead.</p>
<p>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
@@ -31365,9 +32188,7 @@
(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.</p>
+ new value.</p>
<p>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,
@@ -31375,8 +32196,40 @@
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>.</p>
- </div>
+ <p>An element's <dfn id=effective-media-volume>effective media volume</dfn> is determined as
+ follows:</p>
+ <ol><li><p>If the element's <code title=dom-media-muted><a href=#dom-media-muted>muted</a></code>
+ attribute is true, the element's <a href=#effective-media-volume>effective media
+ volume</a> is zero. Abort these steps.</li>
+
+<!--CONTROLLER-->
+ <li><p>If the element has a <a href=#current-media-controller>current media controller</a>
+ and that <code><a href=#mediacontroller>MediaController</a></code> object's <a href=#media-controller-mute-override>media
+ controller mute override</a> is true, the element's
+ <a href=#effective-media-volume>effective media volume</a> is zero. Abort these
+ steps.</li>
+<!--CONTROLLER-->
+
+ <li><p>Let <var title="">volume</var> be the value of the element's
+ <code title=dom-media-volume><a href=#dom-media-volume>volume</a></code> attribute.</li>
+
+<!--CONTROLLER-->
+ <li><p>If the element has a <a href=#current-media-controller>current media controller</a>,
+ multiply <var title="">volume</var> by that
+ <code><a href=#mediacontroller>MediaController</a></code> object's <a href=#media-controller-volume-multiplier>media controller volume
+ multiplier</a>.</li>
+<!--CONTROLLER-->
+
+ <li><p>The element's <a href=#effective-media-volume>effective media volume</a> is <var title="">volume</var>, interpreted relative to the range 0.0 to
+ 1.0, 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.</li>
+
+ </ol></div>
+
<p>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>,
@@ -31434,7 +32287,7 @@
- <h5 id=time-ranges><span class=secno>4.8.10.13 </span>Time ranges</h5>
+ <h5 id=time-ranges><span class=secno>4.8.10.15 </span>Time ranges</h5>
<p>Objects implementing the <code><a href=#timeranges>TimeRanges</a></code> interface
represent a list of ranges (periods) of time.</p>
@@ -31512,7 +32365,7 @@
</div>
- <h5 id=mediaevents><span class=secno>4.8.10.14 </span>Event summary</h5>
+ <h5 id=mediaevents><span class=secno>4.8.10.16 </span>Event summary</h5>
<p><i>This section is non-normative.</i></p>
@@ -31555,15 +32408,6 @@
<td>The user agent is trying to fetch <a href=#media-data>media data</a>, but data is unexpectedly not forthcoming.
<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>.
- <tbody><tr><td><dfn id=event-media-play title=event-media-play><code>play</code></dfn>
- <td><code><a href=#event>Event</a></code>
- <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><code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> is newly false.
- <tr><td><dfn id=event-media-pause title=event-media-pause><code>pause</code></dfn>
- <td><code><a href=#event>Event</a></code>
- <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><code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> is newly true.
-
<tbody><tr><td><dfn id=event-media-loadedmetadata title=event-media-loadedmetadata><code>loadedmetadata</code></dfn>
<td><code><a href=#event>Event</a></code>
<td>The user agent has just determined the duration and dimensions of the <a href=#media-resource>media resource</a>
@@ -31608,23 +32452,35 @@
<td><code><a href=#event>Event</a></code>
<td>Playback has stopped because the end of the <a href=#media-resource>media resource</a> was reached.
<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.
+ <tr><td><dfn id=event-media-durationchange title=event-media-durationchange><code>durationchange</code></dfn>
+ <td><code><a href=#event>Event</a></code>
+ <td>The <code title=dom-media-duration><a href=#dom-media-duration>duration</a></code> attribute has just been updated.
+ <td>
- <tbody><tr><td><dfn id=event-media-ratechange title=event-media-ratechange><code>ratechange</code></dfn>
+ <tbody><tr><td><dfn id=event-media-play title=event-media-play><code>play</code></dfn>
<td><code><a href=#event>Event</a></code>
+ <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><code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> is newly false.
+ <tr><td><dfn id=event-media-pause title=event-media-pause><code>pause</code></dfn>
+ <td><code><a href=#event>Event</a></code>
+ <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><code title=dom-media-paused><a href=#dom-media-paused>paused</a></code> is newly true.
+ <tr><td><dfn id=event-media-ratechange title=event-media-ratechange><code>ratechange</code></dfn>
+ <td><code><a href=#event>Event</a></code>
<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>
- <tr><td><dfn id=event-media-durationchange title=event-media-durationchange><code>durationchange</code></dfn>
- <td><code><a href=#event>Event</a></code>
- <td>The <code title=dom-media-duration><a href=#dom-media-duration>duration</a></code> attribute has just been updated.
- <td>
<tr><td><dfn id=event-media-volumechange title=event-media-volumechange><code>volumechange</code></dfn>
<td><code><a href=#event>Event</a></code>
<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>
- </table><div class=impl>
+ </table><!--CONTROLLER--><p>The last four events in this table are also fired on <code><a href=#mediacontroller>MediaController</a></code> objects.</p>
+<!--CONTROLLER-->
- <h5 id=security-and-privacy-considerations><span class=secno>4.8.10.15 </span>Security and privacy considerations</h5>
+ <div class=impl>
+
+ <h5 id=security-and-privacy-considerations><span class=secno>4.8.10.17 </span>Security and privacy considerations</h5>
+
<p>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
@@ -31671,7 +32527,7 @@
</div>
- <h5 id=best-practices-for-authors-using-media-elements><span class=secno>4.8.10.16 </span>Best practices for authors using media elements</h5>
+ <h5 id=best-practices-for-authors-using-media-elements><span class=secno>4.8.10.18 </span>Best practices for authors using media elements</h5>
<p><i>This section is non-normative.</i></p>
@@ -31690,7 +32546,7 @@
<div class=impl>
- <h5 id=best-practices-for-implementors-of-media-elements><span class=secno>4.8.10.17 </span>Best practices for implementors of media elements</h5>
+ <h5 id=best-practices-for-implementors-of-media-elements><span class=secno>4.8.10.19 </span>Best practices for implementors of media elements</h5>
<p><i>This section is non-normative.</i></p>
@@ -38404,7 +39260,7 @@
<td> 11.6% <td> 12.3% <td> 12.6%
</table><h3 id=forms><span class=secno>4.10 </span>Forms</h3>
- <h4 id=introduction-0><span class=secno>4.10.1 </span>Introduction</h4>
+ <h4 id=introduction-1><span class=secno>4.10.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -48510,7 +49366,7 @@
<div class=impl>
- <h5 id=introduction-1><span class=secno>4.10.22.1 </span>Introduction</h5>
+ <h5 id=introduction-2><span class=secno>4.10.22.1 </span>Introduction</h5>
</div>
@@ -50734,7 +51590,7 @@
<h3 id=links><span class=secno>4.12 </span>Links</h3>
- <h4 id=introduction-2><span class=secno>4.12.1 </span>Introduction</h4>
+ <h4 id=introduction-3><span class=secno>4.12.1 </span>Introduction</h4>
<p>Links are a conceptual construct, created by <code><a href=#the-a-element>a</a></code>,
<code><a href=#the-area-element>area</a></code>, and <code><a href=#the-link-element>link</a></code> elements, that <a href=#represents title=represents>represent</a> a connection between two
@@ -52857,7 +53713,7 @@
-->
- <h3 id=introduction-3><span class=secno>5.1 </span>Introduction</h3>
+ <h3 id=introduction-4><span class=secno>5.1 </span>Introduction</h3>
<h4 id=overview><span class=secno>5.1.1 </span>Overview</h4>
@@ -61654,7 +62510,7 @@
-->
- <h4 id=introduction-4><span class=secno>6.6.1 </span>Introduction</h4>
+ <h4 id=introduction-5><span class=secno>6.6.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -63785,7 +64641,7 @@
<h3 id=scripting><span class=secno>7.1 </span>Scripting</h3>
- <h4 id=introduction-5><span class=secno>7.1.1 </span>Introduction</h4>
+ <h4 id=introduction-6><span class=secno>7.1.1 </span>Introduction</h4>
<p>Various mechanisms can cause author-provided executable code to
run in the context of a document. These mechanisms include, but are
@@ -67075,7 +67931,7 @@
<h3 id=assigning-keyboard-shortcuts><span class=secno>8.4 </span>Assigning keyboard shortcuts</h3>
- <h4 id=introduction-6><span class=secno>8.4.1 </span>Introduction</h4>
+ <h4 id=introduction-7><span class=secno>8.4.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -67873,7 +68729,7 @@
</div>
- <h4 id=introduction-7><span class=secno>8.7.1 </span>Introduction</h4>
+ <h4 id=introduction-8><span class=secno>8.7.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -70998,7 +71854,7 @@
<h2 id=video-conferencing-and-peer-to-peer-communication><span class=secno>9 </span>Video conferencing and peer-to-peer communication</h2>
- <h3 id=introduction-8><span class=secno>9.1 </span>Introduction</h3>
+ <h3 id=introduction-9><span class=secno>9.1 </span>Introduction</h3>
<p><i>This section is non-normative.</i></p>
@@ -72756,7 +73612,7 @@
</div>
- <h4 id=introduction-9><span class=secno>10.2.1 </span>Introduction</h4>
+ <h4 id=introduction-10><span class=secno>10.2.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -72989,7 +73845,7 @@
<h3 id=channel-messaging><span class=secno>10.3 </span><dfn>Channel messaging</dfn></h3>
- <h4 id=introduction-10><span class=secno>10.3.1 </span>Introduction</h4>
+ <h4 id=introduction-11><span class=secno>10.3.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -82899,7 +83755,7 @@
"must".</i></p>
- <h3 id=introduction-11><span class=secno>13.1 </span>Introduction</h3>
+ <h3 id=introduction-12><span class=secno>13.1 </span>Introduction</h3>
<p>In general, user agents are expected to support CSS, and many of
the suggestions in this section are expressed in CSS terms. User
@@ -82937,7 +83793,7 @@
<h3 id=the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>13.2 </span>The CSS user agent style sheet and presentational hints</h3>
- <h4 id=introduction-12><span class=secno>13.2.1 </span>Introduction</h4>
+ <h4 id=introduction-13><span class=secno>13.2.1 </span>Introduction</h4>
<p>The CSS rules given in these subsections are, except where
otherwise specified, expected to be used as part of the user-agent
@@ -85046,7 +85902,7 @@
<h3 id=bindings><span class=secno>13.4 </span>Bindings</h3>
- <h4 id=introduction-13><span class=secno>13.4.1 </span>Introduction</h4>
+ <h4 id=introduction-14><span class=secno>13.4.1 </span>Introduction</h4>
<p>A number of elements have their rendering defined in terms of the
'binding' property. <a href=#refsBECSS>[BECSS]</a></p>
@@ -88517,6 +89373,7 @@
<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>;
+<!--CONTROLLER--> <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code>;<!--CONTROLLER-->
<code title=attr-media-loop><a href=#attr-media-loop>loop</a></code>;
<code title=attr-media-controls><a href=#attr-media-controls>controls</a></code></td>
<td><code><a href=#htmlaudioelement>HTMLAudioElement</a></code></td>
@@ -89549,6 +90406,7 @@
<code title=attr-video-poster><a href=#attr-video-poster>poster</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>;
+<!--CONTROLLER--> <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>mediagroup</a></code>;<!--CONTROLLER-->
<code title=attr-media-loop><a href=#attr-media-loop>loop</a></code>;
<code title=attr-media-controls><a href=#attr-media-controls>controls</a></code>;
<code title=attr-dim-width><a href=#attr-dim-width>width</a></code>;
@@ -90252,6 +91110,13 @@
<code title=attr-style-media><a href=#attr-style-media>style</a></code>
<td> Applicable media
<td> <a href=#valid-media-query>Valid media query</a>
+<!--CONTROLLER-->
+ <tr><th> <code title="">mediagroup</code>
+ <td> <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>audio</a></code>;
+ <code title=attr-media-mediagroup><a href=#attr-media-mediagroup>video</a></code>
+ <td> Groups <a href=#media-element title="media element">media elements</a> together with an implicit <code><a href=#mediacontroller>MediaController</a></code>
+ <td> <a href=#attribute-text>Text</a>
+<!--CONTROLLER-->
<tr><th> <code title="">method</code>
<td> <code title=attr-fs-method><a href=#attr-fs-method>form</a></code>
<td> HTTP method to use for <a href=#form-submission>form submission</a>
@@ -91722,6 +92587,11 @@
Markup Language (MathML)</a></cite>, D. Carlisle, P. Ion, R. Miner,
N. Poppelier. W3C.</dd>
+ <dt id=refsMEDIAFRAG>[MEDIAFRAG]</dt>
+ <dd><cite><a href=http://www.w3.org/2008/WebVideo/Fragments/WD-media-fragments-spec/>Media
+ Fragments URI</a></cite>, R. Troncy, E. Mannens, S. Pfeiffer, D.
+ Van Deursen. W3C.</dd>
+
<dt id=refsMIMESNIFF>[MIMESNIFF]</dt>
<dd><cite><a href=http://tools.ietf.org/html/draft-abarth-mime-sniff>Media
Type Sniffing</a></cite>, A. Barth, I. Hickson. IETF.</dd>
Modified: source
===================================================================
--- source 2011-03-21 03:05:39 UTC (rev 5960)
+++ source 2011-03-21 10:50:25 UTC (rev 5961)
@@ -26642,6 +26642,7 @@
<dd><code title="attr-video-poster">poster</code></dd>
<dd><code title="attr-media-preload">preload</code></dd>
<dd><code title="attr-media-autoplay">autoplay</code></dd>
+<!--END w3c-html--><!--CONTROLLER--> <dd><code title="attr-media-mediagroup">mediagroup</code></dd><!--START w3c-html--><!--CONTROLLER-->
<dd><code title="attr-media-loop">loop</code></dd>
<dd><code title="attr-media-audio">audio</code></dd>
<dd><code title="attr-media-controls">controls</code></dd>
@@ -26684,8 +26685,11 @@
<p>The <code title="attr-media-src">src</code>, <code
title="attr-media-preload">preload</code>, <code
- title="attr-media-autoplay">autoplay</code>, <code
- title="attr-media-loop">loop</code>, and <code
+ title="attr-media-autoplay">autoplay</code>,
+<!--END w3c-html--><!--CONTROLLER-->
+ <code title="attr-media-mediagroup">mediagroup</code>,
+<!--START w3c-html--><!--CONTROLLER-->
+ <code title="attr-media-loop">loop</code>, and <code
title="attr-media-controls">controls</code> attributes are <span
title="media element attributes">the attributes common to all media
elements</span>. The <code title="attr-media-audio">audio</code>
@@ -26790,9 +26794,8 @@
Similarly, any audio associated with the <span>media resource</span>
must, if played, be played synchronized with the <span>current
- playback position</span>, at the specified <span
- title="dom-media-volume">volume</span> with the specified <span
- title="dom-media-muted">mute state</span>.</p>
+ playback position</span>, at the element's <span>effective media
+ volume</span>.</p>
<p>When a <code>video</code> element whose <span>media
resource</span> has a video channel is neither <span>potentially
@@ -27025,6 +27028,7 @@
<dd><code title="attr-media-src">src</code></dd>
<dd><code title="attr-media-preload">preload</code></dd>
<dd><code title="attr-media-autoplay">autoplay</code></dd>
+<!--END w3c-html--><!--CONTROLLER--> <dd><code title="attr-media-mediagroup">mediagroup</code></dd><!--START w3c-html--><!--CONTROLLER-->
<dd><code title="attr-media-loop">loop</code></dd>
<dd><code title="attr-media-controls">controls</code></dd>
<dt>DOM interface:</dt>
@@ -27074,8 +27078,11 @@
<p>The <code title="attr-media-src">src</code>, <code
title="attr-media-preload">preload</code>, <code
- title="attr-media-autoplay">autoplay</code>, <code
- title="attr-media-loop">loop</code>, and <code
+ title="attr-media-autoplay">autoplay</code>,
+<!--END w3c-html--><!--CONTROLLER-->
+ <code title="attr-media-mediagroup">mediagroup</code>,
+<!--START w3c-html--><!--CONTROLLER-->
+ <code title="attr-media-loop">loop</code>, and <code
title="attr-media-controls">controls</code> attributes are <span
title="media element attributes">the attributes common to all media
elements</span>.</p>
@@ -27084,9 +27091,8 @@
<p>When an <code>audio</code> element is <span>potentially
playing</span>, it must have its audio data played synchronized with
- the <span>current playback position</span>, at the specified <span
- title="dom-media-volume">volume</span> with the specified <span
- title="dom-media-muted">mute state</span>.</p>
+ the <span>current playback position</span>, at the element's
+ <span>effective media volume</span>.</p>
<p>When an <code>audio</code> element is not <span>potentially
playing</span>, audio must not play for the element.</p>
@@ -27638,13 +27644,21 @@
attribute boolean <span title="dom-media-loop">loop</span>;
void <span title="dom-media-play">play</span>();
void <span title="dom-media-pause">pause</span>();
+<!--END w3c-html--><!--CONTROLLER-->
+ // media controller
+ attribute <span>DOMString</span> <span title="dom-media-mediaGroup">mediaGroup</span>;
+ attribute <span>MediaController</span> <span title="dom-media-controller">controller</span>;<!--START w3c-html--><!--CONTROLLER-->
// controls
attribute boolean <span title="dom-media-controls">controls</span>;
attribute double <span title="dom-media-volume">volume</span>;
attribute boolean <span title="dom-media-muted">muted</span>;
<!--KEEP-END w3c-html--><!--TT-->
- // text tracks
+ // tracks
+<!--END w3c-html--><!--CONTROLLER-->
+ readonly attribute <span>MultipleTrackList</span> <span title="dom-media-audioTracks">audioTracks</span>;
+ readonly attribute <span>ExclusiveTrackList</span> <span title="dom-media-videoTracks">videoTracks</span>;
+<!--START w3c-html--><!--CONTROLLER-->
readonly attribute <span>TextTrack</span>[] <span title="dom-media-textTracks">textTracks</span>;
<span>MutableTextTrack</span> <span title="dom-media-addTrack">addTrack</span>(in DOMString kind, in optional DOMString label, in optional DOMString language);
<!--KEEP-START w3c-html--><!--TT-->
@@ -27653,15 +27667,17 @@
<p>The <dfn>media element attributes</dfn>, <code
title="attr-media-src">src</code>, <code
title="attr-media-preload">preload</code>, <code
- title="attr-media-autoplay">autoplay</code>, <code
- title="attr-media-loop">loop</code>, and <code
+ title="attr-media-autoplay">autoplay</code>,
+<!--END w3c-html--><!--CONTROLLER-->
+ <code title="attr-media-mediagroup">mediagroup</code>,
+<!--START w3c-html--><!--CONTROLLER-->
+ <code title="attr-media-loop">loop</code>, and <code
title="attr-media-controls">controls</code>, apply to all <span
title="media element">media elements</span>. They are defined in
this section.</p> <!-- attr-media-audio -->
<!-- proposed v2 (actually v3!) features:
* frame forward / backwards / step(n) while paused
- * hasAudio, hasVideo, hasCaptions, etc
* per-frame control: get current frame; set current frame
* queue of content
- pause current stream and insert content at front of queue to play immediately
@@ -27676,6 +27692,7 @@
* video: applying CSS filters
* an event to notify people of when the video size changes
(e.g. for chained Ogg streams of multiple independent videos)
+ (or for when the current video track changes)
* balance and 3D position audio
* audio filters
* audio synthesis (see <audio> section for use cases)
@@ -27701,6 +27718,18 @@
resource</dfn> is used to refer to the complete set of media data,
e.g. the complete video file, or complete audio file.</p>
+<!--END w3c-html--><!--CONTROLLER-->
+ <p>A <span>media resource</span> can have multiple audio and video
+ tracks. For the purposes of a <span>media element</span>, the video
+ data of the <span>media resource</span> is only that of the
+ currently selected track (if any) given by the element's <code
+ title="dom-media-videoTracks">videoTracks</code> attribute, and the
+ audio data of the <span>media resource</span> is the result of
+ mixing all the currently enabled tracks (if any) given by the
+ element's <code title="dom-media-audioTracks">audioTracks</code>
+ attribute.</p>
+<!--START w3c-html--><!--CONTROLLER-->
+
<div class="impl">
<p>Except where otherwise specified, the <span>task source</span>
@@ -28736,13 +28765,31 @@
resulting exceptions (if the position is out of range, it is
effectively ignored).</p>
- <p class="example">For example, a fragment identifier could be
- used to indicate a start position.</p>
+ <p class="example">For example, with media formats that
+ support the <cite>Media Fragments URI</cite> fragment
+ identifier syntax, the fragment identifier can be used to
+ indicate a start position. <a
+ href="#refsMEDIAFRAG">[MEDIAFRAG]</a></p>
</li>
+<!--END w3c-html--><!--CONTROLLER-->
<li>
+ <p>If either the <span>media resource</span> or the address of
+ the <var title="">current media resource</var> indicate a
+ particular set of audio or video tracks to enable, then the
+ selected audio tracks must be enabled in the element's <code
+ title="dom-media-audioTracks">audioTracks</code> object, and
+ the the first selected video track must be selected in the
+ element's <code
+ title="dom-media-videoTracks">videoTracks</code> object.</p>
+
+ </li>
+<!--START w3c-html--><!--CONTROLLER-->
+
+ <li>
+
<p>Once the <code
title="dom-media-readyState">readyState</code> attribute
reaches <code
@@ -29740,16 +29787,24 @@
attribute represents whether the <span>media element</span> is
paused or not. The attribute must initially be true.</p>
+ <p>A <span>media element</span> is a <dfn>blocked media
+ element</dfn> if its <code
+ title="dom-media-readyState">readyState</code> attribute is in the
+ <code title="dom-media-HAVE_NOTHING">HAVE_NOTHING</code> state or
+ the <code title="dom-media-HAVE_METADATA">HAVE_METADATA</code>
+ state, or if the element has <span>paused for user
+ interaction</span>.</p>
+
<p>A <span>media element</span> is said to be <dfn>potentially
playing</dfn> when its <code title="dom-media-paused">paused</code>
- attribute is false, the <code
- title="dom-media-readyState">readyState</code> attribute is either
- <code title="dom-media-HAVE_CURRENT_DATA">HAVE_CURRENT_DATA</code>,
- <code title="dom-media-HAVE_FUTURE_DATA">HAVE_FUTURE_DATA</code>, or
- <code title="dom-media-HAVE_ENOUGH_DATA">HAVE_ENOUGH_DATA</code>,
- the element has not <span>ended playback</span>, playback has not
- <span>stopped due to errors</span>, and the element has not <span>paused
- for user interaction</span>.</p>
+ attribute is false, the element has not <span>ended playback</span>,
+ playback has not <span>stopped due to errors</span>,
+<!--END w3c-html--><!--CONTROLLER-->
+ the element either has no <span>current media controller</span> or
+ has a <span>current media controller</span> that is itself not a
+ <span>blocked media controller</span>,
+<!--START w3c-html--><!--CONTROLLER-->
+ and the element is not a <span>blocked media element</span>.</p>
<p>A <span>media element</span> is said to have <dfn>ended
playback</dfn> when the element's <code
@@ -29867,6 +29922,11 @@
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.</p>
+ <p class="note">The <code
+ title="dom-media-defaultPlaybackRate">defaultPlaybackRate</code> is
+ used by the user agent when it <span title="expose a user interface
+ to the user">exposes a user interface to the user</span>.</p>
+
<p>The <dfn
title="dom-media-playbackRate"><code>playbackRate</code></dfn>
attribute gives the speed at which the <span>media resource</span>
@@ -29880,28 +29940,21 @@
value, and the playback must change speed (if the element is
<span>potentially playing</span>).</p>
- <p>If the <code title="dom-media-playbackRate">playbackRate</code>
- is positive or zero, then the <dfn>direction of playback</dfn> is
- forwards. Otherwise, it is backwards.</p>
+ <p>The <code title="dom-media-playbackRate">playbackRate</code> can
+ be 0.0, in which case the <span>current playback position</span>
+ doesn't move, despite playback not being paused (<code
+ title="dom-media-paused">paused</code> doesn't become true, and the
+ <code title="event-media-pause">pause</code> event doesn't fire).</p>
- <p>The "play" function in a user agent's interface must set the
- <code title="dom-media-playbackRate">playbackRate</code> attribute
- to the value of the <code
- title="dom-media-defaultPlaybackRate">defaultPlaybackRate</code>
- attribute before invoking the <code
- title="dom-media-play">play()</code> method's steps. Features such
- as fast-forward or rewind must be implemented by only changing the
- <code title="dom-media-playbackRate">playbackRate</code>
- attribute.</p>
-
<p id="rateUpdate">When the <code
title="dom-media-defaultPlaybackRate">defaultPlaybackRate</code> or
<code title="dom-media-playbackRate">playbackRate</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 <span>queue a task</span> to <span>fire a simple
- event</span> named <code title="event-media-ratechange">ratechange</code>
- at the <span>media element</span>.</p>
+ event</span> named <code
+ title="event-media-ratechange">ratechange</code> at the <span>media
+ element</span>.</p>
<p>The <dfn title="dom-media-played"><code>played</code></dfn>
attribute must return a new static <span>normalized
@@ -30034,13 +30087,36 @@
<hr>
+ <p>The
+<!--END w3c-html--><!--CONTROLLER-->
+ <var title="">effective playback rate</var> is not necessarily the
+ element's <code title="dom-media-playbackRate">playbackRate</code>.
+ When a <span>media element</span> has a <span>current media
+ controller</span>, its <var title="">effective playback rate</var>
+ is the element's <code
+ title="dom-media-playbackRate">playbackRate</code> multiplied by the
+ <code>MediaController</code>'s <span>media controller playback rate
+ multiplier</span>. Otherwise, the
+<!--START w3c-html--><!--CONTROLLER-->
+ <var title="">effective playback rate</var> is just the
+ element's <code
+ title="dom-media-playbackRate">playbackRate</code>.</p>
+
+ <p>If the <var title="">effective playback rate</var> is positive or
+ zero, then the <dfn>direction of playback</dfn> is forwards.
+ Otherwise, it is backwards.</p>
+
<p id="media-playback">When a <span>media element</span> is
<span>potentially playing</span> and its <code>Document</code> is a
<span>fully active</span> <code>Document</code>, its <span>current
- playback position</span> must increase monotonically at <code
- title="dom-media-playbackRate">playbackRate</code> units of media
- time per unit time of wall clock time.</p>
+ playback position</span> must increase monotonically at <var
+ title="">effective playback rate</var> units of media time per unit
+ time of wall clock time.</p> <!--XXX will change with bug 12339 -->
+ <p class="note">If the <var title="">effective playback rate</var>
+ is zero, the <span>current playback position</span> doesn't
+ move.</p>
+
<p class="note">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
@@ -30050,22 +30126,14 @@
playback rate) the client doesn't actually have to drop or
interpolate any frames.</p>
- <p>When the <code title="dom-media-playbackRate">playbackRate</code>
- is negative (playback is backwards), any corresponding audio must be
- muted. When the <code
- title="dom-media-playbackRate">playbackRate</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">playbackRate</code> is not 1.0, the
- user agent may apply pitch adjustments to the audio as necessary to
+ <p>When the <span>direction of playback</span> is backwards, any
+ corresponding audio must be muted. When the <var title="">effective
+ playback rate</var> is so low or so high that the user agent cannot
+ play audio usefully, the corresponding audio must also be muted. If
+ the <var title="">effective playback rate</var> is not 1.0, the user
+ agent may apply pitch adjustments to the audio as necessary to
render it faithfully.</p>
- <p>The <code title="dom-media-playbackRate">playbackRate</code> can
- be 0.0, in which case the <span>current playback position</span>
- doesn't move, despite playback not being paused (<code
- title="dom-media-paused">paused</code> doesn't become true, and the
- <code title="event-media-pause">pause</code> event doesn't fire).</p>
-
<p><span title="media element">Media elements</span> that are
<span>potentially playing</span> while not <span>in a
<code>Document</code></span> must not play any video, but should
@@ -30427,8 +30495,803 @@
</div>
+<!--END w3c-html--><!--CONTROLLER-->
+ <h5>Media resources with multiple media tracks</h5>
+ <p>A <span>media resource</span> can have multiple embedded audio
+ and video tracks. For example, in addition to the primary video and
+ audio tracks, a <span>media resource</span> could have
+ foreign-language dubbed dialogues, director's commentaries, audio
+ descriptions, alternative angles, or sign-language overlays.</p>
+
+ <dl class="domintro">
+
+ <dt><var title="">media</var> . <code title="dom-media-audioTracks">audioTracks</code></dt>
+
+ <dd>
+
+ <p>Returns a <code>MultipleTrackList</code> object representing
+ the audio tracks available in the <span>media resource</span>.</p>
+
+ </dd>
+
+ <dt><var title="">media</var> . <code title="dom-media-videoTracks">videoTracks</code></dt>
+
+ <dd>
+
+ <p>Returns an <code>ExclusiveTrackList</code> object representing
+ the video tracks available in the <span>media resource</span>.</p>
+
+ </dd>
+
+ </dl>
+
+ <div class="impl">
+
+ <p>The <dfn
+ title="dom-media-audioTracks"><code>audioTracks</code></dfn>
+ attribute of a <span>media element</span> must return a
+ <span>live</span> <code>MultipleTrackList</code> object representing
+ the audio tracks available in the <span>media element</span>'s
+ <span>media resource</span>. The same object must be returned each
+ time.</p>
+
+ <p>The <dfn
+ title="dom-media-videoTracks"><code>videoTracks</code></dfn>
+ attribute of a <span>media element</span> must return a
+ <span>live</span> <code>ExclusiveTrackList</code> object
+ representing the video tracks available in the <span>media
+ element</span>'s <span>media resource</span>. The same object must
+ be returned each time.</p>
+
+ </div>
+
+
+ <h6><code>TrackList</code> objects</h6>
+
+ <p>The <code>MultipleTrackList</code> and
+ <code>ExclusiveTrackList</code> interfaces, used by the attributes
+ defined in the previous section, are substantially similar. Their
+ common features are defined in the <code>TrackList</code> interface,
+ from which they both inherit.</p>
+
+ <pre class="idl">interface <dfn>TrackList</dfn> {
+ readonly attribute unsigned long <span title="dom-TrackList-length">length</span>;
+ DOMString <span title="dom-TrackList-getName">getName</span>(in unsigned long index);
+ DOMString <span title="dom-TrackList-getLanguage">getLanguage</span>(in unsigned long index);
+};
+
+interface <dfn>MultipleTrackList</dfn> : <span>TrackList</span> {
+ boolean <span title="dom-TrackList-isEnabled">isEnabled</span>(in unsigned long index);
+ void <span title="dom-TrackList-enable">enable</span>(in unsigned long index);
+ void <span title="dom-TrackList-disable">disable</span>(in unsigned long index);
+};
+
+interface <dfn>ExclusiveTrackList</dfn> : <span>TrackList</span> {
+ readonly attribute unsigned long <span title="dom-TrackList-selectedIndex">selectedIndex</span>;
+ void <span title="dom-TrackList-select">select</span>(in unsigned long index);
+};</pre>
+
+ <dl class="domintro">
+
+ <dt><var title="">tracks</var> . <code title="dom-TrackList-length">length</code></dt>
+
+ <dd>
+
+ <p>Returns the number of tracks in the list.</p>
+
+ </dd>
+
+ <dt><var title="">name</var> = <var title="">tracks</var> . <code title="dom-TrackList-getName">getName</code>( <var title="">index</var> )</dt>
+
+ <dd>
+
+ <p>Returns the name of the given track, if known, or the empty string otherwise.</p>
+
+ </dd>
+
+ <dt><var title="">language</var> = <var title="">tracks</var> . <code title="dom-TrackList-getLanguage">getLanguage</code>( <var title="">index</var> )</dt>
+
+ <dd>
+
+ <p>Returns the language of the given track, if known, or the empty string otherwise.</p>
+
+ </dd>
+
+ <dt><var title="">enabled</var> = <var title="">audioTracks</var> . <code title="dom-TrackList-isEnabled">isEnabled</code>( <var title="">index</var> )</dt>
+
+ <dd>
+
+ <p>Returns true if the given track is active, and false otherwise.</p>
+
+ </dd>
+
+ <dt><var title="">audioTracks</var> . <code title="dom-TrackList-enable">enable</code>( <var title="">index</var> )</dt>
+
+ <dd>
+
+ <p>Enables the given track.</p>
+
+ </dd>
+
+ <dt><var title="">audioTracks</var> . <code title="dom-TrackList-disable">disable</code>( <var title="">index</var> )</dt>
+
+ <dd>
+
+ <p>Disables the given track.</p>
+
+ </dd>
+
+ <dt><var title="">videoTracks</var> . <code title="dom-TrackList-selectedIndex">isEnabled</code></dt>
+
+ <dd>
+
+ <p>Returns the index of the currently selected track, if any, or −1 otherwise.</p>
+
+ </dd>
+
+ <dt><var title="">videoTracks</var> . <code title="dom-TrackList-select">select</code>( <var title="">index</var> )</dt>
+
+ <dd>
+
+ <p>Selects the given track.</p>
+
+ </dd>
+
+ </dl>
+
+ <div class="impl">
+
+ <p class="note">There are only ever two <code>TrackList</code>
+ objects (one <code>MultipleTrackList</code> object and one
+ <code>ExclusiveTrackList</code> object) per <span>media
+ element</span>, even if another <span>media resource</span> is
+ loaded into the element: the objects are reused.</p>
+
+ <p>The <dfn title="dom-TrackList-length"><code>length</code></dfn>
+ attribute must return the number of tracks represented by the
+ <code>TrackList</code> object at the time of getting.</p>
+
+ <p>Tracks in a <code>TrackList</code> object must be consistently
+ ordered. If the <span>media resource</span> is in a format that
+ defines an order, then that order must be used; otherwise, the order
+ must be the relative order in which the tracks are declared in the
+ <span>media resource</span>. Each track in a <code>TrackList</code>
+ thus has an index; the first has the index 0, and each subsequent
+ track is numbered one higher than the previous one.</p>
+
+ <p>The <dfn title="dom-TrackList-getName"><code>getName(<var
+ title="">index</var>)</code></dfn> method must return the name of
+ the track with index <var title="">index</var>, if there is one and
+ it has a name. If there is no such track, then the method must
+ instead throw an <code>INDEX_SIZE_ERR</code> exception. If there is
+ a track with index <var title="">index</var>, but it has no name,
+ then the method must return the empty string.</p>
+
+ <p>The <dfn title="dom-TrackList-getLanguage"><code>getLanguage(<var
+ title="">index</var>)</code></dfn> method must return the BCP 47
+ language tag of the language of the track with index <var
+ title="">index</var>, if there is one and it has a language. If
+ there is no such track, then the method must instead throw an
+ <code>INDEX_SIZE_ERR</code> exception. If there is a track with
+ index <var title="">index</var>, but it has no language, or the user
+ agent is not able to express that language as a BCP 47 language tag
+ (for example because the language information in the <span>media
+ resource</span>'s format is a free-form string without a defined
+ interpretation), then the method must return the empty string.</p>
+
+ <hr>
+
+ <p>A <code>MultipleTrackList</code> object represents a track list
+ where multiple tracks can be enabled simultaneously. Each track is
+ either enabled or disabled.</p>
+
+ <p>The <dfn title="dom-TrackList-isEnabled"><code>isEnabled(<var
+ title="">index</var>)</code></dfn> method must return true if there
+ is a track with index <var title="">index</var>, and it is currently
+ enabled, false if there is a track with index <var
+ title="">index</var>, but it is currently disabled, and must throw
+ an <code>INDEX_SIZE_ERR</code> exception if there is no track with
+ index <var title="">index</var>.</p>
+
+ <p>The <dfn title="dom-TrackList-enable"><code>enable(<var
+ title="">index</var>)</code></dfn> method must enable the track with
+ index <var title="">index</var>, if there is one. If there is not,
+ it must instead throw an <code>INDEX_SIZE_ERR</code> exception.</p>
+
+ <p>The <dfn title="dom-TrackList-disable"><code>disable(<var
+ title="">index</var>)</code></dfn> method must disable the track with
+ index <var title="">index</var>, if there is one. If there is not,
+ it must instead throw an <code>INDEX_SIZE_ERR</code> exception.</p>
+
+ <hr>
+
+ <p>An <code>ExclusiveTrackList</code> object represents a track list
+ where exactly one track is selected at a time.</p>
+
+ <p>The <dfn
+ title="dom-TrackList-selectedIndex"><code>selectedIndex</code></dfn>
+ attribute must return the index of the currently selected track. If
+ the <code>ExclusiveTrackList</code> object does not represent any
+ tracks, it must instead return −1.</p>
+
+ <p>The <dfn title="dom-TrackList-select"><code>select(<var
+ title="">index</var>)</code></dfn> must select the track with index
+ <var title="">index</var>, if there is one, unselecting whichever
+ track was previously selected. If there is no track with index <var
+ title="">index</var>, it must instead throw an
+ <code>INDEX_SIZE_ERR</code> exception.</p>
+
+ </div>
+
+
+ <h6>Selecting specific audio and video tracks declaratively</h6>
+
+ <p>The <code title="dom-media-audioTracks">audioTracks</code> and
+ <code title="dom-media-videoTracks">videoTracks</code> attributes
+ allow scripts to select which track should play, but it is also
+ possible to select specific tracks declaratively, by specifying
+ particular tracks in the fragment identifier of the <span>URL</span>
+ of the <span>media resource</span>. The format of the fragment
+ identifier depends on the <span>MIME type</span> of the <span>media
+ resource</span>. <a href="#refsRFC2046">[RFC2046]</a> <a
+ href="#refsRFC3986">[RFC3986]</a></p>
+
+ <div class="example">
+
+ <p>In this example, a video that uses a format that supports the
+ <cite>Media Fragments URI</cite> fragment identifier syntax is
+ embedded in such a way that the alternative angles labeled
+ "Alternative" are enabled instead of the default video track. <a
+ href="#refsMEDIAFRAG">[MEDIAFRAG]</a></p>
+
+ <pre><video src="myvideo#track=Alternative"></video></pre>
+
+ <!-- XXX need to check with the mediafrag people about whether
+ there's a way to select a specific audio or video track without
+ affecting the default track selection of the other axis, e.g.
+ setting the video track without changing the default audio track
+ selection -->
+
+ </div>
+
+
+ <h5>Synchronising multiple media elements</h5>
+
+ <h6>Introduction</h6>
+
+ <p>Each <span>media element</span> can have a
+ <code>MediaController</code>. A <code>MediaController</code> is an
+ object that coordinates the playback of multiple <span title="media
+ element">media elements</span>, for instance so that a sign-language
+ interpreter track can be overlaid on a video track, with the two
+ being kept in sync.</p>
+
+ <p>By default, a <span>media element</span> has no
+ <code>MediaController</code>. An implicit
+ <code>MediaController</code> can be assigned using the <code
+ title="attr-media-mediagroup">mediagroup</code> content attribute.
+ An explicit <code>MediaController</code> can be assigned directly
+ using the <code title="dom-media-controller">controller</code> IDL
+ attribute.</p>
+
+ <p><span title="media element">Media elements</span> with a
+ <code>MediaController</code> are said to be <i>slaved</i> to their
+ controller. The <code>MediaController</code> modifies the playback
+ rate and the playback volume of each of the <span title="media
+ element">media elements</span> slaved to it, and ensures that when
+ any of its slaved <span title="media element">media elements</span>
+ unexpectedly stall, the others are stopped at the same time.</p>
+
+ <div class="example">
+
+ <p>In this example, two audio elements are slaved to the same
+ (implicit) controller so that a waltz played by one audio element
+ is kept exactly synchronised to the "tick tock tock" sound of the
+ metronome played by the second element:</p>
+
+ <pre><audio src="The%20Amelia%20Earhart%20Waltz.wav" controls autoplay mediagroup="song"></audio>
+<audio src="metronomes/3-4.wav" autoplay loop mediagroup="song"></audio></pre>
+
+ <p>Assuming the song keeps a regular tempo throughout and assuming
+ the metronome has the same tempo, this works even though if the
+ metronome file only has one measure's worth of "tick tock tock",
+ because the controller (implied by the <code
+ title="attr-media-mediagroup">mediagroup</code> attribute)
+ guarantees that the two elements will be kept synchronised, even if
+ the user rewinds, jumps to a different part of the song, etc (the
+ user agent controls made available by the <code
+ title="attr-media-controls">controls</code> attribute on the song's
+ <code>audio</code> element affect the
+ <code>MediaController</code>'s state).</p>
+
+ <p>If the metronome has the wrong rate, its rate can be adjusted by
+ script separately from the song's (using the <code
+ title="dom-media-playbackRate">audio.playbackRate</code> IDL
+ attribute). The two elements will play back their <span>media
+ data</span> at different rates, but the ratio will again be
+ controlled by the <code>MediaController</code>.</p>
+
+ </div>
+
+
+ <h6>Media controllers</h6>
+
+ <pre class="idl">[<span title="dom-MediaController">Constructor</span>]
+interface <dfn>MediaController</dfn> {
+ readonly attribute boolean <span title="dom-MediaController-paused">paused</span>;
+ void <span title="dom-MediaController-play">play</span>();
+ void <span title="dom-MediaController-pause">pause</span>();
+
+ attribute double <span title="dom-MediaController-defaultPlaybackRate">defaultPlaybackRate</span>;
+ attribute double <span title="dom-MediaController-playbackRate">playbackRate</span>;
+
+ attribute double <span title="dom-MediaController-volume">volume</span>;
+ attribute boolean <span title="dom-MediaController-muted">muted</span>;
+
+ void <span title="dom-MediaController-seek">seek</span>(in double delta);
+
+ attribute <span>Function</span> <span title="handler-MediaController-onplay">onplay</span>;
+ attribute <span>Function</span> <span title="handler-MediaController-onpause">onpause</span>;
+ attribute <span>Function</span> <span title="handler-MediaController-onratechange">onratechange</span>;
+ attribute <span>Function</span> <span title="handler-MediaController-onvolumechange">onvolumechange</span>;
+};</pre>
+
+ <dl class="domintro">
+
+ <dt><var title="">controller</var> = new <code title="dom-MediaController">MediaController</code>()</dt>
+
+ <dd>
+
+ <p>Returns a new <code>MediaController</code> object.</p>
+
+ </dd>
+
+ <dt><var title="">media</var> . <code title="dom-media-controller">controller</code> [ = <var title="">controller</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current <code>MediaController</code> for the <span>media element</span>, if any; returns null otherwise.</p>
+
+ <p>Can be set, to set an explicit <code>MediaController</code>.
+ Doing so removes the <code
+ title="attr-media-mediagroup">mediagroup</code> attribute, if
+ any.</p>
+
+ </dd>
+
+ <dt><var title="">controller</var> . <code title="dom-MediaController-paused">paused</code></dt>
+
+ <dd>
+
+ <p>Returns true if playback is paused; false otherwise. When this
+ attribute is true, any <span>media element</span> slaved to this
+ controller will be stopped.</p>
+
+ </dd>
+
+ <dt><var title="">controller</var> . <code title="dom-MediaController-play">play</code>()</dt>
+
+ <dd>
+
+ <p>Sets the <code title="dom-MediaController-paused">paused</code>
+ attribute to false.</p>
+
+ </dd>
+
+ <dt><var title="">controller</var> . <code title="dom-MediaController-pause">pause</code>()</dt>
+
+ <dd>
+
+ <p>Sets the <code title="dom-MediaController-paused">paused</code>
+ attribute to true.</p>
+
+ </dd>
+
+ <dt><var title="">controller</var> . <code title="dom-MediaController-defaultPlaybackRate">defaultPlaybackRate</code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the default multiplier of the rate of playback.</p>
+
+ <p>Can be set, to change the default multiplier of the rate of
+ playback.</p>
+
+ <p>This default multiplier 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 rate of playback
+ multiplier (<code
+ title="dom-MediaController-playbackRate">playbackRate</code>) will
+ be returned to this default multiplier.</p>
+
+ </dd>
+
+ <dt><var title="">controller</var> . <code title="dom-MediaController-playbackRate">playbackRate</code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current multiplier of the rate playback, where 1.0
+ is no multiplier.</p>
+
+ <p>Can be set, to change the rate of playback of the <span
+ title="media element">media elements</span> slaved to this
+ controller.</p>
+
+ </dd>
+
+ <dt><var title="">controller</var> . <code title="dom-MediaController-volume">volume</code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current playback volume multiplier, as a number in
+ the range 0.0 to 1.0, where 0.0 is the quietest and 1.0 the
+ loudest.</p>
+
+ <p>Can be set, to change the volume multiplier.</p>
+
+ <p>Throws an <code>INDEX_SIZE_ERR</code> if the new value is not
+ in the range 0.0 .. 1.0.</p>
+
+ </dd>
+
+ <dt><var title="">controller</var> . <code title="dom-MediaController-muted">muted</code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns true if all audio is muted (regardless of other
+ attributes either on the controller or on any <span title="media
+ element">media elements</span> slaved to this controller), and
+ false otherwise.</p>
+
+ <p>Can be set, to change whether the audio is muted or not.</p>
+
+ </dd>
+
+ <dt><var title="">controller</var> . <code title="dom-MediaController-seek">seek</code>( <var title="">delta</var> )</dt>
+
+ <dd>
+
+ <p>Advances the <span title="media element">media elements</span>
+ slaved to this controller by <var title="">delta</var> seconds,
+ corrected to take into account their relative playback rates.</p>
+
+ </dd>
+
+ </dl>
+
+ <div class="impl">
+
+ <p>A <span>media element</span> can have a <dfn>current media
+ controller</dfn>, which is a <code>MediaController</code> object.
+ The <dfn>slaved media elements</dfn> of a
+ <code>MediaController</code> are the <span title="media
+ element">media elements</span> whose <span>current media
+ controller</span> is that <code>MediaController</code>.</p>
+
+ <p>All the <span>slaved media elements</span> of a
+ <code>MediaController</code> must use the same clock for their
+ definition of their <span>media timeline</span>'s unit time.</p>
+
+ <p>When a <code>MediaController</code> is created it is a
+ <dfn>playing media controller</dfn>. It can be changed into a
+ <dfn>paused media controller</dfn> and back either via the user
+ agent's user interface (when the element is <span title="expose a
+ user interface to the user">exposing a user interface to the
+ user</span>) or via the APIs defined in this section (see
+ below).</p>
+
+ <p>A <code>MediaController</code> is a <dfn>blocked media
+ controller</dfn> if the <code>MediaController</code> is a
+ <span>paused media controller</span>, or if any of its <span>slaved
+ media elements</span> are <span title="blocked media
+ element">blocked media elements</span>, or if any of its
+ <span>slaved media elements</span> whose <span>autoplaying
+ flag</span> is true still have a <code
+ title="dom-media-paused">paused</code> attribute this is true.</p>
+
+ <p>A <code>MediaController</code> has a <dfn>media controller
+ default playback rate multiplier</dfn>, a <dfn>media controller
+ playback rate multiplier</dfn>, and a <dfn>media controller volume
+ multiplier</dfn>, which must all be set to 1.0 when the
+ <code>MediaController</code> object is created. A
+ <code>MediaController</code> also has a <dfn>media controller mute
+ override</dfn>, much must initially be false.</p>
+
+ <hr>
+
+ <p>The <dfn
+ title="dom-media-controller"><code>controller</code></dfn> attribute
+ on a <span>media element</span>, on getting, must return the
+ element's <span>current media controller</span>, if any, or null
+ otherwise. On setting, it must first remove the element's <code
+ title="attr-media-mediagroup">mediagroup</code> attribute, if any,
+ and then set the <span>current media controller</span> to the given
+ value. If the given value is null, the element no longer has a
+ <span>current media controller</span>.</p>
+
+ <hr>
+
+ <p>The <dfn
+ title="dom-MediaController"><code>MediaController()</code></dfn>
+ constructor, when invoked, must return a newly created
+ <code>MediaController</code> object.</p>
+
+ <hr>
+
+ <p>The <dfn
+ title="dom-MediaController-paused"><code>paused</code></dfn>
+ attribute must return true if the <code>MediaController</code>
+ object is a <span>paused media controller</span>, and false
+ otherwise.</p>
+
+ <p>When the <dfn
+ title="dom-MediaController-pause"><code>pause()</code></dfn> method
+ is invoked, the user agent must change the
+ <code>MediaController</code> into a <span>paused media
+ controller</span>.</p>
+
+ <p>Whenever the <code>MediaController</code> changes from a
+ <span>playing media controller</span> to a <span>paused media
+ controller</span>, the user agent must <span>queue a task</span> to
+ <span>fire a simple event</span> named <code
+ title="event-media-pause">pause</code> at the
+ <code>MediaController</code>.</p>
+
+ <p>When the <dfn
+ title="dom-MediaController-play"><code>play()</code></dfn> method
+ is invoked, the user agent must change the
+ <code>MediaController</code> into a <span>playing media
+ controller</span>.</p>
+
+ <p>Whenever the <code>MediaController</code> changes from a
+ <span>paused media controller</span> to a <span>playing media
+ controller</span>, the user agent must <span>queue a task</span> to
+ <span>fire a simple event</span> named <code
+ title="event-media-play">play</code> at the
+ <code>MediaController</code>.</p>
+
+ <hr>
+
+ <p>The <dfn
+ title="dom-MediaController-defaultPlaybackRate"><code>defaultPlaybackRate</code></dfn>
+ attribute, on getting, must return the
+ <code>MediaController</code>'s <span>media controller default
+ playback rate multiplier</span>, and on setting, must set the
+ <code>MediaController</code>'s <span>media controller default
+ playback rate multiplier</span> to the new value.</p>
+
+ <p>The <dfn
+ title="dom-MediaController-playbackRate"><code>playbackRate</code></dfn>
+ attribute, on getting, must return the
+ <code>MediaController</code>'s <span>media controller playback rate
+ multiplier</span>, and on setting, must set the
+ <code>MediaController</code>'s <span>media controller playback rate
+ multiplier</span> to the new value.</p>
+
+ <p>Whenever the <span>media controller default playback rate
+ multiplier</span> or the <span>media controller playback rate
+ multiplier</span> are changed, the user agent must <span>queue a
+ task</span> to <span>fire a simple event</span> named <code
+ title="event-media-ratechange">ratechange</code> at the
+ <code>MediaController</code>.</p>
+
+ <hr>
+
+ <p>The <dfn
+ title="dom-MediaController-volume"><code>volume</code></dfn>
+ attribute, on getting, must return the
+ <code>MediaController</code>'s <span>media controller volume
+ multiplier</span>, and on setting, if the new value is in the range
+ 0.0 to 1.0 inclusive, must set the <code>MediaController</code>'s
+ <span>media controller volume multiplier</span> to the new value. If
+ the new value is outside the range 0.0 to 1.0 inclusive, then, on
+ setting, an <code>INDEX_SIZE_ERR</code> exception must be raised
+ instead.</p>
+
+ <p>The <dfn
+ title="dom-MediaController-muted"><code>muted</code></dfn>
+ attribute, on getting, must return the
+ <code>MediaController</code>'s <span>media controller mute
+ override</span>, and on setting, must set the
+ <code>MediaController</code>'s <span>media controller mute
+ override</span> to the new value.</p>
+
+ <p>Whenever either the <span>media controller volume
+ multiplier</span> or the <span>media controller mute override</span>
+ are changed, the user agent must <span>queue a task</span> to
+ <span>fire a simple event</span> named <code
+ title="event-media-volumechange">volumechange</code> at the
+ <code>MediaController</code>.</p>
+
+ <hr>
+
+ <p>The <dfn
+ title="dom-MediaController-seek"><code>seek()</code></dfn> method
+ must run the following steps for each <span title="slaved media
+ elements">slaved media element</span>, if any:</p>
+
+ <ol>
+
+ <li><p>Let <var title="">delta</var> be the method's argument.</p></li>
+
+ <li><p>Let <var title="">element</var> be the <span title="slaved
+ media elements">slaved media element</span> being processed in this
+ iteration.</p></li>
+
+ <li><p>Let <var title="">effective delta</var> be <var
+ title="">delta</var> multiplied by the value of <var
+ title="">element</var>'s <code
+ title="dom-media-playbackRate">playbackRate</code>
+ attribute.</p></li>
+
+ <li><p>Let <var title="">new position</var> be <var
+ title="">element</var>'s <span>current playback position</span> (in
+ seconds) plus <var title="">effective delta</var>.</p></li>
+
+ <li><p>Let <var title="">duration</var> be the difference between
+ <var title="">element</var>'s <span>earliest possible
+ position</span> (in seconds) and the time at the end of <var
+ title="">element</var>'s <span>media data</span> (in
+ seconds).</p></li>
+
+ <li>
+
+ <p>If <var title="">element</var>'s <code
+ title="attr-media-loop">loop</code> attribute is not specified,
+ then skip this step. Otherwise:</p>
+
+ <p>While <var title="">new position</var> is greater than the time
+ at the end of <var title="">element</var>'s <span>media
+ data</span> (in seconds), decrement <var title="">new
+ position</var> by <var title="">duration</var>.</p>
+
+ <p>While <var title="">new position</var> is less than <var
+ title="">element</var>'s <span>earliest possible position</span>
+ (in seconds), increment <var title="">new position</var> by <var
+ title="">duration</var>.</p>
+
+ </li>
+
+ <li><p><span title="dom-media-seek">Seek</span> <var
+ title="">element</var> to <var title="">new position</var>
+ (interpreted as a time in seconds).</p></li>
+
+ </ol>
+
+ <hr>
+
+ <p>The following are the <span>event handlers</span> that must be
+ supported, as IDL attributes, by all objects implementing the
+ <code>MediaController</code> interface:</p>
+
+ <table>
+ <thead>
+ <tr><th><span title="event handlers">Event handler</span> <th><span>Event handler event type</span>
+ <tbody>
+ <tr><td><dfn title="handler-MediaController-onplay"><code>onplay</code></dfn> <td> <code title="event-play">play</code>
+ <tr><td><dfn title="handler-MediaController-onpause"><code>onpause</code></dfn> <td> <code title="event-pause">pause</code>
+ <tr><td><dfn title="handler-MediaController-onratechange"><code>onratechange</code></dfn> <td> <code title="event-ratechange">ratechange</code>
+ <tr><td><dfn title="handler-MediaController-onvolumechange"><code>onvolumechange</code></dfn> <td> <code title="event-volumechange">volumechange</code>
+ </table>
+
+ </div>
+
+
+ <h6>Assigning a media controller declaratively</h6>
+
+ <p>The <dfn
+ title="attr-media-mediagroup"><code>mediagroup</code></dfn> content
+ attribute on <span title="media element">media elements</span> can
+ be used to link multiple <span title="media element">media
+ elements</span> together by implicitly creating a
+ <code>MediaController</code>.</p>
+
+ <div class="impl">
+
+ <p>When a <span>media element</span> is created with a <code
+ title="attr-media-mediagroup">mediagroup</code> attribute, and when
+ a <span>media element</span>'s <code
+ title="attr-media-mediagroup">mediagroup</code> attribute is set,
+ changed, or removed, the user agent must run the following
+ steps:</p>
+
+ <ol>
+
+ <li><p>Let <var title="">m</var> be the <span>media element</span>
+ in question.</p></li>
+
+ <li><p>Let <var title="">m</var> have no <span>current
+ media controller</span>, if it currently has one.</p></li>
+
+ <li><p>If <var title="">m</var>'s <code
+ title="attr-media-mediagroup">mediagroup</code> attribute is being
+ removed, then abort these steps.</p></li>
+
+ <li>
+
+ <p>If there is another <span>media element</span> whose
+ <code>Document</code> is the same as <var title="">m</var>'s
+ <code>Document</code> (even if one or both of these elements are
+ not actually <span title="in a Document"><em>in</em> the
+ <code>Document</code></span>), and which also has a <code
+ title="attr-media-mediagroup">mediagroup</code> attribute, and
+ whose <code title="attr-media-mediagroup">mediagroup</code>
+ attribute has the same value as the new value of <var
+ title="">m</var>'s <code
+ title="attr-media-mediagroup">mediagroup</code> attribute, then
+ let <var title="">controller</var> be that <span>media
+ element</span>'s <span>current media controller</span>.</p>
+
+ <p>Otherwise, let <var title="">controller</var> be a newly created
+ <code>MediaController</code>.</p>
+
+ </li>
+
+ <li><p>Let <var title="">m</var>'s <span>current media
+ controller</span> be <var title="">controller</var>.</p></li>
+
+ </ol>
+
+ <p>The <dfn
+ title="dom-media-mediaGroup"><code>mediaGroup</code></dfn> IDL
+ attribute on <span title="media element">media elements</span> must
+ <span>reflect</span> the <code
+ title="attr-media-mediagroup">mediagroup</code> content
+ attribute.</p>
+
+ </div>
+
+ <div class="example">
+
+ <p>Multiple <span title="media element">media elements</span>
+ referencing the same <span>media resource</span> will share a
+ single network request. This can be used to efficiently play two
+ (video) tracks from the same <span>media resource</span> in two
+ different places on the screen. Used with the <code
+ title="attr-media-mediagroup">mediagroup</code> attribute, these
+ elements can also be kept synchronised.</p>
+
+ <p>In this example, a sign-languge interpreter track from a movie
+ file is overlaid on the primary video track of that same video file
+ using two <code>video</code> elements, some CSS, and an implicit
+ <code>MediaController</code>:</p>
+
+ <pre><article>
+ <style scoped>
+ div { margin: 1em auto; position: relative; width: 400px; height: 300px; }
+ video { position; absolute; bottom: 0; right: 0; }
+ video:first-child { width: 100%; height: 100%; }
+ video:last-child { width: 30%; }
+ </style>
+ <div>
+ <video src="movie.vid#track=Video&track=English" autoplay controls mediagroup=movie></video>
+ <video src="movie.vid#track=sign" autoplay mediagroup=movie></video>
+ </div>
+</article></pre>
+
+ </div>
+
+
+<!--v2:
+ <h6>Ducking</h6>
+
+ <p><dfn>Ducking</dfn> is the process of reducing the volume of one
+ audio track when another audio track is playing, for example
+ occasionally reducing the volume of a the soundtrack to allow the
+ viewer to hear an intermittent commentary track.</p>
+
+ (add an "autoduck" attribute that reduces the volume of other media
+ elements with the same <span>current media controller</span>
+ whenever this media element is playing audio)
+
+ <video src="movie.vid#track=Video&track=English" autoplay controls mediagroup=main></video>
+ <audio src="movie.vid#track=Descriptions" mediagroup=main autoduck></audio>
+-->
+
+<!--START w3c-html--><!--CONTROLLER-->
+
+
<!--KEEP-END w3c-html--><!--TT-->
<!--<div data-component="other Hixie drafts (editor: Ian Hickson)">-->
<h5>Timed text tracks</h5>
@@ -34274,7 +35137,8 @@
context menu.</p>
<p>Where possible (specifically, for starting, stopping, pausing,
- and unpausing playback, for seeking,
+ and unpausing playback, for seeking, for changing the rate of
+ playback, for fast-forwarding or rewinding,
<!--KEEP-END w3c-html--><!--TT-->
for listing, enabling, and disabling text tracks,
<!--KEEP-START w3c-html--><!--TT-->
@@ -34283,6 +35147,59 @@
the DOM API described above, so that, e.g., all the same events
fire.</p>
+<!--END w3c-html--><!--CONTROLLER-->
+ <p>When a <span>media element</span> has a <span>current media
+ controller</span>, the user agent must implement its user interface
+ for pausing and unpausing playback, for seeking, for changing the
+ rate of playback, for fast-forwarding or rewinding, and for muting
+ or changing the volume of audio must be implemented specifically in
+ terms of the <code>MediaController</code> API exposed on that
+ <span>current media controller</span>.</p>
+<!--START w3c-html--><!--CONTROLLER-->
+
+ <p>The "play" function in the user agent's interface must set the
+ <code title="">playbackRate</code> attribute to the value of the
+ <code title="">defaultPlaybackRate</code> attribute before invoking
+ the <code title="">play()</code> method.
+<!--END w3c-html--><!--CONTROLLER-->
+ When a <span>media element</span> has a <span>current media
+ controller</span>, the attributes and method with those names on
+ that <code>MediaController</code> object must be used. Otherwise,
+ the attributes and method with those names on the <span>media
+ element</span> itself must be used.
+<!--START w3c-html--><!--CONTROLLER-->
+ </p>
+
+ <p>Features such as fast-forward or rewind must be implemented by
+ only changing the <code title="">playbackRate</code> attribute (and
+ not the <code title="">defaultPlaybackRate</code> attribute).
+<!--END w3c-html--><!--CONTROLLER-->
+ Again, when a <span>media element</span> has a <span>current media
+ controller</span>, the attributes with those names on that
+ <code>MediaController</code> object must be used; otherwise, the
+ attributes with those names on the <span>media element</span> itself
+ must be used.
+<!--START w3c-html--><!--CONTROLLER-->
+ </p>
+
+<!--END w3c-html--><!--CONTROLLER-->
+
+ <p>When a <span>media element</span> has a <span>current media
+ controller</span>, seeking must be implemented in terms of the <code
+ title="dom-MediaController-seek">seek()</code> method on that
+ <code>MediaController</code> object. Otherwise, the user agent must
+ directly <span title="dom-media-seek">seek</span> to the requested
+ position in the <span>media element</span>'s <span>media
+ timeline</span>.</p>
+
+ <p>When a <span>media element</span> has a <span>current media
+ controller</span>, user agents may additionally provide the user
+ with controls that directly manipulate an individual <span>media
+ element</span> without affecting the <code>MediaController</code>,
+ but such features are considered relatively advanced and unlikely to
+ be useful to most users.
+<!--START w3c-html--><!--CONTROLLER-->
+
<!--KEEP-END w3c-html--><!--TT-->
<p>For the purposes of listing chapters in the <span>media
resource</span>, only <span title="text track">text tracks</span>
@@ -34346,15 +35263,9 @@
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>INDEX_SIZE_ERR</code> exception must be
- raised instead.</p>
+ must be set to the new value. If the new value is outside the range
+ 0.0 to 1.0 inclusive, then, on setting, an
+ <code>INDEX_SIZE_ERR</code> exception must be raised instead.</p>
<p>The <dfn title="dom-media-muted"><code>muted</code></dfn>
attribute must return true if the audio channels are muted and false
@@ -34362,9 +35273,7 @@
(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
- <span>media resource</span> must then be muted, and if false, audio
- playback must then be enabled.</p>
+ new value.</p>
<p>Whenever either the <code title="dom-media-muted">muted</code> or
<code title="dom-media-volume">volume</code> attributes are changed,
@@ -34373,6 +35282,43 @@
title="event-media-volumechange">volumechange</code> at the <span>media
element</span>.</p>
+ <p>An element's <dfn>effective media volume</dfn> is determined as
+ follows:</p>
+
+ <ol>
+
+ <li><p>If the element's <code title="dom-media-muted">muted</code>
+ attribute is true, the element's <span>effective media
+ volume</span> is zero. Abort these steps.</p></li>
+
+<!--END w3c-html--><!--CONTROLLER-->
+ <li><p>If the element has a <span>current media controller</span>
+ and that <code>MediaController</code> object's <span>media
+ controller mute override</span> is true, the element's
+ <span>effective media volume</span> is zero. Abort these
+ steps.</p></li>
+<!--START w3c-html--><!--CONTROLLER-->
+
+ <li><p>Let <var title="">volume</var> be the value of the element's
+ <code title="dom-media-volume">volume</code> attribute.</p></li>
+
+<!--END w3c-html--><!--CONTROLLER-->
+ <li><p>If the element has a <span>current media controller</span>,
+ multiply <var title="">volume</var> by that
+ <code>MediaController</code> object's <span>media controller volume
+ multiplier</span>.</p></li>
+<!--START w3c-html--><!--CONTROLLER-->
+
+ <li><p>The element's <span>effective media volume</span> is <var
+ title="">volume</var>, interpreted relative to the range 0.0 to
+ 1.0, 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.</p></li>
+
+ </ol>
+
</div>
<p>The <dfn title="attr-media-audio"><code>audio</code></dfn>
@@ -34586,18 +35532,6 @@
<tbody>
<tr>
- <td><dfn title="event-media-play"><code>play</code></dfn>
- <td><code>Event</code>
- <td>Playback has begun. Fired after the <code title="dom-media-play">play()</code> method has returned, or when the <code title="attr-media-autoplay">autoplay</code> attribute has caused playback to begin.
- <td><code title="dom-media-paused">paused</code> is newly false.
- <tr>
- <td><dfn title="event-media-pause"><code>pause</code></dfn>
- <td><code>Event</code>
- <td>Playback has been paused. Fired after the <code title="dom-media-pause">pause()</code> method has returned.
- <td><code title="dom-media-paused">paused</code> is newly true.
-
- <tbody>
- <tr>
<td><dfn title="event-media-loadedmetadata"><code>loadedmetadata</code></dfn>
<td><code>Event</code>
<td>The user agent has just determined the duration and dimensions of the <span>media resource</span>
@@ -34652,26 +35586,40 @@
<td><code>Event</code>
<td>Playback has stopped because the end of the <span>media resource</span> was reached.
<td><code title="dom-media-currentTime">currentTime</code> equals the end of the <span>media resource</span>; <code title="dom-media-ended">ended</code> is true.
+ <tr>
+ <td><dfn title="event-media-durationchange"><code>durationchange</code></dfn>
+ <td><code>Event</code>
+ <td>The <code title="dom-media-duration">duration</code> attribute has just been updated.
+ <td>
<tbody>
<tr>
+ <td><dfn title="event-media-play"><code>play</code></dfn>
+ <td><code>Event</code>
+ <td>Playback has begun. Fired after the <code title="dom-media-play">play()</code> method has returned, or when the <code title="attr-media-autoplay">autoplay</code> attribute has caused playback to begin.
+ <td><code title="dom-media-paused">paused</code> is newly false.
+ <tr>
+ <td><dfn title="event-media-pause"><code>pause</code></dfn>
+ <td><code>Event</code>
+ <td>Playback has been paused. Fired after the <code title="dom-media-pause">pause()</code> method has returned.
+ <td><code title="dom-media-paused">paused</code> is newly true.
+ <tr>
<td><dfn title="event-media-ratechange"><code>ratechange</code></dfn>
<td><code>Event</code>
<td>Either the <code title="dom-media-defaultPlaybackRate">defaultPlaybackRate</code> or the <code title="dom-media-playbackRate">playbackRate</code> attribute has just been updated.
<td>
<tr>
- <td><dfn title="event-media-durationchange"><code>durationchange</code></dfn>
- <td><code>Event</code>
- <td>The <code title="dom-media-duration">duration</code> attribute has just been updated.
- <td>
- <tr>
<td><dfn title="event-media-volumechange"><code>volumechange</code></dfn>
<td><code>Event</code>
<td>Either the <code title="dom-media-volume">volume</code> attribute or the <code title="dom-media-muted">muted</code> attribute has changed. Fired after the relevant attribute's setter has returned.
<td>
</table>
+<!--END w3c-html--><!--CONTROLLER-->
+ <p>The last four events in this table are also fired on <code>MediaController</code> objects.</p>
+<!--START w3c-html--><!--CONTROLLER-->
+
<div class="impl">
<h5>Security and privacy considerations</h5>
@@ -105005,6 +105953,7 @@
<code title="attr-media-src">src</code>;
<code title="attr-media-preload">preload</code>;
<code title="attr-media-autoplay">autoplay</code>;
+<!--END w3c-html--><!--CONTROLLER--> <code title="attr-media-mediagroup">mediagroup</code>;<!--START w3c-html--><!--CONTROLLER-->
<code title="attr-media-loop">loop</code>;
<code title="attr-media-controls">controls</code></td>
<td><code>HTMLAudioElement</code></td>
@@ -106321,6 +107270,7 @@
<code title="attr-video-poster">poster</code>;
<code title="attr-media-preload">preload</code>;
<code title="attr-media-autoplay">autoplay</code>;
+<!--END w3c-html--><!--CONTROLLER--> <code title="attr-media-mediagroup">mediagroup</code>;<!--START w3c-html--><!--CONTROLLER-->
<code title="attr-media-loop">loop</code>;
<code title="attr-media-controls">controls</code>;
<code title="attr-dim-width">width</code>;
@@ -107126,7 +108076,15 @@
<code title="attr-style-media">style</code>
<td> Applicable media
<td> <span>Valid media query</span>
+<!--END w3c-html--><!--CONTROLLER-->
<tr>
+ <th> <code title="">mediagroup</code>
+ <td> <code title="attr-media-mediagroup">audio</code>;
+ <code title="attr-media-mediagroup">video</code>
+ <td> Groups <span title="media element">media elements</span> together with an implicit <code>MediaController</code>
+ <td> <a href="#attribute-text">Text</a>
+<!--START w3c-html--><!--CONTROLLER-->
+ <tr>
<th> <code title="">method</code>
<td> <code title="attr-fs-method">form</code>
<td> HTTP method to use for <span>form submission</span>
@@ -108967,6 +109925,12 @@
Markup Language (MathML)</a></cite>, D. Carlisle, P. Ion, R. Miner,
N. Poppelier. W3C.</dd>
+ <dt id="refsMEDIAFRAG">[MEDIAFRAG]</dt>
+ <dd><cite><a
+ href="http://www.w3.org/2008/WebVideo/Fragments/WD-media-fragments-spec/">Media
+ Fragments URI</a></cite>, R. Troncy, E. Mannens, S. Pfeiffer, D.
+ Van Deursen. W3C.</dd>
+
<dt id="refsMIMESNIFF">[MIMESNIFF]</dt>
<dd><cite><a
href="http://tools.ietf.org/html/draft-abarth-mime-sniff">Media
More information about the Commit-Watchers
mailing list