Media

Video

Plays a video with controls that match the rest of your app. Two variants: Video for a file, and ShakaVideo for adaptive streams (HLS and DASH).

Installation

npx sinaui add video shaka-video

For a file, copy src/lib/ui/Video.svelte with the dropdown folder, Icon.svelte, Spinner.svelte and tokens.css. No dependencies.

For streams, also copy ShakaVideo.svelte and install Shaka Player:

pnpm add shaka-player

Examples

A file, with captions

Press the captions button or C to show them. Cross-origin captions need crossorigin on the video.

0:00 / 0:00

<script lang="ts">
	import Video from '#lib/ui/Video.svelte';
</script>

<Video
	title="Friday"
	src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4"
	crossorigin="anonymous"
>
	<track
		kind="captions"
		srclang="en"
		label="English"
		src="https://interactive-examples.mdn.mozilla.net/media/examples/friday.vtt"
	/>
</Video>

A stream

Picks the quality to suit the connection; choose one yourself from the quality menu.

0:00 / 0:00

<script lang="ts">
	import ShakaVideo from '#lib/ui/ShakaVideo.svelte';
</script>

<ShakaVideo
	title="Angel One"
	manifest="https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd"
/>

Props

Prop	Type	Default
`src`	`string` (Video)
`manifest`	`string`, a `.mpd` or `.m3u8` (ShakaVideo, required)
`title`	`string`: names the player and shows in the system media controls
`artist`	`string`
`artwork`	`string`: image for the lock screen	`poster`
`poster`	`string`
`aspectRatio`	`string`	`'16 / 9'`
`element`	`HTMLVideoElement`, bindable: for libraries that attach to the video
`error`	`string`: a message to show over the player
`children`	`<source>` and `<track>` elements
`controls`	`Snippet`: your own buttons, placed before full screen

Any other attribute (loop, crossorigin, …) goes on the video.

Keyboard

Key	Does
`Space` / `K`	Play or pause
`←` / `→`	Back or forward 5 seconds
`J` / `L`	Back or forward 10 seconds
`Home` / `End`	Start or end (on the seek bar)
`M`	Mute
`C`	Captions on or off
`F`	Full screen

Accessibility

Every control is a labeled button or slider; the seek bar reads “1:15 of 3:20”.
Controls fade while it plays and come back on any mouse move, touch or key press.
Headphone buttons, the lock screen and the system media panel control it too.
Errors are announced in plain words over the player.
With reduced motion, controls fade without sliding.