Can’t find it? Contact us

On this page

videoPlayerSync

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

tsx

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

View code

tsx

// VideoPlayer's island carries videoPlayerSync(), which runs the bar, the menu and the time links.
<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

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

typescript

videoPlayerSync(): MixinDescriptor<HTMLElement>

Returns a mixin descriptor for any element inside the player.

Examples

tsx

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

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

Function

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.

typescript

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

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

MCPFeeds for agentsYour assistant reads and searches your queue.agents →