chip-video-player

chip-video-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: [e-mail]

Example

• Demo Page
• Demo Code

import React from 'react'
import { render } from 'react-dom'
import ChipVideoPlayer from 'chip-video-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 <ChipVideoPlayer
      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 chip-video-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
  • video.js docs

videojs plugins

• videojs-resolution-switcher
• videojs-contrib-hls
• videojs-youtube
• videojs-vimeo
• videojs-hotkeys
• videojs-flash
• videojs-contrib-ads
• more plugins...

Author

Peng Zhang [e-mail]