Timed Media CSS

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 proposal is not under active development at this time.

Table of contents

• 1.Introduction
• 2. New syntax
• 3. New Properties
  • 3.1. 'media-play-state'
  • 3.2. 'media-play-rate'
  • 3.3. 'media-start-time'
  • 3.4. 'media-end-time'
  • 3.5. 'media-loop-count'
  • 3.6. 'media-loop-start-time'
  • 3.7. 'media-loop-end-time'
  • 3.8. 'volume'
  • 3.9. 'media-timing'
• References
• Acknowledgements
• Change history

1. Introduction

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'

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'

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'

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'

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'

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'

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'

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'

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'

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