# fragment-player

> Play and seek through fragments of videos within a single player

Latest version **2.0.6** (published 2020-11-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install fragment-player
pnpm add fragment-player
yarn add fragment-player
bun add fragment-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 | 2.0.6 |
| Published | 2020-11-16 |
| First published | 2020-09-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 41.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | ryley-matos |
| Maintainers | ryley-matos |

## Links

- npm: https://www.npmjs.com/package/fragment-player
- Repository: https://github.com/ryley-matos/fragment-player
- npm.io page: https://npm.io/package/fragment-player

## Recent versions

- 2.0.6 (latest) — 2020-11-16
- 2.0.5 — 2020-11-16
- 2.0.4 — 2020-11-16
- 2.0.3 — 2020-11-16
- 2.0.2 — 2020-11-15
- 2.0.1 — 2020-11-15
- 2.0.0 — 2020-11-13
- 1.2.6 — 2020-11-10
- 1.2.5 — 2020-09-10
- 1.2.4 — 2020-09-09
- 1.2.3 — 2020-09-09
- 1.2.2 — 2020-09-09
- 1.2.1 — 2020-09-09
- 1.2.0 — 2020-09-09
- 1.1.1 — 2020-09-09
- … 16 more at https://npm.io/package/fragment-player/versions

## README

# fragment-player

> Play and seek through fragments of videos within a single player

[![NPM](https://img.shields.io/npm/v/fragment-player.svg)](https://www.npmjs.com/package/fragment-player) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save fragment-player
```

## Usage

```jsx
import React from 'react'
import FragmentPlayerProvider, {FragmentPlayerContext} from 'fragment-player'

const fragments = [
  {
    src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/SubaruOutbackOnStreetAndDirt.mp4',
    fragmentBegin: 0,
    fragmentEnd: 5,
  },
  {
    src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4',
    fragmentBegin: 1,
    fragmentEnd: 25,
  },
  {
    src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4',
    fragmentBegin: 1,
    fragmentEnd: 3,
  },
]

const App = () => {
  return (
    <FragmentPlayerProvider fragments={fragments}>
      <FragmentPlayerContext.Consumer>
        {({video, seekTo, currentTime, totalLength}) => {
          return (
            <div style={{width: '100%'}}>
              {video}
              <input style={{width: '100%'}} type="range" min={0} max={totalLength} value={currentTime} onChange={(e) => seekTo(parseInt(e.target.value))}/>
            </div>
          )
        }}
      </FragmentPlayerContext.Consumer>
    </FragmentPlayerProvider>
  )
```

## License

MIT © [ryley-matos](https://github.com/ryley-matos)

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