[e] (0) Add more explanatory text around media element GC behaviour

Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=26515 Affected topics: Video and Audio git-svn-id: https://svn.whatwg.org/webapps@8806 340c8d12-0b0e-0410-8428-c7bf67bfef74
whatwg · Sep 24, 2014 · 441b627 · 441b627
1 parent d1b1667
commit 441b627
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 113 deletions.
diff --git a/complete.html b/complete.html
@@ -291,7 +291,7 @@
   </style><link rel=stylesheet href=status.css><body onload=init()>
   <header id=head class="head with-buttons">
    <p><a href=https://whatwg.org/ class=logo><img src=//whatwg.org/images/logo width=101 alt=WHATWG height=101></a></p>
-   <hgroup><h1 class=allcaps>HTML</h1><h2 id=living-standard-—-last-updated-[date:-01-jan-1901] class="no-num no-toc">Living Standard — Last Updated <span class=pubdate>22 September 2014</span></h2></hgroup>
+   <hgroup><h1 class=allcaps>HTML</h1><h2 id=living-standard-—-last-updated-[date:-01-jan-1901] class="no-num no-toc">Living Standard — Last Updated <span class=pubdate>24 September 2014</span></h2></hgroup>
 
    <nav>
     <div>
@@ -17355,16 +17355,6 @@ <h4 id=introduction-3>4.8.1 Introduction</h4>
 
      </ul>
 
-   <li>
-
-    <p>Authors might want to show different image content depending on the rendered size of the image.
-    This is usually referred to as <dfn id=art-direction>art direction</dfn>.</p>
-
-    <p class=example>When a Web page is viewed on a screen with a large physical size (assuming a maximised browser window),
-    the author might wish to include some less relevant parts surrounding the critical part of the image.
-    When the same Web page is viewed on a screen with a small physical size,
-    the author might wish to show only the critical part of the image.</p>
-
    <li>
 
     <p>Authors might want to show the same image content but with different rendered size depending on, usually, the width of the viewport.
@@ -17381,6 +17371,16 @@ <h4 id=introduction-3>4.8.1 Introduction</h4>
     In this case, the rendered size of an image might be <em>bigger</em> in the one-column layout compared to the two-column layout,
     despite the screen being smaller.</p>
 
+   <li>
+
+    <p>Authors might want to show different image content depending on the rendered size of the image.
+    This is usually referred to as <dfn id=art-direction>art direction</dfn>.</p>
+
+    <p class=example>When a Web page is viewed on a screen with a large physical size (assuming a maximised browser window),
+    the author might wish to include some less relevant parts surrounding the critical part of the image.
+    When the same Web page is viewed on a screen with a small physical size,
+    the author might wish to show only the critical part of the image.</p>
+
    <li>
 
     <p>Authors might want to show the same image content but using different image formats, depending on which image formats the user agent supports.
@@ -17452,50 +17452,6 @@ <h4 id=introduction-3>4.8.1 Introduction</h4>
 
     </div>
 
