[html5] r8806 - [e] (0) Add more explanatory text around media element GC behaviour Fixing https [...]
whatwg at whatwg.org
whatwg at whatwg.org
Wed Sep 24 10:11:39 PDT 2014
Author: ianh
Date: 2014-09-24 10:11:36 -0700 (Wed, 24 Sep 2014)
New Revision: 8806
Modified:
complete.html
index
source
Log:
[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
Modified: complete.html
===================================================================
--- complete.html 2014-09-22 23:53:00 UTC (rev 8805)
+++ complete.html 2014-09-24 17:11:36 UTC (rev 8806)
@@ -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>
@@ -17357,16 +17357,6 @@
<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.
This is usually referred to as <dfn id=viewport-based-selection>viewport-based selection</dfn>.</p>
@@ -17383,6 +17373,16 @@
<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.
This is usually referred to as <dfn id=image-format-based-selection>image format-based selection</dfn>.</p>
@@ -17452,50 +17452,6 @@
</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><picture>
- <source <strong>media="(min-width: 45em)"</strong> srcset="large.jpg">
- <source <strong>media="(min-width: 32em)"</strong> srcset="med.jpg">
- <img src="small.jpg" alt="The president giving an award.">
-</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 }
- at media (min-width: 32em) { img { width: 500px; height:300px } }
- at 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><h1>
- <picture>
- <source media="(max-width: 500px)" srcset="banner-phone.jpeg, banner-phone-HD.jpeg 2x">
- <img src="banner.jpeg" srcset="banner-HD.jpeg 2x" alt="The Breakfast Combo">
- </picture>
-</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 @@
</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><picture>
+ <source <strong>media="(min-width: 45em)"</strong> srcset="large.jpg">
+ <source <strong>media="(min-width: 32em)"</strong> srcset="med.jpg">
+ <img src="small.jpg" alt="The president giving an award.">
+</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 }
+ at media (min-width: 32em) { img { width: 500px; height:300px } }
+ at 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><h1>
+ <picture>
+ <source media="(max-width: 500px)" srcset="banner-phone.jpeg, banner-phone-HD.jpeg 2x">
+ <img src="banner.jpeg" srcset="banner-HD.jpeg 2x" alt="The Breakfast Combo">
+ </picture>
+</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 @@
<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>
Modified: index
===================================================================
--- index 2014-09-22 23:53:00 UTC (rev 8805)
+++ index 2014-09-24 17:11:36 UTC (rev 8806)
@@ -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>
@@ -17357,16 +17357,6 @@
<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.
This is usually referred to as <dfn id=viewport-based-selection>viewport-based selection</dfn>.</p>
@@ -17383,6 +17373,16 @@
<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.
This is usually referred to as <dfn id=image-format-based-selection>image format-based selection</dfn>.</p>
@@ -17452,50 +17452,6 @@
</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><picture>
- <source <strong>media="(min-width: 45em)"</strong> srcset="large.jpg">
- <source <strong>media="(min-width: 32em)"</strong> srcset="med.jpg">
- <img src="small.jpg" alt="The president giving an award.">
-</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 }
- at media (min-width: 32em) { img { width: 500px; height:300px } }
- at 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><h1>
- <picture>
- <source media="(max-width: 500px)" srcset="banner-phone.jpeg, banner-phone-HD.jpeg 2x">
- <img src="banner.jpeg" srcset="banner-HD.jpeg 2x" alt="The Breakfast Combo">
- </picture>
-</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 @@
</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><picture>
+ <source <strong>media="(min-width: 45em)"</strong> srcset="large.jpg">
+ <source <strong>media="(min-width: 32em)"</strong> srcset="med.jpg">
+ <img src="small.jpg" alt="The president giving an award.">
+</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 }
+ at media (min-width: 32em) { img { width: 500px; height:300px } }
+ at 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><h1>
+ <picture>
+ <source media="(max-width: 500px)" srcset="banner-phone.jpeg, banner-phone-HD.jpeg 2x">
+ <img src="banner.jpeg" srcset="banner-HD.jpeg 2x" alt="The Breakfast Combo">
+ </picture>
+</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 @@
<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>
Modified: source
===================================================================
--- source 2014-09-22 23:53:00 UTC (rev 8805)
+++ source 2014-09-24 17:11:36 UTC (rev 8806)
@@ -30470,7 +30470,10 @@
<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>
More information about the Commit-Watchers
mailing list