react-native-video-bilibili
No link, no dependencies, only javascript
Install
npm install react-native-video-bilibili
Screenshot
UX exploded view
Usage
import Video from 'react-native-video-bilibili';
<Video
ref={'player'}
style={{width:"100%",height:300}}
source={{uri: "https://media.w3.org/2010/05/sintel/trailer.mp4"}}
/>
Configurable props
-
containerStyle
container style
-
style
react-native-video style
-
styles
deep merge styles with VideoPlayerStyles
-
lock
🔒 🌟 Lock all operations🌟 -
Property Type Arguments Description renderCenterMenus node state,props Components displayed in the middle of the player, like volume or light control renderTopMenus node state,props Components displayed in the top of the player, like title or navigation control renderBottomMenus node state,props Components displayed in the bottom of the player, like seek bar or seek time control renderSeekTime node state,props Components displayed when you slide left and right, like show each frame of picture renderLoading node state,props Components displayed when video is buffering, like show buffering loading children function state,props ({state,props})=>(<View></View>)
Pass all
state
and externalprops
of the parent component<Provider>
to the child component<Consumer>
based on context APIProvider
<Provider value={{ state:this.state, props:{ ...this.props, onCurrentTimeProgress:this.onCurrentTimeProgress, onSlidingComplete:this.onSlidingComplete, setPaused:this.setPaused }, }}> </Provider>
Consumer
<Consumer> {({state, props}) => <Animated.View> {props.renderCenterMenus(state, props)} </Animated.View> } </Consumer>
Event props
- ...video.props
- setFullScreen()
- setNavigator()
- setSetting()
Ref Direct Manipulation
-
this.player._root.doSth()
-
setPaused()
-
showMenusComponent()
-
showSeekTimerComponent()
-
onOrientationChange({width,height})
Todo-list
1.0
- [x] Gesture Responder System
👆 - [x] Animated Component
🏄 - [x] Menus Component
- [x] Loading Component
if you accept
Link
the other library,please refer to https://github.com/abbasfreestyle/react-native-af-video-player
1.1
- [x] add
lock
props - [x] add
children
props
2.0 Future features
- [ ] Native volume control
- [ ] Native light control
- [ ] 弹幕