VideoPlayer

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui remix

import "@sdxc/ui/theme.css";

Usage

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

Composition

The parts the component publishes, each a static property of the host.

• VideoPlayer
• VideoPlayer.ScreenThe 16:9 screen: a native <video controls> holding its sources and the chapters and captions tracks written from the timeline, over a VideoPlayer.Frame when given, under a VideoPlayer.Controls bar that takes over from the native controls.
• VideoPlayer.SourceOne file the video may play, in preference order, exactly as a <source> inside <video>; the first one also gives every time link its address.
• VideoPlayer.FrameA drawn still under the video: it shows before playback and through any transparent part of the picture while it plays.
• VideoPlayer.ScrubberThe chapters as one bar of segments as long as each chapter, filled to the current moment, so the video's shape shows before it plays.
• VideoPlayer.CaptionThe video's title line: the title at the start, small print at the end, wrapping under each other on a narrow screen.
• VideoPlayer.SideThe second column: chapters, transcript and anything the page adds, such as a card for the next video, stacked in order.
• VideoPlayer.ChaptersThe chapters as links to their moments, each with its still when given; the chapter playing carries aria-current.
• VideoPlayer.TranscriptThe transcript in a scroll region, each line behind a link to its moment; the line playing carries aria-current and the island keeps it in view.
• VideoPlayer.ControlsThe custom control bar along the bottom of the screen, rendered hidden until the island swaps it for the native controls.
• VideoPlayer.ProgressThe seek slider: a native range over the video's length, so arrow keys, Home and End seek and assistive technology reads the time.
• VideoPlayer.PlayPlays and pauses; its accessible name says what a press does next.
• VideoPlayer.TimeThe time played and the video's length, 1:12 / 11:43.
• VideoPlayer.CaptionsToggleTurns captions on and off: on shows the track last chosen in the captions menu, the first one at the start.
• VideoPlayer.SettingsThe settings gear and its menu: a Popover API surface the gear opens through commandfor, holding toggles and submenus in order.
• VideoPlayer.SettingsToggleA page-defined switch row: a real checkbox the page reads by name and follows with an ordinary change listener, such as ambient mode or a voice boost.
• VideoPlayer.SettingsMenuA page-defined submenu: a row naming the current choice that opens a panel of VideoPlayer.SettingsOption radios under one name, such as a sleep timer.
• VideoPlayer.SettingsOptionOne choice of a VideoPlayer.SettingsMenu: a real radio under the menu's name, marked with a check when chosen.
• VideoPlayer.CaptionsMenuThe captions submenu: Off, then every captions and subtitles track the video holds.
• VideoPlayer.SpeedMenuThe playback speed submenu; a choice sets the video's playbackRate and survives a quality change.
• VideoPlayer.QualityMenuThe quality submenu: one row per labelled VideoPlayer.Source, by its label and badge; an unlabelled source is a format fallback and stays off the menu.
• VideoPlayer.TheaterTheater mode: sets data-theater on the player, which drops the side column under the screen so the video takes the full width.
• VideoPlayer.FullscreenFull screen for the screen with its bar, so the controls stay.

Examples

<VideoPlayer duration={703} chapters={chapters} transcript={lines} tone="theater">
	<VideoPlayer.Screen label="Centering 3 kg" captionsLabel="English" chaptersLabel="Chapters">
		<VideoPlayer.Source src="/07.mp4" type="video/mp4" label="1080p" badge="HD" />
		<VideoPlayer.Controls label="Video controls"><VideoPlayer.Progress label="Seek" /><VideoPlayer.Play label="Play" pauseLabel="Pause" /><VideoPlayer.Time /></VideoPlayer.Controls>
	</VideoPlayer.Screen>
	<VideoPlayer.Side><VideoPlayer.Transcript label="Transcript" /></VideoPlayer.Side>
</VideoPlayer>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Types