Buttons

Seek Button

This component is used to seek playback forwards or backwards.

API Reference

HTMLAttributes<HTMLButtonElement>

Ref<HTMLButtonElement>

A button for seeking the current media playback forwards or backwards by a specified amount.

import { SeekButton, type SeekButtonProps } from "@vidstack/react"; <SeekButton seconds={-10}>
  <SeekBackwardIcon />
</SeekButton>

<SeekButton seconds={10}>
  <SeekForwardIcon />
</SeekButton> 

Props

Prop	Type	Default
`asChild`	`boolean`	`false`
`children`	`ReactNode`	`null`
`disabled`	`boolean`	`false`
`seconds`	`number`	`30`

Callbacks

Callback	Type
`onMediaSeekRequest`	`function`

Data Attributes

/* Example. */
.component[data-foo] {}

Name	Description
`data-seeking`	Whether a seeking operation is in progress.
`data-supported`	Whether seeking operations are permitted.
`data-focus`	Whether button is being keyboard focused.
`data-hocus`	Whether button is being keyboard focused or hovered over.

Seek Button

API Reference

Props

`asChild`

`children`

`disabled`

`seconds`

Callbacks

`onMediaSeekRequest`

Data Attributes

`data-seeking`

`data-supported`

`data-focus`

`data-hocus`