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]
- Demo Page
- Demo Code
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://resource.myhbp.org.cn/subtitlevtt/zh_cn/difficult%20interactions.vtt?OSSAccessKeyId=LTAI7hc8DeH5YRB8&Expires=1563073120&Signature=6bn6O4%2Byxy4Ii%2BgHy5beSkK3rVA%3D",
label: "中文"
},
{
language: 'en',
url: "https://resource.myhbp.org.cn/subtitlevtt/en/difficult%20interactions.vtt?OSSAccessKeyId=LTAI7hc8DeH5YRB8&Expires=1563073120&Signature=3atEE9wrLDoqly%2B8wkIlSYlUoew%3D",
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')
}
erro() {
console.log('erro')
}
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}
erro={this.erro}
/>
}
}
render(<App />, document.getElementById('root'))
npm install react-awesome-player --save
-
component api:
events
:[ Array, default: [] ]
: custom videojs event to componentplaysinline
:[ Boolean, default: false ]
: set player not full-screen in mobile devicecrossOrigin
:[ String, default: '' ]
: set crossOrigin to videocustomEventName
:[ String, default: 'statechanged' ]
: custom the state change event name
-
video.js api
- videojs-resolution-switcher
- videojs-contrib-hls
- videojs-youtube
- videojs-vimeo
- videojs-hotkeys
- videojs-flash
- videojs-contrib-ads
- more plugins...
Peng Zhang [email protected]