mediaSync
Why JS: seeking a media element in place and marking what plays need its API.
import { mediaSync } from "@sdxc/ui/mixins";View code
// VideoPlayer's island runs mediaSync's seeking and marks on its chapters and transcript.
<VideoPlayer duration={703} chapters={chapters} transcript={transcript}>
<VideoPlayer.Screen label="Centering 3 kg" captionsLabel="English" chaptersLabel="Chapters">
<VideoPlayer.Source src="/lesson-2160.webm" type="video/webm" label="2160p" badge="4K" />
<VideoPlayer.Source src="/lesson-1080.webm" type="video/webm" label="1080p" badge="HD" />
<VideoPlayer.Source src="/lesson.mp4" type="video/mp4" />
<VideoPlayer.Controls label="Video controls">
<VideoPlayer.Progress label="Seek" />
<VideoPlayer.Play label="Play" pauseLabel="Pause" />
<VideoPlayer.Time />
<VideoPlayer.CaptionsToggle label="Subtitles/closed captions" />
<VideoPlayer.Settings label="Settings">
<VideoPlayer.SettingsToggle name="ambient" label="Ambient mode" checked />
<VideoPlayer.CaptionsMenu label="Subtitles/CC" offLabel="Off" backLabel="Back" />
<VideoPlayer.SettingsMenu name="sleep" label="Sleep timer" backLabel="Back">
<VideoPlayer.SettingsOption value="off" checked>Off</VideoPlayer.SettingsOption>
<VideoPlayer.SettingsOption value="15">15 minutes</VideoPlayer.SettingsOption>
<VideoPlayer.SettingsOption value="end">End of video</VideoPlayer.SettingsOption>
</VideoPlayer.SettingsMenu>
<VideoPlayer.SpeedMenu label="Playback speed" normalLabel="Normal" backLabel="Back" />
<VideoPlayer.QualityMenu label="Quality" backLabel="Back" />
</VideoPlayer.Settings>
<VideoPlayer.Theater label="Theater mode" />
<VideoPlayer.Fullscreen label="Full screen" />
</VideoPlayer.Controls>
</VideoPlayer.Screen>
<VideoPlayer.Scrubber />
<VideoPlayer.Caption meta="Lesson 7 · 11:43">Centering 3 kg</VideoPlayer.Caption>
<VideoPlayer.Side>
<VideoPlayer.Chapters label="Chapters" />
<VideoPlayer.Transcript label="Transcript" />
</VideoPlayer.Side>
</VideoPlayer>Usage
Makes a player's a[data-start] time links seek and play its first <audio> or <video>,
and marks the playing item of each marks list, as installMediaSync does. The player
is the host's closest root match; the host is usually a hidden marker in the player's island.
Signature
mediaSync(options: MediaSync.MixinOptions): MixinDescriptor<HTMLElement>Returns a mixin descriptor for an element inside the player.
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
options | MediaSync.MixinOptions | Yes | The player's root selector and the lists to mark. |
Examples
<span hidden mix={[mediaSync({ root: '[data-slot="episode"]', marks: ["[data-cue]"] })]} />Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/mixins too.
markPlaying
Sets aria-current="true" on the last item of a playing-order list whose start is at or
before time, and removes it from the rest, writing only what changes.
markPlaying(items: Iterable<HTMLElement>, time: number): HTMLElement | undefined| Parameter | Type | Required | Description |
|---|---|---|---|
items | Iterable<HTMLElement> | Yes | The list's items in playing order, each with data-start or data-cue. |
time | number | Yes | The media's current time in seconds. |
installMediaSync
Keeps a player's time links and marks in step with its media until signal aborts: a
plain click on an a[data-start] seeks and plays, a modified click still opens the file,
and every seek and time update marks the item playing in each list.
installMediaSync(root: HTMLElement, media: HTMLMediaElement, signal: AbortSignal, options: MediaSync.Options): void| Parameter | Type | Required | Description |
|---|---|---|---|
root | HTMLElement | Yes | The player's root, which holds the links and the lists. |
media | HTMLMediaElement | Yes | The <audio> or <video> the links seek. |
signal | AbortSignal | Yes | Ends the listeners when it aborts. |
options | MediaSync.Options | Yes | The lists to mark, and what to run after each update. |
installMediaSync(root, audio, signal, { marks: ['[data-slot="chapters"] a'] });MediaSync.Options
What one player's sync marks and reports.
| Member | Type | Required | Description |
|---|---|---|---|
marks | readonly string[] | Yes | Selectors, each matching one playing-order list under the player whose items carry their start in data-start or data-cue; the item playing carries aria-current="true". |
onTime | (time: number, changed: HTMLElement[]) => void | No | Runs after every seek and time update, with the items that newly became current. |
MediaSync.MixinOptions
Configuration accepted by mediaSync.
| Member | Type | Required | Description |
|---|---|---|---|
root | string | Yes | Selector of the player's root, the closest ancestor of the host that matches. |