Svelte Video Player

A video player component for Svelte 5 with HLS/DASH streaming, subtitles, picture-in-picture, playback rate control, quality selection, and Media Session API support.

Controls are fully keyboard-accessible. Starting a player pauses any previously playing instance. Fullscreen is disabled on iPhone but works on other mobile and desktop browsers.

Demo

https://svelte-video-player.netlify.app/

Installation

npm install svelte-video-player

Requires Svelte 5.

Usage

Provide width and height props matching the video's real dimensions to calculate the correct aspect ratio and prevent CLS. The player's actual size is determined by its parent element.

<script>
  import VideoPlayer from 'svelte-video-player';
</script>

<VideoPlayer
  poster="https://example.com/poster.jpg"
  source="https://example.com/video.mp4"
/>

Multiple sources

Pass an array to provide fallback formats:

<VideoPlayer
  source={['video.mp4', 'video.webm']}
/>

HLS streaming

HLS streams are auto-detected from .m3u8 URLs. hls.js is lazy-loaded only when needed.

<VideoPlayer source="https://example.com/stream.m3u8" />

DASH streaming

DASH streams are auto-detected from .mpd URLs. dashjs is lazy-loaded only when needed.

<VideoPlayer source="https://example.com/stream.mpd" />

Subtitles / Captions

A CC toggle button appears automatically when tracks are provided. Track selection is available in the settings menu. The crossorigin attribute is set automatically when tracks are present.

<VideoPlayer
  source="video.mp4"
  tracks={[
    { src: '/subs/en.vtt', srclang: 'en', label: 'English', default: true },
    { src: '/subs/es.vtt', srclang: 'es', label: 'Spanish' }
  ]}
/>

Chapters

<VideoPlayer
  source="video.mp4"
  chapters={[
    { time: 0, label: 'Intro' },
    { time: 60, label: 'Chapter 1' },
    { time: 180, label: 'Chapter 2' }
  ]}
/>

Media Session

Integrate with the browser's Media Session API for OS-level media controls:

<VideoPlayer
  source="video.mp4"
  mediaSession={{
    title: 'My Video',
    artist: 'Author',
    album: 'Collection',
    artwork: [{ src: '/art.jpg', sizes: '512x512', type: 'image/jpeg' }]
  }}
/>

Props

Prop	Type	Default	Description
width	number | string	1920	Real video width for aspect ratio calculation
height	number | string	1080	Real video height for aspect ratio calculation
poster	string	''	Poster image URL
source	string | string[]	''	Video source URL(s) — supports mp4, webm, ogg, m3u8, mpd
loop	boolean	false	Loop playback
autoplay	boolean	false	Autoplay on load
playsinline	boolean	true	Play inline on mobile
preload	string	'metadata'	Preload behavior (none, metadata, auto)
crossorigin	string	undefined	CORS mode (auto-set to anonymous when tracks are provided)
skipSeconds	number | string	5	Seconds to skip with arrow keys
controlsOnPause	boolean	true	Show controls when paused
timeDisplay	boolean	true	Show current time / duration
remainingTime	boolean	false	Show remaining time instead of current time
playbackRateControl	boolean	true	Enable playback rate control in settings menu
tracks	TextTrackConfig[]	[]	Subtitle/caption tracks
chapters	Chapter[]	[]	Chapter markers on the progress bar
mediaSession	MediaSessionConfig	undefined	Media Session API metadata
currentTime	number	0	Bindable. Use bind:currentTime to read playback position or seek by writing to it.

Styling props

Prop	Type	Default	Description
color	string	'#FF3E00'	Main color of controls
playerBgColor	string	'black'	Player background color
iconColor	string	'white'	Button icon color
focusColor	string	'white'	Focus outline color
barsBgColor	string	'white'	Track background color
borderColor	string	'none'	Player border color (set to a color value to show border)
controlsHeight	string	'55px'	Height of bottom control bar
trackHeight	string	'4px'	Height of playbar and volume tracks
thumbSize	string	'15px'	Size of slider thumbs
centerIconSize	string	'60px'	Size of center play icon
borderRadius	string	'8px'	Player corner radius
buttonBorderRadius	string	'50%'	Button corner radius

Keyboard shortcuts

Key	Action
Space	Play / Pause
Left / Right arrow	Skip backward / forward
Tab	Navigate controls
Enter / Space	Activate focused control
Escape	Close settings menu
< / >	Decrease / Increase playback rate

SSR

The component renders a server-side placeholder matching the video's aspect ratio. The full player hydrates on the client.

License

MIT