Skip to content

ReferenceSliders

media-time-slider-markers

Draws a marker on the time slider for each cue on the text tracks a filter matches, such as ad breaks

A part of the time slider that draws a marker for each cue on the text tracks a filter matches, such as ad breaks, quiz questions, or highlights. Its props, data attributes, and custom properties are listed with the time slider’s other parts.

Import

import '@videojs/html/ui/time-slider-markers';

Anatomy

<media-time-slider>
  <media-slider-track>
    <media-slider-fill></media-slider-fill>
  </media-slider-track>
  <media-time-slider-markers label="ads"></media-time-slider-markers>
  <media-slider-thumb></media-slider-thumb>
</media-time-slider>

Each marker is a <div>, or a clone of a <template> child. The template must contain exactly one HTML root element, and stays in the light DOM.

<media-time-slider-markers label="ads">
  <template>
    <div class="ad-marker"></div>
  </template>
</media-time-slider-markers>

Behavior

The kind, label, and language attributes pick the tracks whose cues are drawn. The filter property takes a filter object, a function, or a track definition instead, and takes priority over the attributes. With neither, nothing is drawn.

Tracks from the media and from the app are drawn alike. While the markers are rendered, the text cues feature reads the tracks they match, so tracks it skips by default work too.

A cue whose end is its start is a point, drawn as a marker with no width and data-point. Any other cue is a range, spanning from its start to its end and clamped to the slider. Markers sit on the same span as the slider: from 0 to the media’s duration, or to the end of its seekable range while the duration is unknown. Cues outside that span, and every cue while it’s unknown, aren’t drawn. Markers are ordered by start, then end.

Styling

Attribute Description
data-active Present while the marker’s cue is active.
data-point Present when the cue marks one moment rather than a span.

Each marker also carries the slider’s data attributes, such as data-orientation, and its geometry through:

  • --media-slider-marker-start
  • --media-slider-marker-end
  • --media-slider-marker-width, the marker’s size along the slider, 0% for a point

Markers are unstyled. Position each one from its custom properties, and give points a visible width:

media-time-slider-markers > div {
  position: absolute;
  inset-block: 0;
  left: var(--media-slider-marker-start);
  width: var(--media-slider-marker-width);
  min-width: 4px;
}

media-time-slider-markers > [data-active] {
  background: orange;
}

Accessibility

The markers render with aria-hidden="true"; the slider’s value is what assistive technology reads. When a marker carries meaning a viewer needs, such as an upcoming ad break, convey it another way too.

Examples

Basic usage

An app track labeled ads holds a point at 8 seconds and a range from 18 to 24 seconds. A marker turns orange while its cue is active.

<video-player class="html-time-slider-markers-basic">
  <media-container class="html-time-slider-markers-basic__container">
    <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoplay muted playsinline loop></video>
    <media-time-slider class="html-time-slider-markers-basic__slider">
      <media-slider-track class="html-time-slider-markers-basic__track">
        <media-slider-fill class="html-time-slider-markers-basic__fill"></media-slider-fill>
      </media-slider-track>
      <media-time-slider-markers label="ads" class="html-time-slider-markers-basic__markers">
        <template>
          <div class="html-time-slider-markers-basic__marker"></div>
        </template>
      </media-time-slider-markers>
      <media-slider-thumb class="html-time-slider-markers-basic__thumb"></media-slider-thumb>
    </media-time-slider>
  </media-container>
</video-player>