VideoPlayer — Loidolt Theme

import { VideoPlayer } from '@loidolt/theme-svelte';

Example

Every control is a native element — buttons, range inputs, a select — so keyboard and screen-reader support come from the platform. The seek bar speaks positions as words ("1 minute 5 seconds of 4 minutes").
Shortcuts work while focus is in the player: Space or K plays, the arrows seek and change volume, M mutes, F goes full screen, C toggles captions.
Provide tracks with captions for any video with speech (WCAG 1.2.2).
An .m3u8 source plays as HLS — natively in Safari, elsewhere through hls.js once you register it with setHlsLoader(). hls.js is an optional peer, so apps that never stream do not ship it.
controls="native" hands over to the browser's controls; autoplay implies muted, as browsers require.

Generated from the component source, so it cannot drift from the implementation.

VideoPlayer props
Prop	Type	Default	Notes
`label` required	`string`	`—`	Names the player for assistive tech.
`src` required	`string \| MediaSourceEntry[]`	`—`	A URL, or several sources for the browser to choose from. `.m3u8` plays as HLS.
`autoplay`	`boolean`	`false`	Browsers only autoplay muted media; `autoplay` implies `muted`.
`class`	`string`	`—`
`controls`	`'custom' \| 'native' \| 'none'`	`'custom'`	`custom` draws this library's controls; `native` uses the browser's; `none` hides both.
`fit`	`'contain' \| 'cover'`	`'contain'`
`hlsConfig`	`Record<string, unknown>`	`—`
`hlsLoader`	`HlsLoader`	`—`	hls.js loader for this player, in place of the one given to `setHlsLoader()`.
`labels`	`Partial<MediaPlayerLabels>`	`—`
`loop`	`boolean`	`false`
`mediaRef` bindable	`HTMLVideoElement \| null`	`null`	The `<video>` element.
`muted`	`boolean`	`false`
`onEnded`	`() => void`	`—`
`onTimeUpdate`	`(seconds: number) => void`	`—`
`overlay`	`Snippet`	`—`	Content layered over the video, e.g. a title card.
`poster`	`string`	`—`
`preload`	`'none' \| 'metadata' \| 'auto'`	`'metadata'`
`ratio`	`AspectRatioName \| number \| string`	`'video'`
`ref` bindable	`HTMLDivElement \| null`	`null`
`tracks`	`MediaTextTrack[]`	`[]`	Captions and subtitles. Provide captions for any video with speech (WCAG 1.2.2).

Plus the attributes of Omit<HTMLAttributes<HTMLDivElement>, 'children'>, forwarded to the root element.