TypeScript icon, indicating that this package has built-in type declarations

1.0.0-alpha.5 • Public • Published

Svelte Video Kit

This library is a powerful video playback tool that can be customized to perfectly suit modern, elegant, and even older applications.

💡 Requirements

The library Supports NodeJS version 18 or higher.

📲 Installation

yarn add svelte-video-kit
# OR
npm install svelte-video-kit

🌟 Getting Started

Simple usage looks like:

// Step 1: Import the parts of the module you want to use
  import VideoPlayer from 'svelte-video-player';

// Step 2: Create the attributes
  const poster = '';
  const source = [

// Step 3: Calls the component
  <VideoPlayer {poster} {source} />;

📋 Customizable attributes

Prop name Type Default value Description
width number 1920 Real width of video for calculating aspect ratio for responsive design
height number 1080 Real height of video for calculating aspect ratio for responsive design
poster string '' Absolute or relative URL of poster image
source string | string[] '' Absolute or relative URL (or array of those) of video source. Supported formats are webm, mp4 and ogg
controlsHeight number 55 Height of bottom control bar, rescaling included components
trackHeight number 6 Height of playbar and volume slider tracks
thumbSize number 15 Size of playbar and volume slider thumb
centerIconSize number 60 Size of center icon
playerBgColor string 'black' Color of player background
color string '#FF3E00' Main color of control components
focusColor string 'white' Color of focus outlines
barsBgColor string 'white' Background color of playbar and volume slider tracks
iconColor string 'white' Color of button icons
bufferedColor string '#FF9600' Color of buffered chunks
borderRadius number 8 Rounded corner radius of the player.
skipSeconds number 5 Skipping time in seconds
chunkBars boolean false Display overlay with buffered and played parts of video
loop boolean false Play video in loop
controlsOnPause boolean true Show control bar when video is paused
timeDisplay boolean false Display current time beside playbar

📦 Packages

This repo uses pnpm workspaces, which TLDR means if you want to run a commands in each project then you can either cd to that directory and run the command, or use pnpm -r [command].

For example pnpm -r test.


Just-debounce-it / Just-throttle

Part of a library of zero-dependency npm modules that do just do one thing. Guilt-free utilities for every occasion.


Simple wrapper for cross-browser usage of the JavaScript Fullscreen API, which lets you bring the page or any element into fullscreen. Smoothens out the browser implementation differences, so you don't have to. screenfull

🤝 Contributing

All contributions are welcome, ranging from people wanting to triage issues, others wanting to write documentation, to people wanting to contribute with code.

Please read and follow our contribution guidelines. Contributions not following these guidelines will be disregarded. The guidelines are in place to make all of our lives easier and make contribution a consistent process for everyone.

📜 What happened to the original svelte-video-player?

Read the team update (October 16th, 2023).

🏻 License

MIT license. Copyright (c) 2023 Ediberto BO
For more information, see the LICENSE file.

Package Sidebar


npm i svelte-video-kit

Weekly Downloads






Unpacked Size

146 kB

Total Files


Last publish


  • edibertooliveira