-   <dt><a href=#art-direction id=introduction-3:art-direction-3>Art direction</a>-based selection<dd>
-
-    <p>The <code id=introduction-3:the-picture-element><a href=#the-picture-element>picture</a></code> element and the <code id=introduction-3:the-source-element-when-used-with-the-picture-element><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element,
-    together with the <code id=introduction-3:attr-picture-source-media><a href=#attr-picture-source-media>media</a></code> attribute,
-    can be used, to provide multiple images that vary the image content
-    (for instance the smaller image might be a cropped version of the bigger image).</p>
-
-    <div class=example>
-
-<pre>&lt;picture>
-  &lt;source <strong>media="(min-width: 45em)"</strong> srcset="large.jpg">
-  &lt;source <strong>media="(min-width: 32em)"</strong> srcset="med.jpg">
-  &lt;img src="small.jpg" alt="The president giving an award.">
-&lt;/picture></pre>
-
-     <p>The user agent will choose the first <code id=introduction-3:the-source-element-when-used-with-the-picture-element-2><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element
-     for which the media query in the <code id=introduction-3:attr-picture-source-media-2><a href=#attr-picture-source-media>media</a></code> attribute matches,
-     and then choose an appropriate URL from its <code id=introduction-3:attr-picture-source-srcset><a href=#attr-picture-source-srcset>srcset</a></code> attribute.</p>
-
-     <p>The rendered size of the image varies depending on which resource is chosen.
-     To specify dimensions that the user agent can use before having downloaded the image,
-     CSS can be used.</p>
-
-<pre class=css>img { width: 300px; height: 300px }
-@media (min-width: 32em) { img { width: 500px; height:300px } }
-@media (min-width: 45em) { img { width: 700px; height:400px } }</pre>
-
-    </div>
-
-    <div class=example>
-
-     <p>This example combines <a href=#art-direction id=introduction-3:art-direction-4>art direction</a>- and <a href=#device-pixel-ratio id=introduction-3:device-pixel-ratio-3>device-pixel-ratio</a>-based selection.
-     A banner that takes half the viewport is provided in two versions,
-     one for wide screens and one for narrow screens.</p>
-
-<pre>&lt;h1>
- &lt;picture>
-  &lt;source media="(max-width: 500px)" srcset="banner-phone.jpeg, banner-phone-HD.jpeg 2x">
-  &lt;img src="banner.jpeg" srcset="banner-HD.jpeg 2x" alt="The Breakfast Combo">
- &lt;/picture>
-&lt;/h1></pre>
-
-    </div>
-
    <dt><a href=#viewport-based-selection id=introduction-3:viewport-based-selection-2>Viewport-based selection</a><dd>
 
     <p>The <code id=introduction-3:attr-img-srcset-4><a href=#attr-img-srcset>srcset</a></code> and <code id=introduction-3:attr-img-sizes><a href=#attr-img-sizes>sizes</a></code> attributes can be used,
@@ -17570,6 +17526,50 @@ <h4 id=introduction-3>4.8.1 Introduction</h4>
 
     </div>
 
+   <dt><a href=#art-direction id=introduction-3:art-direction-3>Art direction</a>-based selection<dd>
+
+    <p>The <code id=introduction-3:the-picture-element><a href=#the-picture-element>picture</a></code> element and the <code id=introduction-3:the-source-element-when-used-with-the-picture-element><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element,
+    together with the <code id=introduction-3:attr-picture-source-media><a href=#attr-picture-source-media>media</a></code> attribute,
+    can be used, to provide multiple images that vary the image content
+    (for instance the smaller image might be a cropped version of the bigger image).</p>
+
+    <div class=example>
+
+<pre>&lt;picture>
+  &lt;source <strong>media="(min-width: 45em)"</strong> srcset="large.jpg">
+  &lt;source <strong>media="(min-width: 32em)"</strong> srcset="med.jpg">
+  &lt;img src="small.jpg" alt="The president giving an award.">
+&lt;/picture></pre>
+
+     <p>The user agent will choose the first <code id=introduction-3:the-source-element-when-used-with-the-picture-element-2><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element
+     for which the media query in the <code id=introduction-3:attr-picture-source-media-2><a href=#attr-picture-source-media>media</a></code> attribute matches,
+     and then choose an appropriate URL from its <code id=introduction-3:attr-picture-source-srcset><a href=#attr-picture-source-srcset>srcset</a></code> attribute.</p>
+
+     <p>The rendered size of the image varies depending on which resource is chosen.
+     To specify dimensions that the user agent can use before having downloaded the image,
+     CSS can be used.</p>
+
+<pre class=css>img { width: 300px; height: 300px }
+@media (min-width: 32em) { img { width: 500px; height:300px } }
+@media (min-width: 45em) { img { width: 700px; height:400px } }</pre>
+
+    </div>
+
+    <div class=example>
+
+     <p>This example combines <a href=#art-direction id=introduction-3:art-direction-4>art direction</a>- and <a href=#device-pixel-ratio id=introduction-3:device-pixel-ratio-3>device-pixel-ratio</a>-based selection.
+     A banner that takes half the viewport is provided in two versions,
+     one for wide screens and one for narrow screens.</p>
+
+<pre>&lt;h1>
+ &lt;picture>
+  &lt;source media="(max-width: 500px)" srcset="banner-phone.jpeg, banner-phone-HD.jpeg 2x">
+  &lt;img src="banner.jpeg" srcset="banner-HD.jpeg 2x" alt="The Breakfast Combo">
+ &lt;/picture>
+&lt;/h1></pre>
+
+    </div>
+
    <dt><a href=#image-format-based-selection id=introduction-3:image-format-based-selection>Image format-based selection</a><dd>
 
     <p>The <code id=introduction-3:attr-picture-source-type><a href=#attr-picture-source-type>type</a></code> attribute
