react-native-video-bilibili

📺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

• ...video.props

• containerStyle

  container style

• style

  react-native-video style

• styles

  deep merge styles with VideoPlayerStyles

• lock🔒

  🌟Lock all operations🌟

• Custom Menus Component

  |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>)|

  state props

  Pass all state and external props of the parent component<Provider> to the child component<Consumer> based on context API

  Provider

  <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

• ...video methods

     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
• [ ] 弹幕