WebKitSite/specs/Timed_Media_CSS.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
   2
   3 <html>
   4 <head>
   5         <title> Proposed Timed Media CSS </title>
   6         <link href="./mediaelement.css" rel="stylesheet" type="text/css">
   7
   8         <style type="text/css">
   9                 h4 + .element { margin-top: -2.5em; padding-top: 2em; }
  10                 h4 + p + .element { margin-top: -5em; padding-top: 4em; }
  11                 .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! */ }
  12                 .proposal { border: blue solid; padding: 1em; }
  13                 table.matrix, table.matrix td { border: none; text-align: right; }
  14                 table.matrix { margin-left: 2em; }
  15
  16                 table.propinfo, table.propinfo th, table.propinfo td { border: none; }
  17                 table.history, table.history th, table.history td { border: solid thin; font-size: x-small }
  18                 table.history { width: 100%; }
  19                 td.hversion, td.author, td.date { width: 5%; }
  20                 td.change { width: 65%; }
  21         </style>
  22
  23 </head>
  24 <body class="draft">
  25
  26         <div class="head">
  27                 <h1> Timed Media CSS </h1>
  28                 <h2 class="no-num no-toc" id="working"> Working Draft &mdash; 19 March 2007 </h2>
  29
  30                 <p class="copyright">&copy; Copyright 2007 Apple Inc. </p>
  31
  32         </div>
  33         <h2 class="no-num no-toc" id="abstract"> Abstract </h2>
  34
  35         <p>This specification defines a set of properties of Cascading Style Sheets for the presentation
  36         of timed media, including but not limited to video and audio. By separating the presentation
  37         style of timed media elements from their contents, these properties further simplify Web
  38         authoring and site maintenance.</p>
  39
  40         <p>While there are cases in which the playback of timed media is semantically meaningful within the
  41         context of a document, there are many cases in which playback is entirely presentational.
  42         Therefore we offer a reasonable set of CSS properties to control whether media is playing or not
  43         according to presentation state, along with control over the portions of media that are to be
  44         presented, looping behavior, and audio volume.</p>
  45
  46         <h2 class="no-num no-toc" id="status"> Status of this document </h2>
  47
  48         <p><strong>This is a work in progress!</strong> This document is changing frequently in response
  49         to comments and as a general part of its development process. Comments are very welcome.</p>
  50
  51         <h2 class="no-num no-toc"id="contents"> Table of contents </h2>
  52
  53         <!--begin-toc-->
  54         <ul class="toc">
  55                 <li><a href="#introduction"><span class="secno">1.</span>Introduction</a>
  56
  57                 <li><a href="#new-syntax"><span class=secno>2. </span>New syntax</a>
  58
  59                 <li><a href="#new-properties"><span class=secno>3. </span>New Properties</a>
  60                         <ul class=toc>
  61                                 <li><a href="#propdef-media-play-state"><span class=secno>3.1.</span> 'media-play-state'</a>
  62                                 <li><a href="#propdef-media-play-rate"><span class=secno>3.2.</span> 'media-play-rate'</a>
  63                                 <li><a href="#propdef-media-start-time"><span class=secno>3.3.</span> 'media-start-time'</a>
  64                                 <li><a href="#propdef-media-end-time"><span class=secno>3.4.</span> 'media-end-time'</a>
  65                                 <li><a href="#propdef-media-loop-count"><span class=secno>3.5.</span> 'media-loop-count'</a>
  66                                 <li><a href="#propdef-media-loop-start-time"><span class=secno>3.6.</span> 'media-loop-start-time'</a>
  67                                 <li><a href="#propdef-media-loop-end-time"><span class=secno>3.7.</span> 'media-loop-end-time'</a>
  68                                 <li><a href="#propdef-volume"><span class=secno>3.8.</span> 'volume'</a>
  69                                 <li><a href="#propdef-media-timing"><span class=secno>3.9.</span> 'media-timing'</a>
  70                         </ul>
  71
  72                 <li class=no-num><a href="#references">References</a>
  73
  74                 <li class=no-num><a href="#acknowledgements">Acknowledgements</a>
  75
  76                 <li class=no-num><a href="#history">Change history</a>
  77
  78         </ul>
  79         <!--end-toc-->
  80
  81         <hr>
  82         <h2 id="introduction"><span class="secno">1. </span>Introduction</h2>
  83         <em>This section is non-normative.</em>
  84
  85         <p class=big-issue>Moving introduction coming...</p>
  86
  87         <h2 id="new-syntax"><span class="secno">2. </span>New syntax</h2>
  88
  89         <h2 id="new-properties"><span class="secno">3. </span>New Properties</h2>
  90
  91         <p>These properties apply to elements that embed timed media, such as movies or sounds.</p>
  92
  93
  94         <h4>3.1 <a name="propdef-media-play-state" href="#propdef-media-play-state" class="noxref">
  95         <span class="propinst-media-play-state">'media-play-state'</span></a></h4>
  96
  97         <div class="propdef">
  98                 <dl><dt>
  99                 <span class="index-def" title="'media-play-state'"><a name="propdef-media-play-state" class="propdef-title"><strong>'media-play-state'</strong></a></span>
 100                         <dd>
 101                         <table class="propinfo">
 102                                 <tr><td><em>Value:</em>&nbsp;&nbsp;<td>
 103                                         playing | paused | inherit
 104                                 <tr><td><em>Initial:</em>&nbsp;&nbsp;<td>paused
 105                                 <tr><td><em>Applies to:</em>&nbsp;&nbsp;<td>timed media elements
 106                                 <tr><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
 107                                 <tr><td><em>Percentages:</em>&nbsp;&nbsp;<td>see prose
 108                                 <tr><td><em>Media:</em>&nbsp;&nbsp;<td>visual, audio
 109                                 <tr><td><em>Computed&nbsp;value:</em>&nbsp;&nbsp;<td>the value or percentage as specified
 110                         </table>
 111                 </dl>
 112         </div>
 113
 114         <p>The <a href="#propdef-media-play-state" class="noxref">
 115         <span class="propinst-media-play-state">'media-play-state'</span></a> starts or stops
 116         a timed media item.
 117         </p>
 118
 119         <p>Values have the following meanings:</p>
 120
 121         <dl>
 122                 <dt><strong>playing</strong>
 123                         <dd>Playing at the <a href="#propdef-media-play-rate" class="noxref">'media-play-rate'</a>.
 124
 125                 <dt><strong>paused</strong>
 126                         <dd>Not playing.
 127         </dl>
 128
 129
 130 <pre>
 131  movie#halt { media-play-state: paused; }
 132 </pre>
 133
 134         <h4>3.2 <a name="propdef-media-play-rate" href="#propdef-media-play-rate" class="noxref">
 135         <span class="propinst-media-play-rate">'media-play-rate'</span></a></h4>
 136
 137         <div class="propdef">
 138                 <dl><dt>
 139                 <span class="index-def" title="'media-play-rate'"><a name="propdef-media-play-rate" class="propdef-title"><strong>'media-play-rate'</strong></a></span>
 140                         <dd>
 141                         <table class="propinfo">
 142                                 <tr><td><em>Value:</em>&nbsp;&nbsp;<td>
 143                                         <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-number" class="noxref"><span class="value-inst-number">&lt;number&gt;</span></a>
 144                                         | <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage">&lt;percentage&gt;</span></a>
 145                                         | inherit
 146                                 <tr><td><em>Initial:</em>&nbsp;&nbsp;<td>1
 147                                 <tr><td><em>Applies to:</em>&nbsp;&nbsp;<td>timed media elements
 148                                 <tr><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
 149                                 <tr><td><em>Percentages:</em>&nbsp;&nbsp;<td>see prose
 150                                 <tr><td><em>Media:</em>&nbsp;&nbsp;<td>visual, audio
 151                                 <tr><td><em>Computed&nbsp;value:</em>&nbsp;&nbsp;<td>the value or percentage as specified
 152                         </table>
 153                 </dl>
 154         </div>
 155
 156         <p>The <a href="#propdef-media-play-rate" class="noxref">
 157         <span class="propinst-media-play-rate">'media-play-rate'</span></a> sets
 158         the play rate of a timed media item, such as a movie or sound. The user agents
 159         may preserve pitch when changing the rate of audio if possible.
 160         <span class=big-issue>Wording ????</span>
 161         </p>
 162
 163         <p>Values have the following meanings:</p>
 164         <dl>
 165                 <dt><span class="index-inst" title="&lt;number&gt;">
 166                                 <a name="x11" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-number" class="noxref">
 167                                 <span class="value-inst-number"><strong>&lt;number&gt;</strong></span></a>
 168                         </span>
 169                         <dd>A floating point number is the the default play rate of the
 170                         media item. Negative play rates are allowed and imply playing backwards, although not
 171                         all media formats support reverse play.</p>
 172
 173                 <dt><span class="index-inst" title="&lt;percentage&gt;"><a name="x12" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref">
 174                         <span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a></span>
 175                         <dd>Percentage values are calculated relative to the default play rate of the media item,
 176                         as defined by the resource's container format, for example the "preferredRate" of a
 177                         QuickTime movie. May be negative or greater than 100% as allowed by the media format.
 178         </dl>
 179
 180 <pre>
 181  movie:hover { media-play-state: playing; media-play-rate: 0.5; }
 182 </pre>
 183
 184         <h4>3.3 <a name="propdef-media-start-time" href="#propdef-media-start-time" class="noxref">
 185         <span class="propinst-media-start-time">'media-start-time'</span></a></h4>
 186
 187         <div class="propdef">
 188                 <dl><dt>
 189                 <span class="index-def" title="'media-start-time'"><a name="propdef-media-start-time" class="propdef-title"><strong>'media-start-time'</strong></a></span>
 190                         <dd>
 191                         <table class="propinfo">
 192                                 <tr><td><em>Value:</em>&nbsp;&nbsp;<td>
 193                                         <a href="http://www.w3.org/TR/CSS21/aural.html#value-def-time" class="noxref"><span class="value-inst-time">&lt;time&gt;</span></a>
 194                                         | <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage">&lt;percentage&gt;</span></a>
 195                                         | inherit
 196                                 <tr><td><em>Initial:</em>&nbsp;&nbsp;<td>0s
 197                                 <tr><td><em>Applies to:</em>&nbsp;&nbsp;<td>timed media elements
 198                                 <tr><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
 199                                 <tr><td><em>Percentages:</em>&nbsp;&nbsp;<td>see prose
 200                                 <tr><td><em>Media:</em>&nbsp;&nbsp;<td>visual, audio
 201                                 <tr><td><em>Computed&nbsp;value:</em>&nbsp;&nbsp;<td>the value as specified
 202                         </table>
 203                 </dl>
 204         </div>
 205
 206         <p>The <a href="#propdef-media-start-time" class="noxref">
 207         <span class="propinst-media-start-time">'media-start-time'</span></a> sets
 208         the time at which the media item begins playing. Negative values are from
 209         the total duration of the complete media item.</p>
 210
 211         <p>Values have the following meanings:</p>
 212         <dl>
 213                 <dt><span class="index-inst" title="&lt;number&gt;">
 214                                 <a name="x11" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-number" class="noxref">
 215                                 <span class="value-inst-number"><strong>&lt;number&gt;</strong></span></a>
 216                         </span>
 217                         <dd>Start time in absolute time units (seconds and milliseconds).
 218
 219                 <dt><span class="index-inst" title="&lt;percentage&gt;"><a name="x12" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref">
 220                         <span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a></span>
 221                         <dd>Percentage values are calculated relative to the total duration of the complete
 222                         media item. Negative percentages are relative offsets from the total duration of
 223                         the complete media item.
 224         </dl>
 225
 226 <pre>
 227 movie#main { media-start-time: 10s }
 228 </pre>
 229
 230         <h4>3.4 <a name="propdef-media-end-time" href="#propdef-media-end-time" class="noxref">
 231         <span class="propinst-media-end-time">'media-end-time'</span></a></h4>
 232
 233         <div class="propdef">
 234                 <dl><dt>
 235                 <span class="index-def" title="'media-end-time'"><a name="propdef-media-end-time" class="propdef-title"><strong>'media-end-time'</strong></a></span>
 236                         <dd>
 237                         <table class="propinfo">
 238                                 <tr><td><em>Value:</em>&nbsp;&nbsp;<td>
 239                                         <a href="http://www.w3.org/TR/CSS21/aural.html#value-def-time" class="noxref"><span class="value-inst-time">&lt;time&gt;</span></a>
 240                                         | <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage">&lt;percentage&gt;</span></a>
 241                                         | inherit
 242                                 <tr><td><em>Initial:</em>&nbsp;&nbsp;<td>-0s
 243                                 <tr><td><em>Applies to:</em>&nbsp;&nbsp;<td>timed media elements
 244                                 <tr><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
 245                                 <tr><td><em>Percentages:</em>&nbsp;&nbsp;<td>see prose
 246                                 <tr><td><em>Media:</em>&nbsp;&nbsp;<td>visual, audio
 247                                 <tr><td><em>Computed&nbsp;value:</em>&nbsp;&nbsp;<td>the value as specified
 248                         </table>
 249                 </dl>
 250         </div>
 251
 252         <p>The <a href="#propdef-media-end-time" class="noxref">
 253         <span class="propinst-media-end-time">'media-end-time'</span></a> sets
 254         the time at which the media item stops playing. Negative values are offsets
 255         from the total duration of the complete media item.</p>
 256
 257         <p>Values have the following meanings:</p>
 258         <dl>
 259                 <dt><span class="index-inst" title="&lt;time&gt;">
 260                                 <a name="x11" href="http://www.w3.org/TR/CSS21/aural.html#value-def-time" class="noxref">
 261                                 <span class="value-inst-time"><strong>&lt;time&gt;</strong></span></a>
 262                         </span>
 263                         <dd>End time in absolute time units (seconds and milliseconds).
 264
 265                 <dt><span class="index-inst" title="&lt;percentage&gt;"><a name="x12" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref">
 266                         <span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a></span>
 267                         <dd>Percentage values are calculated relative to the total duration of the complete
 268                         media item. Negative percentages are relative offsets from the total duration of
 269                         the complete media item.
 270         </dl>
 271
 272 <pre>
 273 movie#main { media-end-time: -5s }
 274 </pre>
 275
 276
 277
 278         <h4>3.5 <a name="propdef-media-loop-count" href="#propdef-media-loop-count" class="noxref">
 279         <span class="propinst-media-loop-count">'media-loop-count'</span></a></h4>
 280
 281         <div class="propdef">
 282                 <dl><dt>
 283                 <span class="index-def" title="'media-loop-count'"><a name="propdef-media-loop-count" class="propdef-title"><strong>'media-loop-count'</strong></a></span>
 284                         <dd>
 285                         <table class="propinfo">
 286                                 <tr><td><em>Value:</em>&nbsp;&nbsp;<td>
 287                                         <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-number" class="noxref"><span class="value-inst-number">&lt;number&gt;</span></a>
 288                                         | infinite
 289                                         | inherit
 290                                 <tr><td><em>Initial:</em>&nbsp;&nbsp;<td>1
 291                                 <tr><td><em>Applies to:</em>&nbsp;&nbsp;<td>timed media elements
 292                                 <tr><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
 293                                 <tr><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
 294                                 <tr><td><em>Media:</em>&nbsp;&nbsp;<td>visual, audio
 295                                 <tr><td><em>Computed&nbsp;value:</em>&nbsp;&nbsp;<td>the value as specified
 296                         </table>
 297                 </dl>
 298         </div>
 299
 300         <p>The <a href="#propdef-media-loop-count" class="noxref">
 301         <span class="propinst-media-loop-count">'media-loop-count'</span></a> sets
 302         the number of times the media item will loop when played.</p>
 303
 304         <p>Values have the following meanings:</p>
 305         <dl>
 306                 <dt><span class="index-inst" title="&lt;number&gt;">
 307                                 <a name="x11" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-number" class="noxref">
 308                                 <span class="value-inst-number"><strong>&lt;number&gt;</strong></span></a>
 309                         </span>
 310                         <dd>The number of time the media resource will loop. The default value of "1" means
 311                         the item will play through once but will not loop.
 312
 313                 <dt><span class="index-inst" title="infinite">
 314                         <span class="value-inst-infinite"><strong>infinite</strong></span></span>
 315                         <dd>The media item will loop indefinitely.
 316         </dl>
 317
 318
 319 <pre>
 320 audio.ambient { media-loop-count: infinite }
 321 </pre>
 322
 323
 324
 325         <h4>3.6 <a name="propdef-media-loop-start-time" href="#propdef-media-loop-start-time" class="noxref">
 326         <span class="propinst-media-loop-start-time">'media-loop-start-time'</span></a></h4>
 327
 328         <div class="propdef">
 329                 <dl><dt>
 330                 <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>
 331                         <dd>
 332                         <table class="propinfo">
 333                                 <tr ><td><em>Value:</em>&nbsp;&nbsp;<td>
 334                                         <a href="http://www.w3.org/TR/CSS21/aural.html#value-def-time" class="noxref"><span class="value-inst-time">&lt;time&gt;</span></a>
 335                                         | <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage">&lt;percentage&gt;</span></a>
 336                                         | inherit
 337                                 <tr><td><em>Initial:</em>&nbsp;&nbsp;<td>0s
 338                                 <tr><td><em>Applies to:</em>&nbsp;&nbsp;<td>timed media elements
 339                                 <tr><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
 340                                 <tr><td><em>Percentages:</em>&nbsp;&nbsp;<td>see prose
 341                                 <tr><td><em>Media:</em>&nbsp;&nbsp;<td>visual, audio
 342                                 <tr><td><em>Computed&nbsp;value:</em>&nbsp;&nbsp;<td>the value as specified
 343                         </table>
 344                 </dl>
 345         </div>
 346
 347         <p>The <a href="#propdef-media-loop-start-time" class="noxref">
 348         <span class="propinst-media-loop-start-time">'media-loop-start-time'</span></a> sets
 349         the time at which the media item begins playing after looping. </p>
 350
 351         <p>Values have the following meanings:</p>
 352         <dl>
 353                 <dt><span class="index-inst" title="&lt;time&gt;">
 354                                 <a name="x11" href="http://www.w3.org/TR/CSS21/aural.html#value-def-time" class="noxref">
 355                                 <span class="value-inst-time"><strong>&lt;time&gt;</strong></span></a>
 356                         </span>
 357                         <dd>Start time in absolute time units (seconds and milliseconds). Negative values are offsets from
 358                         the total duration of the complete media item.
 359
 360                 <dt><span class="index-inst" title="&lt;percentage&gt;"><a name="x12" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref">
 361                         <span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a></span>
 362                         <dd>Percent of total duration of the complete media item. Negative percentages are
 363                         relative offsets from the total duration of the complete media item.
 364         </dl>
 365
 366 <pre>
 367 audio.ambient { media-loop-start-time: 6s }
 368 </pre>
 369
 370
 371
 372         <h4>3.7 <a name="propdef-media-loop-end-time" href="#propdef-media-loop-end-time" class="noxref">
 373         <span class="propinst-media-loop-end-time">'media-loop-end-time'</span></a></h4>
 374
 375         <div class="propdef">
 376                 <dl><dt>
 377                 <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>
 378                         <dd>
 379                         <table class="propinfo">
 380                                 <tr ><td><em>Value:</em>&nbsp;&nbsp;<td>
 381                                         <a href="http://www.w3.org/TR/CSS21/aural.html#value-def-time" class="noxref"><span class="value-inst-time">&lt;time&gt;</span></a>
 382                                         | <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage">&lt;percentage&gt;</span></a>
 383                                         | inherit
 384                                 <tr><td><em>Initial:</em>&nbsp;&nbsp;<td>-0s
 385                                 <tr><td><em>Applies to:</em>&nbsp;&nbsp;<td>timed media elements
 386                                 <tr><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
 387                                 <tr><td><em>Percentages:</em>&nbsp;&nbsp;<td>see prose
 388                                 <tr><td><em>Media:</em>&nbsp;&nbsp;<td>visual, audio
 389                                 <tr><td><em>Computed&nbsp;value:</em>&nbsp;&nbsp;<td>the value as specified
 390                         </table>
 391                 </dl>
 392         </div>
 393
 394         <p>The <a href="#propdef-media-loop-end-time" class="noxref">
 395         <span class="propinst-media-loop-end-time">'media-loop-end-time'</span></a> sets
 396         the time at which the media item loops for the second and subsequent repetitions.</p>
 397
 398         <p>Values have the following meanings:</p>
 399         <dl>
 400                 <dt><span class="index-inst" title="&lt;time&gt;">
 401                                 <a name="x11" href="http://www.w3.org/TR/CSS21/aural.html#value-def-time" class="noxref">
 402                                 <span class="value-inst-time"><strong>&lt;time&gt;</strong></span></a>
 403                         </span>
 404                         <dd>End time in absolute time units (seconds and milliseconds). Negative values are offsets from
 405                         the total duration of the complete media item.
 406
 407                 <dt><span class="index-inst" title="&lt;percentage&gt;"><a name="x12" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref">
 408                         <span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a></span>
 409                         <dd>Percent of total duration of the complete media item. Negative percentages are
 410                         relative offsets from the total duration of the complete media item.
 411         </dl>
 412
 413
 414 <pre>
 415 audio.ambient { media-loop-end-time: -9s }
 416 </pre>
 417
 418         <h4>3.8 <a name="propdef-volume">Volume properties</a>: <a href="aural.html#propdef-volume" class="noxref">
 419         <span class="propinst-volume">'volume'</span></a></h4>
 420
 421         <div class="propdef">
 422                 <dl><dt>
 423                         <span class="index-def" title="'volume'"><a name="propdef-volume" class="propdef-title"><strong>'volume'</strong></a></span>
 424                         <dd>
 425                         <table class="propinfo" cellspacing=0 cellpadding=0>
 426                                 <tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>
 427                                         <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-number" class="noxref"><span class="value-inst-number">&lt;number&gt;</span></a>
 428                                         <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage">&lt;percentage&gt;</span></a>
 429                                         | silent | soft | medium | loud |
 430                                 x-loud | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
 431                                 <tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>medium
 432                                 <tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
 433                                 <tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>yes
 434                                 <tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>refer to inherited value
 435                                 <tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td>visual, audio
 436                                 <tr valign=baseline><td><em>Computed&nbsp;value:</em>&nbsp;&nbsp;<td>number
 437                         </table>
 438                 </dl>
 439         </div>
 440
 441         <p>The <a href="#propdef-volume" class="noxref">
 442         <span class="index-def" title="volume">'volume'</span></a> refers to the
 443         volume of the waveform from 0 to 1.0.</p>
 444
 445         <p>Values have the following meanings:</p>
 446
 447         <dl>
 448                 <dt><span class="index-inst" title="&lt;number&gt;">
 449                                 <a name="x11" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-number" class="noxref">
 450                                 <span class="value-inst-number"><strong>&lt;number&gt;</strong></span></a>
 451                         </span>
 452                         <dd>Any number between '0' and '1.0'. '0' represents silence and 1.0
 453                         represents full volume.
 454
 455                 <dt><span class="index-inst" title="&lt;percentage&gt;"><a name="x12" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref">
 456                         <span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a></span>
 457                         <dd>Percentage values are calculated relative to the inherited value,
 458                         and are then clipped to the range '0' to '1.0'.
 459
 460                 <dt><strong>silent</strong>
 461                         <dd>No sound at all. Same as '0'.
 462
 463                 <dt><strong>low</strong>
 464                         <dd>Same as '0.25'.
 465
 466                 <dt><strong>medium</strong>
 467                         <dd>Same as '0.50'.
 468
 469                 <dt><strong>high</strong>
 470                         <dd>Same as '0.75'.
 471
 472                 <dt><strong>full-volume</strong>
 473                         <dd>Same as '1.0'.
 474         </dl>
 475
 476         <p>User agents should allow the values corresponding to '0' and '1.0' to be set by the listener.
 477         No one setting is universally applicable; suitable values depend on the equipment in use
 478         (speakers, headphones), the environment (in car, home theater, library) and personal
 479         preferences. </p>
 480
 481
 482         <h4>3.9 Shorthand media timing property<a name="propdef-media-timing" href="#propdef-media-timing" class="noxref">
 483         <span class="propinst-media-timing">'media-timing'</span></a></h4>
 484
 485         <div class="propdef">
 486                 <dl><dt>
 487                 <span class="index-def" title="'media-timing'"><a name="propdef-media-timing" class="propdef-title"><strong>'media-timing'</strong></a></span>
 488                         <dd>
 489                         <table class="propinfo">
 490                                 <tr ><td><em>Value:</em>&nbsp;&nbsp;<td>
 491                                          [<a href="#propdef-media-play-state"><span class="propinst-media-play-state">'media-play-state'</span></a>
 492                                         || <a href="#propdef-media-start-time"><span class="propinst-media-start-time">'media-start-time'</span></a>
 493                                         || <a href="#propdef-media-end-time"><span class="propinst-media-end-time">'media-end-time'</span></a>
 494                                         || <a href="#propdef-media-loop-count"><span class="propinst-media-loop-count">'media-loop-count'</span></a>
 495                                         || <a href="#propdef-media-loop-start-time"><span class="propinst-media-loop-start-time">'media-loop-start-time'</span></a>
 496                                         || <a href="#propdef-media-loop-end-time"><span class="propinst-media-loop-end-time">'media-loop-end-time'</span></a>
 497                                         || <a href="#propdef-media-play-rate"><span class="propinst-media-play-rate">'media-play-rate'</span></a>]
 498                                         | inherit
 499                                 <tr><td><em>Initial:</em>&nbsp;&nbsp;<td>see individual properties
 500                                 <tr><td><em>Applies to:</em>&nbsp;&nbsp;<td>timed media elements
 501                                 <tr><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
 502                                 <tr><td><em>Percentages:</em>&nbsp;&nbsp;<td>see individual properties
 503                                 <tr><td><em>Media:</em>&nbsp;&nbsp;<td>visual, audio
 504                                 <tr><td><em>Computed&nbsp;value:</em>&nbsp;&nbsp;<td>see individual properties
 505                         </table>
 506                 </dl>
 507         </div>
 508
 509         <p>The <a href="#propdef-media-timing" class="noxref">
 510         <span class="propinst-media-timing">'media-timing'</span></a> is a shorthand property for
 511         setting the individual media properties (i.e.,
 512         <a href="#propdef-media-play-state"><span class="propinst-media-play-state">'media-play-state'</span></a>,
 513         <a href="#propdef-media-start-time"><span class="propinst-media-start-time">'media-start-time'</span></a>,
 514         <a href="#propdef-media-end-time"><span class="propinst-media-end-time">'media-end-time'</span></a>,
 515         <a href="#propdef-media-loop-count"><span class="propinst-media-loop-count">'media-loop-count'</span></a>,
 516         <a href="#propdef-media-loop-start-time"><span class="propinst-media-loop-start-time">'media-loop-start-time'</span></a>,
 517         <a href="#propdef-media-loop-end-time"><span class="propinst-media-loop-end-time">'media-loop-end-time'</span></a>,
 518         and <a href="#propdef-media-play-rate"><span class="propinst-media-play-rate">'media-play-rate'</span></a>) at the same place in the
 519         style sheet. Given a valid declaration, the
 520         <a href="#propdef-media-timing"><span class="propinst-media-timing">'media-timing'</span></a>
 521         property first sets all the individual media properties to their initial values, then assigns
 522         explicit values given in the declaration.</p>
 523
 524         <p>In the first rule of the following example, only a value for 'media-timing' has been given
 525         and the other individual properties are set to their initial value. In the second rule, all
 526         individual properties have been specified.</p>
 527
 528         <pre>
 529 audio.ambient { media-timing: playing; }
 530         </pre>
 531
 532         <pre>
 533 movie#main { media-timing: playing 0s -0.5s 2 2s -4s 1 }
 534         </pre>
 535
 536         <h2 class=no-num id=references>References</h2>
 537                 <p class=big-issue>Coming soon</p>
 538
 539         <h2 class=no-num id=acknowledgements>Acknowledgements</h2>
 540                 <p class=big-issue>Coming soon</p>
 541
 542 </body>
 543 </html>