# react-videojs-wrapper

> React wrapper for VideoJS

Latest version **1.1.2** (published 2019-05-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-videojs-wrapper
pnpm add react-videojs-wrapper
yarn add react-videojs-wrapper
bun add react-videojs-wrapper
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2019-05-03 |
| First published | 2019-05-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 864.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Steven Phan |
| Maintainers | ptviet |
| Keywords | react-videojs-wrapper, react, videojs |

## Links

- npm: https://www.npmjs.com/package/react-videojs-wrapper
- Repository: https://github.com/steven-ph/react-videojs-wrapper
- Homepage: https://github.com/steven-ph/react-videojs-wrapper#readme
- Issues: https://github.com/steven-ph/react-videojs-wrapper/issues
- npm.io page: https://npm.io/package/react-videojs-wrapper

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^16.6.3
- [webpack](https://npm.io/package/webpack.md) ^4.26.1
- [video.js](https://npm.io/package/video.js.md) ^7.5.4
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2
- [videojs-seek-buttons](https://npm.io/package/videojs-seek-buttons.md) ^1.5.0
- [silvermine-videojs-quality-selector](https://npm.io/package/silvermine-videojs-quality-selector.md) ^1.1.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.2 (latest) — 2019-05-03
- 1.1.1 — 2019-05-03
- 1.1.0 — 2019-05-03
- 1.0.9 — 2019-05-03
- 1.0.8 — 2019-05-03
- 1.0.7 — 2019-05-03
- 1.0.6 — 2019-05-02
- 1.0.5 — 2019-05-01
- 1.0.4 — 2019-05-01
- 1.0.3 — 2019-05-01
- 1.0.2 — 2019-05-01
- 1.0.1 — 2019-05-01
- 1.0.0 — 2019-05-01
- 0.0.3 — 2019-05-01
- 0.0.2 — 2019-05-01
- … 1 more at https://npm.io/package/react-videojs-wrapper/versions

## README

# react-videojs-wrapper

React wrapper for VideoJS

## Install

```
npm install --save react-videojs-wrapper
```

## Usage

```javascript
import React, { Component } from 'react';
import VideoPlayer from 'react-videojs-wrapper';

class VideoApp extends Component {
  player = {};
  state = {
    video: {
      src: 'http://www.example.com/path/to/video.mp4',
      poster: 'http://www.example.com/path/to/video_poster.jpg'
    }
  };

  onPlayerReady(player) {
    console.log('Player is ready: ', player);
    this.player = player;
  }

  onVideoPlay(duration) {
    console.log('Video played at: ', duration);
  }

  onVideoPause(duration) {
    console.log('Video paused at: ', duration);
  }

  onVideoTimeUpdate(duration) {
    console.log('Time updated: ', duration);
  }

  onVideoSeeking(duration) {
    console.log('Video seeking: ', duration);
  }

  onVideoSeeked(from, to) {
    console.log(`Video seeked from ${from} to ${to}`);
  }

  onVideoEnd() {
    console.log('Video ended');
  }

  render() {
    return (
      <div>
        <VideoPlayer
          controls={true}
          src={this.state.video.src}
          poster={this.state.video.poster}
          width='720'
          height='420'
          onReady={this.onPlayerReady.bind(this)}
          onPlay={this.onVideoPlay.bind(this)}
          onPause={this.onVideoPause.bind(this)}
          onTimeUpdate={this.onVideoTimeUpdate.bind(this)}
          onSeeking={this.onVideoSeeking.bind(this)}
          onSeeked={this.onVideoSeeked.bind(this)}
          onEnd={this.onVideoEnd.bind(this)}
        />
      </div>
    );
  }
}
export default VideoApp;
```

### Providing video sources

Sources can be provided via the `src` function on the instance of a `video.js` player.

#### Using `player.src()`

```js
player.src([
  {
    src: 'https://example.com/video_720.mp4',
    type: 'video/mp4',
    label: '720P'
  },
  {
    src: 'https://example.com/video_480.mp4',
    type: 'video/mp4',
    label: '480P',
    selected: true
  },
  {
    src: 'https://example.com/video_360.mp4',
    type: 'video/mp4',
    label: '360P'
  }
]);
```

### VideoJS APIs support:

> onReady will return <code>videojs</code> instance. Which means you can use all the APIs provided by VideoJS.<br/>[List of VideoJS APIs](https://docs.videojs.com/docs/api/player.html)

### VideoJS plugins support:

> Since most of the VideoJS plugins needs <code>videojs</code> instance to get initialized, it is very easy to integrate any of the available plugins by making use of <code>videojs</code> instance returnd by onReady event.<br/>[List of VideoJS plugins](https://videojs.com/plugins/)

### Available Props:

<table>
  <thead>
    <tr>
      <th>Prop Name</th>
      <th>Prop Type</th>
      <th>Default Value</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>src</td>
      <td><code>string</code></td>
      <td><code>""</code></td>
      <td>Video file path</td>
    </tr>
    <tr>
      <td>poster</td>
      <td><code>string</code></td>
      <td><code>""</code></td>
      <td>Video poster file path</td>
    </tr>
    <tr>
      <td>width</td>
      <td><code>string | number</code></td>
      <td><code>auto</code></td>
      <td>Video player width</td>
    </tr>
    <tr>
      <td>height</td>
      <td><code>string | number</code></td>
      <td><code>auto</code></td>
      <td>Video player height</td>
    </tr>
    <tr>
      <td>controls</td>
      <td><code>boolean</code></td>
      <td><code>true</code></td>
      <td>Video player control bar toggle</td>
    </tr>
    <tr>
      <td>autoplay</td>
      <td><code>boolean</code></td>
      <td><code>false</code></td>
      <td>Video will start playing automatically if <code>true</code></td>
    </tr>
    <tr>
      <td>preload</td>
      <td><code>string</code></td>
      <td><code>auto</code></td>
      <td>video tag preload attribute</td>
    </tr>
    <tr>
      <td>playbackRates</td>
      <td><code>array</code></td>
      <td><code>[0.5, 1, 1.5, 2]</code></td>
      <td>Video speed control</td>
    </tr>
    <tr>
      <td>hideControls</td>
      <td><code>array</code></td>
      <td><code>[]</code></td>
      <td>List of controls to hide. <code>['play','volume','seekbar','timer','playbackrates','fullscreen']</code></td>
    </tr>
    <tr>
      <td>bigPlayButton</td>
      <td><code>boolean</code></td>
      <td><code>true</code></td>
      <td>Big play button visibility toggle</td>
    </tr>
    <tr>
      <td>bigPlayButtonCentered</td>
      <td><code>boolean</code></td>
      <td><code>true</code></td>
      <td>Big play button center position toggle</td>
    </tr>
    <tr>
      <td>className</td>
      <td><code>string</code></td>
      <td><code>""</code></td>
      <td>Video player wrapper class. It can be used for custom player skin.</td>
    </tr>
  </tbody>
</table>

### Video tracking props:

<table>
  <thead>
    <tr>
      <th>Method Name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>onReady</td>
      <td>It will fire when video player is ready to be used. It returns <code>videojs</code> instance.</td>
    </tr>
    <tr>
      <td>onPlay</td>
      <td>It will fire when video starts playing anytime. It returns current time of the video</td>
    </tr>
    <tr>
      <td>onPause</td>
      <td>It will fire when video is paused. It returns current time of the video</td>
    </tr>
    <tr>
      <td>onTimeUpdate</td>
      <td>It keeps firing while video is in playing state. It returns current time of the video</td>
    </tr>
    <tr>
      <td>onSeeking</td>
      <td>It will fire when video is beeing seeked using seekbar. It returns current time of the video</td>
    </tr>
    <tr>
      <td>onSeeked</td>
      <td>It will fire after seeking is done. It returns seek start time and seek end time for the video.</td>
    </tr>
    <tr>
      <td>onEnd</td>
      <td>It will fire when video is finished playing.</td>
    </tr>
  </tbody>
</table>

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