# videoPlayerSync

> Why JS: seeking in place, marking what plays, and a custom control bar all need the media element's API.

```ts
import { videoPlayerSync } from "@sdxc/ui/video";
```

Keeps a video player's links, marks, bar and video in step from a node inside its
`[data-slot="video-player"]` root. A plain click on a time link seeks and plays; a
modified click still opens the file itself.

## Signature

```ts
videoPlayerSync(): MixinDescriptor<HTMLElement>
```

Returns: A mixin descriptor for any element inside the player.

## Examples

```tsx
<span hidden mix={[videoPlayerSync()]} />
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/video` too.

### syncVideo

Brings a player's marks to `time`: the chapter link and transcript line playing then
carry `aria-current`, each scrubber segment fills to its played share, and a newly
current line scrolls into view inside the transcript alone.

#### Signature

```ts
syncVideo(root: HTMLElement, time: number): void
```

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `root` | `HTMLElement` | The player's `<figure>`. |
| `time` | `number` | The video's current time in seconds. |