| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> |
| |
| <html> |
| <head> |
| <title> Proposed Timed Media CSS </title> |
| <link href="./mediaelement.css" rel="stylesheet" type="text/css"> |
| |
| <style type="text/css"> |
| h4 + .element { margin-top: -2.5em; padding-top: 2em; } |
| h4 + p + .element { margin-top: -5em; padding-top: 4em; } |
| .element { background: #EEFFEE; color: black; margin: 0 0 1em -1em; padding: 0 1em 0.25em 0.75em; border-left: solid #99FF99 0.25em; -padding: 0; /* that last decl is for IE6. Try removing it, it's hilarious! */ } |
| .proposal { border: blue solid; padding: 1em; } |
| table.matrix, table.matrix td { border: none; text-align: right; } |
| table.matrix { margin-left: 2em; } |
| |
| table.propinfo, table.propinfo th, table.propinfo td { border: none; } |
| table.history, table.history th, table.history td { border: solid thin; font-size: x-small } |
| table.history { width: 100%; } |
| td.hversion, td.author, td.date { width: 5%; } |
| td.change { width: 65%; } |
| </style> |
| |
| </head> |
| <body class="draft"> |
| |
| <div class="head"> |
| <h1> Timed Media CSS </h1> |
| <h2 class="no-num no-toc" id="working"> Working Draft — 19 March 2007 </h2> |
| |
| <p class="copyright">© Copyright 2007 Apple Inc. </p> |
| |
| </div> |
| <h2 class="no-num no-toc" id="abstract"> Abstract </h2> |
| |
| <p>This specification defines a set of properties of Cascading Style Sheets for the presentation |
| of timed media, including but not limited to video and audio. By separating the presentation |
| style of timed media elements from their contents, these properties further simplify Web |
| authoring and site maintenance.</p> |
| |
| <p>While there are cases in which the playback of timed media is semantically meaningful within the |
| context of a document, there are many cases in which playback is entirely presentational. |
| Therefore we offer a reasonable set of CSS properties to control whether media is playing or not |
| according to presentation state, along with control over the portions of media that are to be |
| presented, looping behavior, and audio volume.</p> |
| |
| <h2 class="no-num no-toc" id="status"> Status of this document </h2> |
| |
| <p><strong>This is a work in progress!</strong> This document is changing frequently in response |
| to comments and as a general part of its development process. Comments are very welcome.</p> |
| |
| <h2 class="no-num no-toc"id="contents"> Table of contents </h2> |
| |
| <!--begin-toc--> |
| <ul class="toc"> |
| <li><a href="#introduction"><span class="secno">1.</span>Introduction</a> |
| |
| <li><a href="#new-syntax"><span class=secno>2. </span>New syntax</a> |
| |
| <li><a href="#new-properties"><span class=secno>3. </span>New Properties</a> |
| <ul class=toc> |
| <li><a href="#propdef-media-play-state"><span class=secno>3.1.</span> 'media-play-state'</a> |
| <li><a href="#propdef-media-play-rate"><span class=secno>3.2.</span> 'media-play-rate'</a> |
| <li><a href="#propdef-media-start-time"><span class=secno>3.3.</span> 'media-start-time'</a> |
| <li><a href="#propdef-media-end-time"><span class=secno>3.4.</span> 'media-end-time'</a> |
| <li><a href="#propdef-media-loop-count"><span class=secno>3.5.</span> 'media-loop-count'</a> |
| <li><a href="#propdef-media-loop-start-time"><span class=secno>3.6.</span> 'media-loop-start-time'</a> |
| <li><a href="#propdef-media-loop-end-time"><span class=secno>3.7.</span> 'media-loop-end-time'</a> |
| <li><a href="#propdef-volume"><span class=secno>3.8.</span> 'volume'</a> |
| <li><a href="#propdef-media-timing"><span class=secno>3.9.</span> 'media-timing'</a> |
| </ul> |
| |
| <li class=no-num><a href="#references">References</a> |
| |
| <li class=no-num><a href="#acknowledgements">Acknowledgements</a> |
| |
| <li class=no-num><a href="#history">Change history</a> |
| |
| </ul> |
| <!--end-toc--> |
| |
| <hr> |
| <h2 id="introduction"><span class="secno">1. </span>Introduction</h2> |
| <em>This section is non-normative.</em> |
| |
| <p class=big-issue>Moving introduction coming...</p> |
| |
| <h2 id="new-syntax"><span class="secno">2. </span>New syntax</h2> |
| |
| <h2 id="new-properties"><span class="secno">3. </span>New Properties</h2> |
| |
| <p>These properties apply to elements that embed timed media, such as movies or sounds.</p> |
| |
| |
| <h4>3.1 <a name="propdef-media-play-state" href="#propdef-media-play-state" class="noxref"> |
| <span class="propinst-media-play-state">'media-play-state'</span></a></h4> |
| |
| <div class="propdef"> |
| <dl><dt> |
| <span class="index-def" title="'media-play-state'"><a name="propdef-media-play-state" class="propdef-title"><strong>'media-play-state'</strong></a></span> |
| <dd> |
| <table class="propinfo"> |
| <tr><td><em>Value:</em> <td> |
| playing | paused | inherit |
| <tr><td><em>Initial:</em> <td>paused |
| <tr><td><em>Applies to:</em> <td>timed media elements |
| <tr><td><em>Inherited:</em> <td>no |
| <tr><td><em>Percentages:</em> <td>see prose |
| <tr><td><em>Media:</em> <td>visual, audio |
| <tr><td><em>Computed value:</em> <td>the value or percentage as specified |
| </table> |
| </dl> |
| </div> |
| |
| <p>The <a href="#propdef-media-play-state" class="noxref"> |
| <span class="propinst-media-play-state">'media-play-state'</span></a> starts or stops |
| a timed media item. |
| </p> |
| |
| <p>Values have the following meanings:</p> |
| |
| <dl> |
| <dt><strong>playing</strong> |
| <dd>Playing at the <a href="#propdef-media-play-rate" class="noxref">'media-play-rate'</a>. |
| |
| <dt><strong>paused</strong> |
| <dd>Not playing. |
| </dl> |
| |
| |
| <pre> |
| movie#halt { media-play-state: paused; } |
| </pre> |
| |
| <h4>3.2 <a name="propdef-media-play-rate" href="#propdef-media-play-rate" class="noxref"> |
| <span class="propinst-media-play-rate">'media-play-rate'</span></a></h4> |
| |
| <div class="propdef"> |
| <dl><dt> |
| <span class="index-def" title="'media-play-rate'"><a name="propdef-media-play-rate" class="propdef-title"><strong>'media-play-rate'</strong></a></span> |
| <dd> |
| <table class="propinfo"> |
| <tr><td><em>Value:</em> <td> |
| <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-number" class="noxref"><span class="value-inst-number"><number></span></a> |
| | <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage"><percentage></span></a> |
| | inherit |
| <tr><td><em>Initial:</em> <td>1 |
| <tr><td><em>Applies to:</em> <td>timed media elements |
| <tr><td><em>Inherited:</em> <td>no |
| <tr><td><em>Percentages:</em> <td>see prose |
| <tr><td><em>Media:</em> <td>visual, audio |
| <tr><td><em>Computed value:</em> <td>the value or percentage as specified |
| </table> |
| </dl> |
| </div> |
| |
| <p>The <a href="#propdef-media-play-rate" class="noxref"> |
| <span class="propinst-media-play-rate">'media-play-rate'</span></a> sets |
| the play rate of a timed media item, such as a movie or sound. The user agents |
| may preserve pitch when changing the rate of audio if possible. |
| <span class=big-issue>Wording ????</span> |
| </p> |
| |
| <p>Values have the following meanings:</p> |
| <dl> |
| <dt><span class="index-inst" title="<number>"> |
| <a name="x11" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-number" class="noxref"> |
| <span class="value-inst-number"><strong><number></strong></span></a> |
| </span> |
| <dd>A floating point number is the the default play rate of the |
| media item. Negative play rates are allowed and imply playing backwards, although not |
| all media formats support reverse play.</p> |
| |
| <dt><span class="index-inst" title="<percentage>"><a name="x12" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref"> |
| <span class="value-inst-percentage"><strong><percentage></strong></span></a></span> |
| <dd>Percentage values are calculated relative to the default play rate of the media item, |
| as defined by the resource's container format, for example the "preferredRate" of a |
| QuickTime movie. May be negative or greater than 100% as allowed by the media format. |
| </dl> |
| |
| <pre> |
| movie:hover { media-play-state: playing; media-play-rate: 0.5; } |
| </pre> |
| |
| <h4>3.3 <a name="propdef-media-start-time" href="#propdef-media-start-time" class="noxref"> |
| <span class="propinst-media-start-time">'media-start-time'</span></a></h4> |
| |
| <div class="propdef"> |
| <dl><dt> |
| <span class="index-def" title="'media-start-time'"><a name="propdef-media-start-time" class="propdef-title"><strong>'media-start-time'</strong></a></span> |
| <dd> |
| <table class="propinfo"> |
| <tr><td><em>Value:</em> <td> |
| <a href="http://www.w3.org/TR/CSS21/aural.html#value-def-time" class="noxref"><span class="value-inst-time"><time></span></a> |
| | <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage"><percentage></span></a> |
| | inherit |
| <tr><td><em>Initial:</em> <td>0s |
| <tr><td><em>Applies to:</em> <td>timed media elements |
| <tr><td><em>Inherited:</em> <td>no |
| <tr><td><em>Percentages:</em> <td>see prose |
| <tr><td><em>Media:</em> <td>visual, audio |
| <tr><td><em>Computed value:</em> <td>the value as specified |
| </table> |
| </dl> |
| </div> |
| |
| <p>The <a href="#propdef-media-start-time" class="noxref"> |
| <span class="propinst-media-start-time">'media-start-time'</span></a> sets |
| the time at which the media item begins playing. Negative values are from |
| the total duration of the complete media item.</p> |
| |
| <p>Values have the following meanings:</p> |
| <dl> |
| <dt><span class="index-inst" title="<number>"> |
| <a name="x11" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-number" class="noxref"> |
| <span class="value-inst-number"><strong><number></strong></span></a> |
| </span> |
| <dd>Start time in absolute time units (seconds and milliseconds). |
| |
| <dt><span class="index-inst" title="<percentage>"><a name="x12" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref"> |
| <span class="value-inst-percentage"><strong><percentage></strong></span></a></span> |
| <dd>Percentage values are calculated relative to the total duration of the complete |
| media item. Negative percentages are relative offsets from the total duration of |
| the complete media item. |
| </dl> |
| |
| <pre> |
| movie#main { media-start-time: 10s } |
| </pre> |
| |
| <h4>3.4 <a name="propdef-media-end-time" href="#propdef-media-end-time" class="noxref"> |
| <span class="propinst-media-end-time">'media-end-time'</span></a></h4> |
| |
| <div class="propdef"> |
| <dl><dt> |
| <span class="index-def" title="'media-end-time'"><a name="propdef-media-end-time" class="propdef-title"><strong>'media-end-time'</strong></a></span> |
| <dd> |
| <table class="propinfo"> |
| <tr><td><em>Value:</em> <td> |
| <a href="http://www.w3.org/TR/CSS21/aural.html#value-def-time" class="noxref"><span class="value-inst-time"><time></span></a> |
| | <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage"><percentage></span></a> |
| | inherit |
| <tr><td><em>Initial:</em> <td>-0s |
| <tr><td><em>Applies to:</em> <td>timed media elements |
| <tr><td><em>Inherited:</em> <td>no |
| <tr><td><em>Percentages:</em> <td>see prose |
| <tr><td><em>Media:</em> <td>visual, audio |
| <tr><td><em>Computed value:</em> <td>the value as specified |
| </table> |
| </dl> |
| </div> |
| |
| <p>The <a href="#propdef-media-end-time" class="noxref"> |
| <span class="propinst-media-end-time">'media-end-time'</span></a> sets |
| the time at which the media item stops playing. Negative values are offsets |
| from the total duration of the complete media item.</p> |
| |
| <p>Values have the following meanings:</p> |
| <dl> |
| <dt><span class="index-inst" title="<time>"> |
| <a name="x11" href="http://www.w3.org/TR/CSS21/aural.html#value-def-time" class="noxref"> |
| <span class="value-inst-time"><strong><time></strong></span></a> |
| </span> |
| <dd>End time in absolute time units (seconds and milliseconds). |
| |
| <dt><span class="index-inst" title="<percentage>"><a name="x12" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref"> |
| <span class="value-inst-percentage"><strong><percentage></strong></span></a></span> |
| <dd>Percentage values are calculated relative to the total duration of the complete |
| media item. Negative percentages are relative offsets from the total duration of |
| the complete media item. |
| </dl> |
| |
| <pre> |
| movie#main { media-end-time: -5s } |
| </pre> |
| |
| |
| |
| <h4>3.5 <a name="propdef-media-loop-count" href="#propdef-media-loop-count" class="noxref"> |
| <span class="propinst-media-loop-count">'media-loop-count'</span></a></h4> |
| |
| <div class="propdef"> |
| <dl><dt> |
| <span class="index-def" title="'media-loop-count'"><a name="propdef-media-loop-count" class="propdef-title"><strong>'media-loop-count'</strong></a></span> |
| <dd> |
| <table class="propinfo"> |
| <tr><td><em>Value:</em> <td> |
| <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-number" class="noxref"><span class="value-inst-number"><number></span></a> |
| | infinite |
| | inherit |
| <tr><td><em>Initial:</em> <td>1 |
| <tr><td><em>Applies to:</em> <td>timed media elements |
| <tr><td><em>Inherited:</em> <td>no |
| <tr><td><em>Percentages:</em> <td>N/A |
| <tr><td><em>Media:</em> <td>visual, audio |
| <tr><td><em>Computed value:</em> <td>the value as specified |
| </table> |
| </dl> |
| </div> |
| |
| <p>The <a href="#propdef-media-loop-count" class="noxref"> |
| <span class="propinst-media-loop-count">'media-loop-count'</span></a> sets |
| the number of times the media item will loop when played.</p> |
| |
| <p>Values have the following meanings:</p> |
| <dl> |
| <dt><span class="index-inst" title="<number>"> |
| <a name="x11" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-number" class="noxref"> |
| <span class="value-inst-number"><strong><number></strong></span></a> |
| </span> |
| <dd>The number of time the media resource will loop. The default value of "1" means |
| the item will play through once but will not loop. |
| |
| <dt><span class="index-inst" title="infinite"> |
| <span class="value-inst-infinite"><strong>infinite</strong></span></span> |
| <dd>The media item will loop indefinitely. |
| </dl> |
| |
| |
| <pre> |
| audio.ambient { media-loop-count: infinite } |
| </pre> |
| |
| |
| |
| <h4>3.6 <a name="propdef-media-loop-start-time" href="#propdef-media-loop-start-time" class="noxref"> |
| <span class="propinst-media-loop-start-time">'media-loop-start-time'</span></a></h4> |
| |
| <div class="propdef"> |
| <dl><dt> |
| <span class="index-def" title="'media-loop-start-time'"><a name="propdef-media-loop-start-time" class="propdef-title"><strong>'media-loop-start-time'</strong></a></span> |
| <dd> |
| <table class="propinfo"> |
| <tr ><td><em>Value:</em> <td> |
| <a href="http://www.w3.org/TR/CSS21/aural.html#value-def-time" class="noxref"><span class="value-inst-time"><time></span></a> |
| | <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage"><percentage></span></a> |
| | inherit |
| <tr><td><em>Initial:</em> <td>0s |
| <tr><td><em>Applies to:</em> <td>timed media elements |
| <tr><td><em>Inherited:</em> <td>no |
| <tr><td><em>Percentages:</em> <td>see prose |
| <tr><td><em>Media:</em> <td>visual, audio |
| <tr><td><em>Computed value:</em> <td>the value as specified |
| </table> |
| </dl> |
| </div> |
| |
| <p>The <a href="#propdef-media-loop-start-time" class="noxref"> |
| <span class="propinst-media-loop-start-time">'media-loop-start-time'</span></a> sets |
| the time at which the media item begins playing after looping. </p> |
| |
| <p>Values have the following meanings:</p> |
| <dl> |
| <dt><span class="index-inst" title="<time>"> |
| <a name="x11" href="http://www.w3.org/TR/CSS21/aural.html#value-def-time" class="noxref"> |
| <span class="value-inst-time"><strong><time></strong></span></a> |
| </span> |
| <dd>Start time in absolute time units (seconds and milliseconds). Negative values are offsets from |
| the total duration of the complete media item. |
| |
| <dt><span class="index-inst" title="<percentage>"><a name="x12" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref"> |
| <span class="value-inst-percentage"><strong><percentage></strong></span></a></span> |
| <dd>Percent of total duration of the complete media item. Negative percentages are |
| relative offsets from the total duration of the complete media item. |
| </dl> |
| |
| <pre> |
| audio.ambient { media-loop-start-time: 6s } |
| </pre> |
| |
| |
| |
| <h4>3.7 <a name="propdef-media-loop-end-time" href="#propdef-media-loop-end-time" class="noxref"> |
| <span class="propinst-media-loop-end-time">'media-loop-end-time'</span></a></h4> |
| |
| <div class="propdef"> |
| <dl><dt> |
| <span class="index-def" title="'media-loop-end-time'"><a name="propdef-media-loop-end-time" class="propdef-title"><strong>'media-loop-end-time'</strong></a></span> |
| <dd> |
| <table class="propinfo"> |
| <tr ><td><em>Value:</em> <td> |
| <a href="http://www.w3.org/TR/CSS21/aural.html#value-def-time" class="noxref"><span class="value-inst-time"><time></span></a> |
| | <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage"><percentage></span></a> |
| | inherit |
| <tr><td><em>Initial:</em> <td>-0s |
| <tr><td><em>Applies to:</em> <td>timed media elements |
| <tr><td><em>Inherited:</em> <td>no |
| <tr><td><em>Percentages:</em> <td>see prose |
| <tr><td><em>Media:</em> <td>visual, audio |
| <tr><td><em>Computed value:</em> <td>the value as specified |
| </table> |
| </dl> |
| </div> |
| |
| <p>The <a href="#propdef-media-loop-end-time" class="noxref"> |
| <span class="propinst-media-loop-end-time">'media-loop-end-time'</span></a> sets |
| the time at which the media item loops for the second and subsequent repetitions.</p> |
| |
| <p>Values have the following meanings:</p> |
| <dl> |
| <dt><span class="index-inst" title="<time>"> |
| <a name="x11" href="http://www.w3.org/TR/CSS21/aural.html#value-def-time" class="noxref"> |
| <span class="value-inst-time"><strong><time></strong></span></a> |
| </span> |
| <dd>End time in absolute time units (seconds and milliseconds). Negative values are offsets from |
| the total duration of the complete media item. |
| |
| <dt><span class="index-inst" title="<percentage>"><a name="x12" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref"> |
| <span class="value-inst-percentage"><strong><percentage></strong></span></a></span> |
| <dd>Percent of total duration of the complete media item. Negative percentages are |
| relative offsets from the total duration of the complete media item. |
| </dl> |
| |
| |
| <pre> |
| audio.ambient { media-loop-end-time: -9s } |
| </pre> |
| |
| <h4>3.8 <a name="propdef-volume">Volume properties</a>: <a href="aural.html#propdef-volume" class="noxref"> |
| <span class="propinst-volume">'volume'</span></a></h4> |
| |
| <div class="propdef"> |
| <dl><dt> |
| <span class="index-def" title="'volume'"><a name="propdef-volume" class="propdef-title"><strong>'volume'</strong></a></span> |
| <dd> |
| <table class="propinfo" cellspacing=0 cellpadding=0> |
| <tr valign=baseline><td><em>Value:</em> <td> |
| <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-number" class="noxref"><span class="value-inst-number"><number></span></a> |
| <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage"><percentage></span></a> |
| | silent | soft | medium | loud | |
| x-loud | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a> |
| <tr valign=baseline><td><em>Initial:</em> <td>medium |
| <tr valign=baseline><td><em>Applies to:</em> <td>all elements |
| <tr valign=baseline><td><em>Inherited:</em> <td>yes |
| <tr valign=baseline><td><em>Percentages:</em> <td>refer to inherited value |
| <tr valign=baseline><td><em>Media:</em> <td>visual, audio |
| <tr valign=baseline><td><em>Computed value:</em> <td>number |
| </table> |
| </dl> |
| </div> |
| |
| <p>The <a href="#propdef-volume" class="noxref"> |
| <span class="index-def" title="volume">'volume'</span></a> refers to the |
| volume of the waveform from 0 to 1.0.</p> |
| |
| <p>Values have the following meanings:</p> |
| |
| <dl> |
| <dt><span class="index-inst" title="<number>"> |
| <a name="x11" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-number" class="noxref"> |
| <span class="value-inst-number"><strong><number></strong></span></a> |
| </span> |
| <dd>Any number between '0' and '1.0'. '0' represents silence and 1.0 |
| represents full volume. |
| |
| <dt><span class="index-inst" title="<percentage>"><a name="x12" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref"> |
| <span class="value-inst-percentage"><strong><percentage></strong></span></a></span> |
| <dd>Percentage values are calculated relative to the inherited value, |
| and are then clipped to the range '0' to '1.0'. |
| |
| <dt><strong>silent</strong> |
| <dd>No sound at all. Same as '0'. |
| |
| <dt><strong>low</strong> |
| <dd>Same as '0.25'. |
| |
| <dt><strong>medium</strong> |
| <dd>Same as '0.50'. |
| |
| <dt><strong>high</strong> |
| <dd>Same as '0.75'. |
| |
| <dt><strong>full-volume</strong> |
| <dd>Same as '1.0'. |
| </dl> |
| |
| <p>User agents should allow the values corresponding to '0' and '1.0' to be set by the listener. |
| No one setting is universally applicable; suitable values depend on the equipment in use |
| (speakers, headphones), the environment (in car, home theater, library) and personal |
| preferences. </p> |
| |
| |
| <h4>3.9 Shorthand media timing property<a name="propdef-media-timing" href="#propdef-media-timing" class="noxref"> |
| <span class="propinst-media-timing">'media-timing'</span></a></h4> |
| |
| <div class="propdef"> |
| <dl><dt> |
| <span class="index-def" title="'media-timing'"><a name="propdef-media-timing" class="propdef-title"><strong>'media-timing'</strong></a></span> |
| <dd> |
| <table class="propinfo"> |
| <tr ><td><em>Value:</em> <td> |
| [<a href="#propdef-media-play-state"><span class="propinst-media-play-state">'media-play-state'</span></a> |
| || <a href="#propdef-media-start-time"><span class="propinst-media-start-time">'media-start-time'</span></a> |
| || <a href="#propdef-media-end-time"><span class="propinst-media-end-time">'media-end-time'</span></a> |
| || <a href="#propdef-media-loop-count"><span class="propinst-media-loop-count">'media-loop-count'</span></a> |
| || <a href="#propdef-media-loop-start-time"><span class="propinst-media-loop-start-time">'media-loop-start-time'</span></a> |
| || <a href="#propdef-media-loop-end-time"><span class="propinst-media-loop-end-time">'media-loop-end-time'</span></a> |
| || <a href="#propdef-media-play-rate"><span class="propinst-media-play-rate">'media-play-rate'</span></a>] |
| | inherit |
| <tr><td><em>Initial:</em> <td>see individual properties |
| <tr><td><em>Applies to:</em> <td>timed media elements |
| <tr><td><em>Inherited:</em> <td>no |
| <tr><td><em>Percentages:</em> <td>see individual properties |
| <tr><td><em>Media:</em> <td>visual, audio |
| <tr><td><em>Computed value:</em> <td>see individual properties |
| </table> |
| </dl> |
| </div> |
| |
| <p>The <a href="#propdef-media-timing" class="noxref"> |
| <span class="propinst-media-timing">'media-timing'</span></a> is a shorthand property for |
| setting the individual media properties (i.e., |
| <a href="#propdef-media-play-state"><span class="propinst-media-play-state">'media-play-state'</span></a>, |
| <a href="#propdef-media-start-time"><span class="propinst-media-start-time">'media-start-time'</span></a>, |
| <a href="#propdef-media-end-time"><span class="propinst-media-end-time">'media-end-time'</span></a>, |
| <a href="#propdef-media-loop-count"><span class="propinst-media-loop-count">'media-loop-count'</span></a>, |
| <a href="#propdef-media-loop-start-time"><span class="propinst-media-loop-start-time">'media-loop-start-time'</span></a>, |
| <a href="#propdef-media-loop-end-time"><span class="propinst-media-loop-end-time">'media-loop-end-time'</span></a>, |
| and <a href="#propdef-media-play-rate"><span class="propinst-media-play-rate">'media-play-rate'</span></a>) at the same place in the |
| style sheet. Given a valid declaration, the |
| <a href="#propdef-media-timing"><span class="propinst-media-timing">'media-timing'</span></a> |
| property first sets all the individual media properties to their initial values, then assigns |
| explicit values given in the declaration.</p> |
| |
| <p>In the first rule of the following example, only a value for 'media-timing' has been given |
| and the other individual properties are set to their initial value. In the second rule, all |
| individual properties have been specified.</p> |
| |
| <pre> |
| audio.ambient { media-timing: playing; } |
| </pre> |
| |
| <pre> |
| movie#main { media-timing: playing 0s -0.5s 2 2s -4s 1 } |
| </pre> |
| |
| <h2 class=no-num id=references>References</h2> |
| <p class=big-issue>Coming soon</p> |
| |
| <h2 class=no-num id=acknowledgements>Acknowledgements</h2> |
| <p class=big-issue>Coming soon</p> |
| |
| </body> |
| </html> |
