Time Display

The <ef-time-display> element displays the current playback time and total duration in a human-readable format. It automatically updates as the video plays and can be styled with CSS custom properties.

Basic Usage

<ef-preview>
  <ef-timegroup slot="canvas" mode="contain" className="w-[1920px] h-[1080px]">
    <ef-video src="/assets/video.mp4"></ef-video>
  </ef-timegroup>
  
  <div slot="controls">
    <ef-time-display></ef-time-display>
  </div>
</ef-preview>

The time display will show something like: 1:23 / 5:47

Like all control elements, it can target any temporal element on the page using the target attribute. See Understanding Temporal Elements for more information.

Properties

<ef-time-display target="my-video"></ef-time-display>

Format

The time display uses the format M:SS / M:SS where:

• First time: Current playback position
• Second time: Total duration
• Minutes are shown without leading zeros (e.g., 1:23 not 01:23)
• Seconds always have leading zeros (e.g., 0:05 not 0:5)

Examples:

• 0:00 / 2:30 - At the start of a 2 minute 30 second video
• 1:15 / 3:45 - 1 minute 15 seconds into a 3 minute 45 second video
• 12:03 / 15:20 - 12 minutes 3 seconds into a 15 minute 20 second video

Styling

CSS Custom Properties

ef-time-display {
  --ef-font-family: 'Roboto Mono', monospace;
  --ef-font-size-xs: 0.875rem;
  --ef-text-color: rgb(75 85 99);
}

CSS Parts

The time display exposes a time part for advanced styling:

ef-time-display::part(time) {
  font-weight: bold;
  letter-spacing: 0.5px;
}

Examples

Custom Styled Display

<style>
  .custom-time {
    --ef-font-family: 'SF Mono', 'Monaco', monospace;
    --ef-font-size-xs: 1rem;
    --ef-text-color: white;
  }
  
  .custom-time::part(time) {
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
  }
</style>

<ef-time-display class="custom-time"></ef-time-display>

In a Control Bar

<div className="flex items-center gap-4 p-4 bg-gray-800">
  <ef-toggle-play>
    <button slot="play">▶</button>
    <button slot="pause">⏸</button>
  </ef-toggle-play>
  
  <ef-time-display></ef-time-display>
  
  <ef-scrubber className="flex-1"></ef-scrubber>
  
  <ef-toggle-loop>
    <button>🔁</button>
  </ef-toggle-loop>
</div>

Large Display

<style>
  .large-time {
    --ef-font-size-xs: 2rem;
    --ef-text-color: white;
  }
  
  .large-time::part(time) {
    font-weight: 300;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }
</style>

<ef-time-display class="large-time"></ef-time-display>

With Labels

<div className="flex flex-col items-center gap-1">
  <span className="text-xs text-gray-500">Playback Time</span>
  <ef-time-display></ef-time-display>
</div>

Use Cases

Video Editor Interface

Display current time alongside other controls in a video editor:

<ef-workbench>
  <ef-timegroup slot="canvas" mode="contain" className="w-[1920px] h-[1080px]">
    <ef-video src="/video.mp4"></ef-video>
  </ef-timegroup>
  
  <div slot="timeline" className="flex items-center gap-4 p-4 bg-gray-900">
    <ef-toggle-play>...</ef-toggle-play>
    <ef-time-display></ef-time-display>
    <ef-scrubber className="flex-1"></ef-scrubber>
  </div>
</ef-workbench>

Remote Display

Use with <ef-controls> to show time in a different location:

<ef-preview id="player">...</ef-preview>

<div className="status-bar">
  <ef-controls target="player">
    <ef-time-display></ef-time-display>
  </ef-controls>
</div>

Multiple Displays

Show time in multiple locations, all synchronized:

<ef-preview>
  <ef-timegroup slot="canvas" mode="contain" className="w-[1920px] h-[1080px]">
    <ef-video src="/video.mp4"></ef-video>
  </ef-timegroup>
  
  <!-- Overlay display -->
  <div className="absolute top-4 left-4">
    <ef-time-display></ef-time-display>
  </div>
  
  <!-- Control bar display -->
  <div slot="controls" className="flex items-center gap-4">
    <ef-time-display></ef-time-display>
    <ef-scrubber></ef-scrubber>
  </div>
</ef-preview>

Behavior

Real-Time Updates

The time display automatically updates as the video plays, subscribing to the currentTimeContext and durationContext from its ancestor.

Graceful Fallbacks

If timing information is not available (NaN, undefined, or null), the display shows 0:00 as a fallback to prevent display errors.

No User Interaction

The time display is read-only and does not accept user input. For seeking, use <ef-scrubber> or implement custom seek controls.

Technical Notes

• Uses TargetOrContextMixin to consume context
• Consumes currentTimeContext and durationContext
• Renders as inline-block by default
• Time values are converted from milliseconds to M:SS format
• Handles edge cases like NaN, negative values, and undefined gracefully
• White-space is set to nowrap to prevent line breaking
• Updates automatically when context changes

Accessibility Considerations

• The time display uses semantic HTML (span with part attribute)
• Consider adding aria-label for screen readers: "Current time: 1 minute 23 seconds of 5 minutes 47 seconds"
• Ensure sufficient color contrast for readability
• Monospace fonts help users with visual impairments track changing digits

Related Elements

• EFScrubber - Visual timeline scrubbing control
• EFTogglePlay - Play/pause control
• EFControls - Remote control proxy
• EFFilmstrip - Visual timeline representation