@@ -23719,7 +23719,10 @@ <h5 id=playing-the-media-resource>4.8.14.8 Playing the media resource</h5>
   <p class=note>It is possible for an element to which no explicit references exist to play audio,
   even if such an element is not still actively playing: for instance, it could have a <a href=#current-media-controller id=playing-the-media-resource:current-media-controller-31>current
   media controller</a> that still has references and can still be unpaused, or it could be
-  unpaused but stalled waiting for content to buffer.</p>
+  unpaused but stalled waiting for content to buffer, or it could be still buffering, but with a
+  <code id=playing-the-media-resource:event-media-suspend><a href=#event-media-suspend>suspend</a></code> event listener that begins playback. Even a
+  media element whose <a href=#media-resource id=playing-the-media-resource:media-resource-18>media resource</a> has no audio tracks could eventually play audio
+  again if it had an event listener that changes the <a href=#media-resource id=playing-the-media-resource:media-resource-19>media resource</a>.</p>
 
   <hr>
 

diff --git a/index b/index
@@ -291,7 +291,7 @@
   </style><link rel=stylesheet href=status.css><body onload=init()>
   <header id=head class="head with-buttons">
    <p><a href=https://whatwg.org/ class=logo><img src=//whatwg.org/images/logo width=101 alt=WHATWG height=101></a></p>
-   <hgroup><h1 class=allcaps>HTML</h1><h2 id=living-standard-—-last-updated-[date:-01-jan-1901] class="no-num no-toc">Living Standard — Last Updated <span class=pubdate>22 September 2014</span></h2></hgroup>
+   <hgroup><h1 class=allcaps>HTML</h1><h2 id=living-standard-—-last-updated-[date:-01-jan-1901] class="no-num no-toc">Living Standard — Last Updated <span class=pubdate>24 September 2014</span></h2></hgroup>
 
    <nav>
     <div>
@@ -17355,16 +17355,6 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</pre>
 
      </ul>
 
-   <li>
-
-    <p>Authors might want to show different image content depending on the rendered size of the image.
-    This is usually referred to as <dfn id=art-direction>art direction</dfn>.</p>
-
-    <p class=example>When a Web page is viewed on a screen with a large physical size (assuming a maximised browser window),
-    the author might wish to include some less relevant parts surrounding the critical part of the image.
-    When the same Web page is viewed on a screen with a small physical size,
-    the author might wish to show only the critical part of the image.</p>
-
    <li>
 
     <p>Authors might want to show the same image content but with different rendered size depending on, usually, the width of the viewport.
@@ -17381,6 +17371,16 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</pre>
     In this case, the rendered size of an image might be <em>bigger</em> in the one-column layout compared to the two-column layout,
     despite the screen being smaller.</p>
 
+   <li>
+
+    <p>Authors might want to show different image content depending on the rendered size of the image.
+    This is usually referred to as <dfn id=art-direction>art direction</dfn>.</p>
+
+    <p class=example>When a Web page is viewed on a screen with a large physical size (assuming a maximised browser window),
+    the author might wish to include some less relevant parts surrounding the critical part of the image.
+    When the same Web page is viewed on a screen with a small physical size,
+    the author might wish to show only the critical part of the image.</p>
+
    <li>
 
     <p>Authors might want to show the same image content but using different image formats, depending on which image formats the user agent supports.
