<media-seek-forward-button>

The <media-seek-forward-button> component is used to allow seeking forward a configurable amount of time, defaulting to 30 seconds.

Default usage

<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  ></video>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-time-display></media-time-display>
    <media-seek-forward-button></media-seek-forward-button>
  </media-control-bar>
</media-controller>

Open Sandbox

Customize seek offset

The seeking amount can be configured with the seekoffset attribute.

<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  ></video>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-time-display></media-time-display>
    <media-seek-forward-button seekoffset="10"></media-seek-forward-button>
  </media-control-bar>
</media-controller>

Open Sandbox

Customize icons

You can modify the contents of the <media-seek-forward-button> using the icon slot. This is useful if you’d like to use your own custom icon instead of the default one provided by media-chrome.

Here’s an example of how you can replace the default icon with the word “Forward”:

<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  ></video>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-time-display></media-time-display>
    <media-seek-forward-button>
      <span slot="icon">Forward</span>
    </media-seek-forward-button>
  </media-control-bar>
</media-controller>

Open Sandbox

Reference

Slots

Name	Description
`icon`	The element shown for the seek forward button’s display.

Attributes

Name	Type	Description
`seekoffset`	`string`	Adjusts how much time (in seconds) the playhead should seek forward.
`disabled`	`boolean`	The Boolean disabled attribute makes the element not mutable or focusable.
`mediacontroller`	`string`	The element `id` of the media controller to connect to (if not nested within).

Media UI Attributes

The media UI attributes will be set automatically by the controller if they are connected via nesting or the mediacontroller attribute. Only set these attributes manually if you know what you're doing.

Name	Type	Description
`mediacurrenttime`	`string`	Set to the current media time.

CSS Variables

Name	Default	Description
`--media-seek-forward-button-display`	`inline-flex`	`display` property of button.
`--media-primary-color`	`rgb(238 238 238)`	Default color of text and icon.
`--media-secondary-color`	`rgb(20 20 30 / .7)`	Default color of button background.
`--media-text-color`	`var(--media-primary-color, rgb(238 238 238))`	`color` of button text.
`--media-icon-color`	`var(--media-primary-color, rgb(238 238 238))`	`fill` color of button icon.
`--media-control-display`		`display` property of control.
`--media-control-background`	`var(--media-secondary-color, rgb(20 20 30 / .7))`	`background` of control.
`--media-control-hover-background`	`rgba(50 50 70 / .7)`	`background` of control hover state.
`--media-control-padding`	`10px`	`padding` of control.
`--media-control-height`	`24px`	`line-height` of control.
`--media-font`	`var(--media-font-weight, bold) var(--media-font-size, 14px) / var(--media-text-content-height, var(--media-control-height, 24px)) var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif)`	`font` shorthand property.
`--media-font-weight`	`bold`	`font-weight` property.
`--media-font-family`	`helvetica neue, segoe ui, roboto, arial, sans-serif`	`font-family` property.
`--media-font-size`	`14px`	`font-size` property.
`--media-text-content-height`	`var(--media-control-height, 24px)`	`line-height` of button text.
`--media-button-icon-width`		`width` of button icon.
`--media-button-icon-height`	`var(--media-control-height, 24px)`	`height` of button icon.
`--media-button-icon-transform`		`transform` of button icon.
`--media-button-icon-transition`		`transition` of button icon.