# svelte-video-kit

> A powerful video playback tool that can be customized to perfectly fit modern, stylish, and even older apps.

Latest version **1.0.0-alpha.5** (published 2023-10-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-video-kit
pnpm add svelte-video-kit
yarn add svelte-video-kit
bun add svelte-video-kit
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-alpha.5 |
| Published | 2023-10-18 |
| First published | 2023-10-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 143.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Ediberto BO |
| Maintainers | edibertooliveira |
| Keywords | svelte, svelte4, svelte5, material-design, material, svelte-components, sveltejs |

## Links

- npm: https://www.npmjs.com/package/svelte-video-kit
- Repository: https://github.com/edibertooliveira/svelte-video-kit
- Issues: https://github.com/edibertooliveira/svelte-video-kit/issues
- npm.io page: https://npm.io/package/svelte-video-kit

## Dependencies (4)

- [screenfull](https://npm.io/package/screenfull.md) ^6.0.2
- [svelte2tsx](https://npm.io/package/svelte2tsx.md) ^0.6.21
- [just-throttle](https://npm.io/package/just-throttle.md) ^4.2.0
- [just-debounce-it](https://npm.io/package/just-debounce-it.md) ^3.2.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 1.0.0-alpha.5 (latest) — 2023-10-18
- 1.0.0-alfa.4 — 2023-10-17
- 1.0.0-alfa.3 — 2023-10-17
- 1.0.0-alfa.2 — 2023-10-17
- 1.0.0-alfa.1 — 2023-10-17
- 1.0.0-alfa.0 — 2023-10-17

## README

<div align="center">
  <img src="../../.github/svk_animated.svg" alt="svk" width="200" alt="SVK logo" /> 
</div>

# Svelte Video Kit

<div align="center">
  <a href="https://npmjs.org/package/svelte-video-kit">
    <img src="https://img.shields.io/npm/v/svelte-video-kit?style=flat-square" alt="version" />
  </a>
  <a href="https://npmjs.org/package/svelte-video-kit">
    <img src="https://img.shields.io/npm/l/svelte-video-kit?style=flat-square" alt="licence" />
  </a>
  <a href="https://npmjs.org/package/svelte-video-kit">
    <img src="https://img.shields.io/badge/dependencies-0-green?style=flat-square" alt="dependencies" />
  </a>
  <a href="https://npmjs.org/package/svelte-video-kit">
    <img src="https://img.shields.io/npm/types/typescript?style=flat-square" alt="typescript" />
  </a>
</div>

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

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

## 🌟 Getting Started

Simple usage looks like:

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

## 📦 Packages

This repo uses [`pnpm workspaces`](https://pnpm.io/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](https://github.com/angus-c/just)

[`Just-debounce-it`](https://www.npmjs.com/package/just-debounce-it)
/ [`Just-throttle`](https://www.npmjs.com/packages/just-throttle)

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

### [`screenfull`](https://www.npmjs.com/packages/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](https://github.com/sindresorhus/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](../../.github/CONTRIBUTING.md). 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?](../../.github/ANNOUNCEMENTS-2023-10-16.md)

Read the [team update](../../.github/ANNOUNCEMENTS-2023-10-16.md) (October 16th, 2023).

## 🏻 [License](./LICENSE)

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

---
_Source: https://npm.io/package/svelte-video-kit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._