@@ -17452,50 +17452,6 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</pre>
 
     </div>
 
-   <dt><a href=#art-direction id=introduction-3:art-direction-3>Art direction</a>-based selection<dd>
-
-    <p>The <code id=introduction-3:the-picture-element><a href=#the-picture-element>picture</a></code> element and the <code id=introduction-3:the-source-element-when-used-with-the-picture-element><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element,
-    together with the <code id=introduction-3:attr-picture-source-media><a href=#attr-picture-source-media>media</a></code> attribute,
-    can be used, to provide multiple images that vary the image content
-    (for instance the smaller image might be a cropped version of the bigger image).</p>
-
-    <div class=example>
-
-<pre>&lt;picture>
-  &lt;source <strong>media="(min-width: 45em)"</strong> srcset="large.jpg">
-  &lt;source <strong>media="(min-width: 32em)"</strong> srcset="med.jpg">
-  &lt;img src="small.jpg" alt="The president giving an award.">
-&lt;/picture></pre>
-
-     <p>The user agent will choose the first <code id=introduction-3:the-source-element-when-used-with-the-picture-element-2><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element
-     for which the media query in the <code id=introduction-3:attr-picture-source-media-2><a href=#attr-picture-source-media>media</a></code> attribute matches,
-     and then choose an appropriate URL from its <code id=introduction-3:attr-picture-source-srcset><a href=#attr-picture-source-srcset>srcset</a></code> attribute.</p>
-
-     <p>The rendered size of the image varies depending on which resource is chosen.
-     To specify dimensions that the user agent can use before having downloaded the image,
-     CSS can be used.</p>
-
-<pre class=css>img { width: 300px; height: 300px }
-@media (min-width: 32em) { img { width: 500px; height:300px } }
-@media (min-width: 45em) { img { width: 700px; height:400px } }</pre>
-
-    </div>
-
-    <div class=example>
-
-     <p>This example combines <a href=#art-direction id=introduction-3:art-direction-4>art direction</a>- and <a href=#device-pixel-ratio id=introduction-3:device-pixel-ratio-3>device-pixel-ratio</a>-based selection.
-     A banner that takes half the viewport is provided in two versions,
-     one for wide screens and one for narrow screens.</p>
-
-<pre>&lt;h1>
- &lt;picture>
-  &lt;source media="(max-width: 500px)" srcset="banner-phone.jpeg, banner-phone-HD.jpeg 2x">
-  &lt;img src="banner.jpeg" srcset="banner-HD.jpeg 2x" alt="The Breakfast Combo">
- &lt;/picture>
-&lt;/h1></pre>
-
-    </div>
-
    <dt><a href=#viewport-based-selection id=introduction-3:viewport-based-selection-2>Viewport-based selection</a><dd>
 
     <p>The <code id=introduction-3:attr-img-srcset-4><a href=#attr-img-srcset>srcset</a></code> and <code id=introduction-3:attr-img-sizes><a href=#attr-img-sizes>sizes</a></code> attributes can be used,
@@ -17570,6 +17526,50 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</pre>
 
     </div>
 
