Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://feawesome.github.io/react-awesome-player/

🔥 video.js component for React
https://feawesome.github.io/react-awesome-player/

react react-awesome react-awesome-player react-video react-video-player videojs

Last synced: 2 months ago
JSON representation

🔥 video.js component for React

Host: GitHub
URL: https://feawesome.github.io/react-awesome-player/
Owner: feawesome
Created: 2019-07-11T01:53:00.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2020-11-09T07:24:43.000Z (almost 4 years ago)
Last Synced: 2024-05-20T23:25:04.749Z (5 months ago)
Topics: react, react-awesome, react-awesome-player, react-video, react-video-player, videojs
Language: JavaScript
Homepage: https://feawesome.github.io/react-awesome-player
Size: 647 KB
Stars: 64
Watchers: 1
Forks: 27
Open Issues: 2
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        [![GitHub stars](https://img.shields.io/github/stars/feawesome/react-awesome-player.svg?style=flat-square)](https://github.com/feawesome/react-awesome-player/stargazers)

[![GitHub issues](https://img.shields.io/github/issues/feawesome/react-awesome-player.svg?style=flat-square)](https://github.com/feawesome/react-awesome-player/issues)

[![GitHub forks](https://img.shields.io/github/forks/feawesome/react-awesome-player.svg?style=flat-square)](https://github.com/feawesome/react-awesome-player/network)

[![GitHub last commit](https://img.shields.io/github/last-commit/google/skia.svg?style=flat-square)](https://github.com/feawesome/react-awesome-player)

[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/feawesome/react-awesome-player)

[![Twitter](https://img.shields.io/twitter/url/https/github.com/feawesome/react-awesome-player.svg?style=flat-square)](https://twitter.com/intent/tweet?url=https://github.com/feawesome/react-awesome-player)

[![NPM](https://nodei.co/npm/react-awesome-player.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-awesome-player/)

[![NPM](https://nodei.co/npm-dl/react-awesome-player.png?months=9&height=3)](https://nodei.co/npm/react-awesome-player/)

## react-awesome-player

[video.js](https://github.com/videojs/video.js) player component for React.

Secondary development based on video.js, perfectly compatible with React , support subtitle display and the live stream of HLS. It is an awesome plugin for playing video on webpage.

If anything goes wrong during using, please submit issues in this repository, or send email to author: **[email protected]**

### Example

* [Demo Page](https://feawesome.github.io/react-awesome-player)

* Demo Code

```jsx

import React from 'react'

import { render } from 'react-dom'

import ReactAwesomePlayer from 'react-awesome-player'

class App extends React.Component {

  state = {

    options: {

      poster: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=854361313,3188166359&fm=26&gp=0.jpg",

      sources: [{

        type: "video/mp4",

        src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"

      }],

      subtitles: [{

          language: 'zh',

          url: "https://feawesome.github.io/react-awesome-player/zh.vtt",

          label: "中文"

        },

        {

          language: 'en',

          url: "https://feawesome.github.io/react-awesome-player/en.vtt",

          label: "EN"

      }],

      defaultSubtitle: 'en'

    }

  }

  loadeddata() {

    console.log('loadeddata')

  }

  canplay() {

    console.log('canplay')

  }

  canplaythrough() {

    console.log('canplaythrough')

  }

  play() {

    console.log('play')

  }

  pause() {

    console.log('pause')

  }

  waiting() {

    console.log('waiting')

  }

  playing() {

    console.log('playing')

  }

  ended() {

    console.log('ended')

  }

  error() {

    console.log('error')

  }

  render () {

    const { options } = this.state

    return 


       { console.log(video) }}

        options={options}

        loadeddata={this.loadeddata}

        canplay={this.canplay}

        canplaythrough={this.canplaythrough}

        play={this.play}

        pause={this.pause}

        waiting={this.waiting}

        playing={this.playing}

        ended={this.ended}

        error={this.error}

      />

    

  }

}

render(, document.getElementById('root'))

```

### Install

#### NPM

``` bash

npm install react-awesome-player --save

```

### API

- component api:

| API | description | type | default |

| -   | -           | -    | -       |

| events   | custom videojs event to component | Array | [] |

| playsInline   | set player not full-screen in mobile device | Boolean | true |

| crossOrigin   | set crossOrigin to video | String | '' |

- video.js api

  * [video.js options](http://docs.videojs.com/tutorial-options.html)

  * [video.js docs](http://docs.videojs.com/)

### videojs plugins

- [videojs-resolution-switcher](https://github.com/kmoskwiak/videojs-resolution-switcher)

- [videojs-contrib-hls](https://github.com/videojs/videojs-contrib-hls)

- [videojs-youtube](https://github.com/videojs/videojs-youtube)

- [videojs-vimeo](https://github.com/videojs/videojs-vimeo)

- [videojs-hotkeys](https://github.com/ctd1500/videojs-hotkeys)

- [videojs-flash](https://github.com/videojs/videojs-flash)

- [videojs-contrib-ads](https://github.com/videojs/videojs-contrib-ads)

- [more plugins...](https://github.com/search?o=desc&q=videojs+plugin&s=stars&type=Repositories&utf8=%E2%9C%93)

### Author

**Peng Zhang**

**[email protected]**