1. Buttons
  2. Seek Button

Buttons

Seek Button

This component is used to seek playback forwards or backwards.

Usage

The <media-seek-button> component will seek the current time of media forwards or backwards as it's pressed by dispatching a media-seek-request event to the player.

Custom Icons

Here's an example containing a custom backward and forward icon:

Tooltips

Tooltips can be provided like so:

Styling

You can override the default styles with CSS like so:

css 
        media-seek-button {
  color: pink;
  transition: opacity 0.2s ease-in;
}

/* Apply styles when seeking forward. */
media-seek-button:not([seconds*='-']) {
}

/* Apply styles when seeking backward. */
media-seek-button[seconds*='-'] {
}

/* Apply styles when media seeking is not permitted (e.g., live stream). */
media-seek-button[data-hidden] {
}

/* Style default icons. */
media-seek-button svg[slot='backward'] {
}
media-seek-button svg[slot='forward'] {
}

Focus

css 
        /* Apply styles when focused via keyboard. */
media-seek-button[data-focus] {
  outline: 3px solid blue;
}

Tailwind

The following is a headless example using Tailwind:

Tooltips

The following extends the example above with tooltips:
Previous <- Fullscreen Button
Next PIP Button ->