# streamio-player

> A video player with dash and hls support, extending plyr.io video player.

Latest version **1.0.1** (published 2022-08-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install streamio-player
pnpm add streamio-player
yarn add streamio-player
bun add streamio-player
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-08-16 |
| First published | 2022-08-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 1.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | LyonKvalid |
| Maintainers | streamio |
| Keywords | plyr, dash, hls, html5, video, player, stream |

## Links

- npm: https://www.npmjs.com/package/streamio-player
- Repository: https://github.com/lyonkvalid/streamio-player
- Homepage: https://github.com/lyonkvalid/streamio-player#readme
- Issues: https://github.com/lyonkvalid/streamio-player/issues
- npm.io page: https://npm.io/package/streamio-player

## Dependencies (3)

- [plyr](https://npm.io/package/plyr.md) ^3.7.2
- [dashjs](https://npm.io/package/dashjs.md) ^4.4.1
- [hls.js](https://npm.io/package/hls.js.md) ^1.2.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

- 1.0.1 (latest) — 2022-08-16
- 1.0.0 — 2022-08-16

## README

Streamio-player is a video player with dash and hls support, extended from plyr.io
[Checkout the demo] ()

# Features
- 📺 supports adaptive streaming formats (HLS ans Dash)
- ✂️ Double tab to seek with animation 

# Quick setup

## HTML

Streamio-Player extends upon plyr.io [ Customable Video Player ] (https://plyr.io)

## HTML5 video
```html
<video id="player" playsinline controls data-poster="/path/to/poster.jpg">
  <!-- Captions are optional -->
  <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default />
</video>
```

**Note**: Source shouldn't be rendered via markup but with js


## JavaScript

You can use Plyr as an module as follows:
```javascript
import { Player } from "streamio-player";

// check plyr.io documentations for available options
const player = new Player("#player", options=null, callback=null);

player.source = [
    {
        type: String, // mpd
        url: String
    },
    {
        type: String, // mp4
        variants: [
            {
                size: Number, // 720
                url: String
            }
        ]
    }
];
```

Alternatively you can include the `plyr.js` script before the closing `</body>` tag and then in your JS create a new instance of Plyr as below.

```html
<script src="path/to/streamio-player.js"></script>
<script>
    const player = new Player("#player", options=null, callback=null);
</script>
```

## Getters and Setters

Example setters:

```javascript
const plyr = player.plyr; // gets plyrio instance can be null when not finished initializing make sure yoo access this in callback only 
plyr.rewind(10000);
```

| Option               | Type                       | Default       |                                                                                                                                                                                                                                                                                                                                                                                       |
| -------------------- | -------------------------- | --------------|
| `options`            | Object                     | `null`        |
| `callback`           | Function                   | `false`       |
| `sources`            | Array                      | `[]`          |
| `plyr`               | Object                     | `null`        |

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