React-native-video-bilibili NPM

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