+   <dt><a href=#art-direction id=introduction-3:art-direction-3>Art direction</a>-based selection<dd>
+
+    <p>The <code id=introduction-3:the-picture-element><a href=#the-picture-element>picture</a></code> element and the <code id=introduction-3:the-source-element-when-used-with-the-picture-element><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element,
+    together with the <code id=introduction-3:attr-picture-source-media><a href=#attr-picture-source-media>media</a></code> attribute,
+    can be used, to provide multiple images that vary the image content
+    (for instance the smaller image might be a cropped version of the bigger image).</p>
+
+    <div class=example>
+
+<pre>&lt;picture>
+  &lt;source <strong>media="(min-width: 45em)"</strong> srcset="large.jpg">
+  &lt;source <strong>media="(min-width: 32em)"</strong> srcset="med.jpg">
+  &lt;img src="small.jpg" alt="The president giving an award.">
+&lt;/picture></pre>
+
+     <p>The user agent will choose the first <code id=introduction-3:the-source-element-when-used-with-the-picture-element-2><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element
+     for which the media query in the <code id=introduction-3:attr-picture-source-media-2><a href=#attr-picture-source-media>media</a></code> attribute matches,
+     and then choose an appropriate URL from its <code id=introduction-3:attr-picture-source-srcset><a href=#attr-picture-source-srcset>srcset</a></code> attribute.</p>
+
+     <p>The rendered size of the image varies depending on which resource is chosen.
+     To specify dimensions that the user agent can use before having downloaded the image,
+     CSS can be used.</p>
+
+<pre class=css>img { width: 300px; height: 300px }
+@media (min-width: 32em) { img { width: 500px; height:300px } }
+@media (min-width: 45em) { img { width: 700px; height:400px } }</pre>
+
+    </div>
+
+    <div class=example>
+
+     <p>This example combines <a href=#art-direction id=introduction-3:art-direction-4>art direction</a>- and <a href=#device-pixel-ratio id=introduction-3:device-pixel-ratio-3>device-pixel-ratio</a>-based selection.
+     A banner that takes half the viewport is provided in two versions,
+     one for wide screens and one for narrow screens.</p>
+
+<pre>&lt;h1>
+ &lt;picture>
+  &lt;source media="(max-width: 500px)" srcset="banner-phone.jpeg, banner-phone-HD.jpeg 2x">
+  &lt;img src="banner.jpeg" srcset="banner-HD.jpeg 2x" alt="The Breakfast Combo">
+ &lt;/picture>
+&lt;/h1></pre>
+
+    </div>
+
    <dt><a href=#image-format-based-selection id=introduction-3:image-format-based-selection>Image format-based selection</a><dd>
 
     <p>The <code id=introduction-3:attr-picture-source-type><a href=#attr-picture-source-type>type</a></code> attribute
@@ -23719,7 +23719,10 @@ interface <dfn id=htmlmediaelement>HTMLMediaElement</dfn> : <a href=#htmlelement
   <p class=note>It is possible for an element to which no explicit references exist to play audio,
   even if such an element is not still actively playing: for instance, it could have a <a href=#current-media-controller id=playing-the-media-resource:current-media-controller-31>current
   media controller</a> that still has references and can still be unpaused, or it could be
-  unpaused but stalled waiting for content to buffer.</p>
+  unpaused but stalled waiting for content to buffer, or it could be still buffering, but with a
+  <code id=playing-the-media-resource:event-media-suspend><a href=#event-media-suspend>suspend</a></code> event listener that begins playback. Even a
+  media element whose <a href=#media-resource id=playing-the-media-resource:media-resource-18>media resource</a> has no audio tracks could eventually play audio
+  again if it had an event listener that changes the <a href=#media-resource id=playing-the-media-resource:media-resource-19>media resource</a>.</p>
 
   <hr>
 

diff --git a/source b/source
@@ -30470,7 +30470,10 @@ interface <dfn>HTMLMediaElement</dfn> : <span>HTMLElement</span> {
   <p class="note">It is possible for an element to which no explicit references exist to play audio,
   even if such an element is not still actively playing: for instance, it could have a <span>current
   media controller</span> that still has references and can still be unpaused, or it could be
-  unpaused but stalled waiting for content to buffer.</p>
+  unpaused but stalled waiting for content to buffer, or it could be still buffering, but with a
+  <code data-x="event-media-suspend">suspend</code> event listener that begins playback. Even a
+  media element whose <span>media resource</span> has no audio tracks could eventually play audio
+  again if it had an event listener that changes the <span>media resource</span>.</p>
 
   <hr>