react-hls
is a simple hls/rtmp live stream player.
It will use hls.js to play your hls live stream if your browser support html 5 video
and MediaSource Extension
. Otherwise it will downgrade to Flash
play your rtmp
live stream.
- Start the project
- Write base component structor
- Support Hls live stream playing ability
- Support Rtmp/Flv live stream
- downgrad solution
- bugs & Optimization :)
import ReactHLS from 'react-hls';
// In your render function
<ReactHLS url={"your hls http url"} />
-
url
String
required
the hls url that you want to play
-
autoplay
Boolean
autoplay when component is ready default to
false
-
constrols
Boolean
whether or not showing the playback controls default to
false
-
width
Number
video width
-
height
Number
video height
-
hlsConfig
Object
hls.js
config , you can see all config here -
videoProps
Object
All video tag attributes supported. You can check all attributes here