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
<script>
  import VideoPlayer from 'svelte-video-player';
  ...
</script>

// Step 2: Create the attributes
<script>
  ...
  const poster = 'https://www.server.com/poster.jpg';
  const source = [
    'https://www.server.com/video.webm',
    'https://www.server.com/video.mp4',
    'https://www.server.com/video.ogv',
  ];
  ...
</script>

// 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

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.

screenfull

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.