# playable

> Video player based on HTML5Video

Latest version **2.15.4** (published 2024-12-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install playable
pnpm add playable
yarn add playable
bun add playable
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; no esm support; large bundle.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 2.15.4 |
| Published | 2024-12-17 |
| First published | 2018-02-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 21.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 98 |
| Author | Oleksii Makodzeba |
| Maintainers | wix-ci, wix-ambassador, shahata, netanelgilad, wix-ci-publisher, wix-bi-publisher, yurynix, itai.benda, arielh, falconci, youngshinobi |
| Keywords | adaptive, dash, hls, html5, media, mpeg, mse, player, video |

## Links

- npm: https://www.npmjs.com/package/playable
- Repository: https://github.com/wix/playable
- Homepage: https://wix.github.io/playable/
- Issues: https://github.com/wix/playable/issues
- npm.io page: https://npm.io/package/playable

## Dependencies (6)

- [tslib](https://npm.io/package/tslib.md) ^2.1.0
- [dashjs](https://npm.io/package/dashjs.md) ^3.2.0
- [hls.js](https://npm.io/package/hls.js.md) 1.3.5
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [eventemitter3](https://npm.io/package/eventemitter3.md) ^4.0.7
- [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.5.0

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 2.15.4 (latest) — 2024-12-17
- 2.9.3-alpha.0 (next) — 2019-07-26
- 2.15.3 — 2024-01-18
- 2.15.2 — 2023-12-07
- 2.15.1 — 2023-12-05
- 2.15.0 — 2023-12-05
- 2.14.1 — 2023-02-27
- 2.14.0 — 2023-02-20
- 2.13.0 — 2021-12-07
- 2.12.0 — 2021-08-05
- 2.11.1 — 2020-01-15
- 2.11.0 — 2019-12-18
- 2.10.5 — 2019-12-18
- 2.10.4 — 2019-12-12
- 2.10.3 — 2019-11-28
- … 74 more at https://npm.io/package/playable/versions

## README

<p align="center">
  <a href="https://wix-incubator.github.io/playable/" target="_blank" rel="noopener noreferrer">
    <img width="100" height="108" src="https://github.com/wix-incubator/playable/raw/master/docs/logo.png?raw=true" alt="Playable logo">
  </a>
</p>

<h1 align="center">
  <a href="https://wix-incubator.github.io/playable/" target="_blank" rel="noopener noreferrer">
    Playable
  </a>
</h1>

<p align="center">
  <a href="https://travis-ci.org/wix/playable" rel="nofollow">
    <img src="https://travis-ci.org/wix/playable.svg?branch=master" alt="Build Status">
  </a>
  <a href="https://npmjs.org/package/playable" rel="nofollow">
    <img src="https://img.shields.io/npm/v/playable.svg?style=flat" alt="npm">
  </a>
</p>

**IMPORTANT!** Migration guide from 1.0.0 to 2.0.0 you can find [here](/docs/2.0.0-migration.md).

You can play with demo here: [https://jsfiddle.net/bodia/to0r65f4/](https://jsfiddle.net/bodia/to0r65f4/)

## Get it

```
$ npm install playable --save
```

## Use it

In modern way

```javascript
import Playable from 'playable';
```

Or in old school way, add a `<script>` element for video-player

```html
<script src="path/to/playable/dist/statics/playable.bundle.js"></script>
```

And write awesome code:

```javascript
document.addEventListener('DOMContentLoaded', function() {
  const config = {
    width: 700,
    height: 394,
    src: 'http://my-url/video.mp4',
    preload: 'metadata',
  };
  const player = Playable.create(config);

  player.attachToElement(document.getElementById('content'));
});
```

You can find documentation here: [https://wix-incubator.github.io/playable/](https://wix-incubator.github.io/playable/)

## Big thanks!

Cross-browser Testing Platform and Open Source <3 Provided by [Sauce Labs][sauselabs-homepage]

[sauselabs-homepage]: https://saucelabs.com
[documentation]: https://wix-incubator.github.io/playable/

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