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

Preview

Expo SDK 50	Web Online
	https://1uokun.github.io/react-native-video-bilibili/index.html

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

• Gesture Responder System👆
  • 左右滑动进度条
  • 上下滑动亮度（左）/声音（右）
  • 长按加速
  • 双击暂停
• Animated Component🏄
• Menus Component
• Loading Component

1.1

• add lock props
• add children props

2.0 Future features(💰paid version)

• Native volume control
• Native light control
• 弹幕