SkipButton

A button that skips back or forward by a fixed number of seconds.

import { SkipButton } from 'react-media-kit'

import { SkipButton } from 'react-media-kit'

<SkipButton.Root direction="back" skipInterval={10}>−10s</SkipButton.Root>
<SkipButton.Root direction="forward" skipInterval={10}>+10s</SkipButton.Root>

Render it inside Player.Root, next to a Media.Video or Media.Audio.

Anatomy

<SkipButton.Root direction="back" />

API reference

It accepts the attributes of the <button> it renders, plus a ref, and sets the media state attributes. Passing aria-label replaces a default label.

SkipButton.Root

renders <button>

Skips back or forward by skipInterval seconds. Its aria-label is always in English, such as "Skip forward 5 seconds".

Prop	Type	Default	Description
direction	"back" \| "forward"	required	Which way to skip.
skipInterval	number	5	Seconds to skip per click. At least 1. Fractions are rounded down, and anything else throws a `ReactMediaKitError`.

Data attribute	Description
data-direction	Set to the `direction` prop: `back` or `forward`.

Your onClick runs before the built-in one; call event.preventDefault() in it to skip the built-in behavior.

Media state attributes

Five of these describe loading, and exactly one of them is set at a time. The other three mark features the browser lacks. Use them to hide controls that can’t work, or to style the player while it loads.

Data attribute	Description
data-media-pending	Loading hasn’t started. This is the initial state.
data-media-loading	The media has started loading.
data-media-metadata-loaded	The duration and dimensions are known, but there isn’t enough data to play yet.
data-media-playable	The media can play. It stays set if playback later stalls to buffer.
data-media-error	The media element reported an error, such as a network or decoding failure. A blocked `play()` call doesn’t set it; use `onError` for that.
data-fullscreen-unsupported	The browser can’t go fullscreen, or support hasn’t been detected yet.
data-pip-unsupported	Picture-in-picture isn’t available, such as for audio, or support hasn’t been detected yet.
data-volume-change-unsupported	The browser doesn’t let scripts set the volume, such as on iOS, or support hasn’t been detected yet.