Skip to content
🔥 video.js component for React
JavaScript CSS HTML
Branch: master
Clone or download
Latest commit a8ac2be Sep 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example/src fix: 修改github地址 Jul 29, 2019
src fix: 修改播放器时间提示挤压的问题 Jul 29, 2019
.babelrc feat: 完善生命周期和参数 Jul 11, 2019
.gitignore feat: 初始化项目 Jul 11, 2019
.npmignore feat: 初始化项目 Jul 11, 2019
README.md fix: 修改README Sep 10, 2019
package.json fix: 修改版本号 Sep 10, 2019
webpack.config.js feat: 完善生命周期和参数 Jul 11, 2019

README.md

GitHub stars GitHub issues GitHub forks GitHub last commit license Twitter

NPM NPM

react-awesome-player

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: returnzp@gmail.com

Example

import React from 'react'
import { render } from 'react-dom'
import ReactAwesomePlayer from 'react-awesome-player'

class App extends React.Component {
  state = {
    options: {
      poster: "http://pic2.52pk.com/files/130514/1283314_143556_2145.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 <ReactAwesomePlayer
      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(<App />, document.getElementById('root'))

Install

NPM

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 ''

videojs plugins

Author

Peng Zhang returnzp@gmail.com

You can’t perform that action at this time.