https://github.com/meigo/svelte-video-player
Basic video player component for svelte
https://github.com/meigo/svelte-video-player
javascript svelte typescript video videoplayer
Last synced: 29 days ago
JSON representation
Basic video player component for svelte
- Host: GitHub
- URL: https://github.com/meigo/svelte-video-player
- Owner: meigo
- License: mit
- Created: 2021-01-11T09:32:16.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2026-04-03T16:10:39.000Z (3 months ago)
- Last Synced: 2026-04-18T17:13:49.638Z (about 2 months ago)
- Topics: javascript, svelte, typescript, video, videoplayer
- Language: Svelte
- Homepage:
- Size: 971 KB
- Stars: 138
- Watchers: 3
- Forks: 22
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```bash
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](https://web.dev/cls/). The player's actual size is determined by its parent element.
```svelte
import VideoPlayer from 'svelte-video-player';
```
### Multiple sources
Pass an array to provide fallback formats:
```svelte
```
### HLS streaming
HLS streams are auto-detected from `.m3u8` URLs. [hls.js](https://github.com/video-dev/hls.js) is lazy-loaded only when needed.
```svelte
```
### DASH streaming
DASH streams are auto-detected from `.mpd` URLs. [dashjs](https://github.com/Dash-Industry-Forum/dash.js) is lazy-loaded only when needed.
```svelte
```
### 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.
```svelte
```
### Chapters
```svelte
```
### Media Session
Integrate with the browser's Media Session API for OS-level media controls:
```svelte
```
## 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](LICENSE)