Timed Media CSS

Working Draft — 19 March 2007

Abstract

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.

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.

Status of this document

This is a work in progress! This document is changing frequently in response to comments and as a general part of its development process. Comments are very welcome.

Table of contents


1. Introduction

This section is non-normative.

Moving introduction coming...

2. New syntax

3. New Properties

These properties apply to elements that embed timed media, such as movies or sounds.

3.1 'media-play-state'

'media-play-state'
Value:   playing | paused | inherit
Initial:  paused
Applies to:  timed media elements
Inherited:  no
Percentages:  see prose
Media:  visual, audio
Computed value:  the value or percentage as specified

The 'media-play-state' starts or stops a timed media item.

Values have the following meanings:

playing
Playing at the 'media-play-rate'.
paused
Not playing.
 movie#halt { media-play-state: paused; }

3.2 'media-play-rate'

'media-play-rate'
Value:   <number> | <percentage> | inherit
Initial:  1
Applies to:  timed media elements
Inherited:  no
Percentages:  see prose
Media:  visual, audio
Computed value:  the value or percentage as specified

The 'media-play-rate' 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. Wording ????

Values have the following meanings:

<number>
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.

<percentage>
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.
 movie:hover { media-play-state: playing; media-play-rate: 0.5; }

3.3 'media-start-time'

'media-start-time'
Value:   <time> | <percentage> | inherit
Initial:  0s
Applies to:  timed media elements
Inherited:  no
Percentages:  see prose
Media:  visual, audio
Computed value:  the value as specified

The 'media-start-time' sets the time at which the media item begins playing. Negative values are from the total duration of the complete media item.

Values have the following meanings:

<number>
Start time in absolute time units (seconds and milliseconds).
<percentage>
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.
movie#main { media-start-time: 10s }

3.4 'media-end-time'

'media-end-time'
Value:   <time> | <percentage> | inherit
Initial:  -0s
Applies to:  timed media elements
Inherited:  no
Percentages:  see prose
Media:  visual, audio
Computed value:  the value as specified

The 'media-end-time' sets the time at which the media item stops playing. Negative values are offsets from the total duration of the complete media item.

Values have the following meanings:

<time>
End time in absolute time units (seconds and milliseconds).
<percentage>
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.
movie#main { media-end-time: -5s }

3.5 'media-loop-count'

'media-loop-count'
Value:   <number> | infinite | inherit
Initial:  1
Applies to:  timed media elements
Inherited:  no
Percentages:  N/A
Media:  visual, audio
Computed value:  the value as specified

The 'media-loop-count' sets the number of times the media item will loop when played.

Values have the following meanings:

<number>
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.
infinite
The media item will loop indefinitely.
audio.ambient { media-loop-count: infinite }

3.6 'media-loop-start-time'

'media-loop-start-time'
Value:   <time> | <percentage> | inherit
Initial:  0s
Applies to:  timed media elements
Inherited:  no
Percentages:  see prose
Media:  visual, audio
Computed value:  the value as specified

The 'media-loop-start-time' sets the time at which the media item begins playing after looping.

Values have the following meanings:

<time>
Start time in absolute time units (seconds and milliseconds). Negative values are offsets from the total duration of the complete media item.
<percentage>
Percent of total duration of the complete media item. Negative percentages are relative offsets from the total duration of the complete media item.
audio.ambient { media-loop-start-time: 6s }

3.7 'media-loop-end-time'

'media-loop-end-time'
Value:   <time> | <percentage> | inherit
Initial:  -0s
Applies to:  timed media elements
Inherited:  no
Percentages:  see prose
Media:  visual, audio
Computed value:  the value as specified

The 'media-loop-end-time' sets the time at which the media item loops for the second and subsequent repetitions.

Values have the following meanings:

<time>
End time in absolute time units (seconds and milliseconds). Negative values are offsets from the total duration of the complete media item.
<percentage>
Percent of total duration of the complete media item. Negative percentages are relative offsets from the total duration of the complete media item.
audio.ambient { media-loop-end-time: -9s }

3.8 Volume properties: 'volume'

'volume'
Value:   <number> <percentage> | silent | soft | medium | loud | x-loud | inherit
Initial:  medium
Applies to:  all elements
Inherited:  yes
Percentages:  refer to inherited value
Media:  visual, audio
Computed value:  number

The 'volume' refers to the volume of the waveform from 0 to 1.0.

Values have the following meanings:

<number>
Any number between '0' and '1.0'. '0' represents silence and 1.0 represents full volume.
<percentage>
Percentage values are calculated relative to the inherited value, and are then clipped to the range '0' to '1.0'.
silent
No sound at all. Same as '0'.
low
Same as '0.25'.
medium
Same as '0.50'.
high
Same as '0.75'.
full-volume
Same as '1.0'.

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.

3.9 Shorthand media timing property 'media-timing'

'media-timing'
Value:   ['media-play-state' || 'media-start-time' || 'media-end-time' || 'media-loop-count' || 'media-loop-start-time' || 'media-loop-end-time' || 'media-play-rate'] | inherit
Initial:  see individual properties
Applies to:  timed media elements
Inherited:  no
Percentages:  see individual properties
Media:  visual, audio
Computed value:  see individual properties

The 'media-timing' is a shorthand property for setting the individual media properties (i.e., 'media-play-state', 'media-start-time', 'media-end-time', 'media-loop-count', 'media-loop-start-time', 'media-loop-end-time', and 'media-play-rate') at the same place in the style sheet. Given a valid declaration, the 'media-timing' property first sets all the individual media properties to their initial values, then assigns explicit values given in the declaration.

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.

audio.ambient { media-timing: playing; }
        
movie#main { media-timing: playing 0s -0.5s 2 2s -4s 1 }
        

References

Coming soon

Acknowledgements

Coming soon