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