chip-video-player
v1.0.17
Published
video.js component for React
Downloads
9
Maintainers
Readme
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: [email protected]
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
videojs plugins
- videojs-resolution-switcher
- videojs-contrib-hls
- videojs-youtube
- videojs-vimeo
- videojs-hotkeys
- videojs-flash
- videojs-contrib-ads
- more plugins...
Author
Peng Zhang [email protected]