feawesome / React Awesome Player
🔥 video.js component for React
Stars: ✠56
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Awesome Player
videojs-react-course-assistant
A note taking tool to use with (initially) youtube playlists aiming to be similar to Frontend Masters or Coursera
Stars: ✠13 (-76.79%)
Mutual labels: videojs
Vue Videojs Demo
Use video.js & vue to play RTMP && HLS streams && playback
Stars: ✠275 (+391.07%)
Mutual labels: videojs
videojs-landscape-fullscreen
Videojs on Mobile and/or React: Automatically Switch to Landscape on Fullscreen, and Fullscreen on Landscape
Stars: ✠72 (+28.57%)
Mutual labels: videojs
videojs-airplay
Videojs Plugin that adds an airplay button to the control bar
Stars: ✠28 (-50%)
Mutual labels: videojs
Videojs Contrib Ads
A Tool for Building Video.js Ad Plugins
Stars: ✠334 (+496.43%)
Mutual labels: videojs
Videojscustomization
HTML5 视频æ’放器 自定制: React + video.js 详细讲解
Stars: ✠32 (-42.86%)
Mutual labels: videojs
Videojs Contrib Dash
Video.js plugin for supporting the MPEG-DASH playback through a video.js player
Stars: ✠255 (+355.36%)
Mutual labels: videojs
refinerycms-videojs
Manage videos in RefineryCMS using Video.js player for playback
Stars: ✠41 (-26.79%)
Mutual labels: videojs
Vue Video Player
🎞 @videojs component for @vuejs
Stars: ✠4,026 (+7089.29%)
Mutual labels: videojs
generator-videojs-plugin
Yeoman generator for video.js plugins.
Stars: ✠71 (+26.79%)
Mutual labels: videojs
Video.js
Video.js - open source HTML5 & Flash video player
Stars: ✠32,478 (+57896.43%)
Mutual labels: videojs
Wjplayer
Video.js bundle that supports HLS, VAST/VMAP, 360-degree videos, and more.
Stars: ✠55 (-1.79%)
Mutual labels: videojs
Videojs Youtube
YouTube playback technology for Video.js
Stars: ✠948 (+1592.86%)
Mutual labels: videojs
Gohls
A server that exposes a directory for video streaming via web interface
Stars: ✠409 (+630.36%)
Mutual labels: videojs
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: [email protected]
Example
- 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: "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 <div className="test-demo">
<ReactAwesomePlayer
onRef={video => { 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}
/>
</div>
}
}
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 | '' |
- 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]
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].