Display
Time
This component is used to display certain media states as a unit of time, such as the current time or duration.
Usage
The <media-time>
component displays time formatted text (e.g., 01:30
represents 1 minute 30 seconds). The time can be based on either the current time, buffered amount, seekable amount, or duration.
The type
property can be set to:
current
: The current playback time.buffered
: The buffered amount of media.duration
: The total length of media.
Remaining Time
You can use the remainder
property to display the duration minus the selected type
.
Styling
CSS Variables
The following snippet contains a complete list of CSS variables and their default values. Any of the variables can be set to adjust the default time styles:
Component API
Props
Name | Type |
---|---|
|
'current' | 'buffered' | 'duration'
|
|
boolean
|
|
boolean
|
|
boolean
|
|
boolean
|
Events
Name | Type |
---|
Name | Description |
---|
CSS VarsLearn more about cssVars
Name | Type |
---|
CSS PartsLearn more about cssParts
Name | Description |
---|
Instance Props
Name | Type |
---|
Instance Methods
Name | Type |
---|
Previous
<-
Icon
Next
Captions
->