Skip to main content

React-native player with Custom Controls

Creating Custom control component

<Video Player Controller>    // Component to hold the video player and custom controls

<Video Player View/> // Video Player

<Custom Control View/> // Custom controls

</Video Player Controller>

Sample code : VdoPlayerControls.js

Step 1: Create a component and import VdoPlayerView

The step 1 is to create a component and import the VdoPlayerView in order to access the video player and execute the player operations.

import { VdoPlayerView } from 'vdocipher-rn-bridge';

Step 2: Add the video player view

Next step is to embed the video player view. To embed the video player view use VdoPlayerView component and pass embed info to it's embedInfo attribute.

note

Since we are creating our custom controls for the video player, so it's necessary to pass showNativeControls={false} to the VdoPlayerView component in order to suppress the native controls.

const embedInfo = {otp: 'some-otp', playbackInfo: 'some-playbackInfo'};

<VdoPlayerView
embedInfo={embedInfo}
style={{height: 200, width: '100%'}}
showNativeControls={false}
/>

Step 3: Create a view for the custom controls

Next step is to build a view to display the custom controls to access the video player and perform player operations as the sibling to VdoPlayerView component.

Here is the sample code for creating custom control view in which we are showing the play/pause button, the seek-bar and the fullscreen button.

// JSX 
<View style={styles.controls.container}>
<TouchableWithoutFeedback onPress={this._onPlayButtonTouch}>
<Icon name = {showPlayIcon ? "play" : "pause"}
size={30}
color="#FFF"
/>
</TouchableWithoutFeedback>
<Text
style={styles.controls.position}>
{digitalTime(Math.floor(this.state.position))}
</Text>
{this._renderSeekbar()}
<Text
style={styles.controls.duration}>
{digitalTime(Math.floor(this.state.duration))}
</Text>
<TouchableWithoutFeedback onPress={this._toggleFullscreen}>
<MatIcon name = {isFullscreen ? "fullscreen-exit" : "fullscreen"}
style={styles.controls.fullscreen}
size={30}
color="#FFF"
/>
</TouchableWithoutFeedback>
</View>
// JS
_renderSeekbar() {
return (
<TouchableWithoutFeedback
onPress={this._onProgressTouch}>
<View style={styles.seekbar.container}>
<View
style={styles.seekbar.track}
onLayout={event => this._seekbarWidth = event.nativeEvent.layout.width}>
<View
style={[styles.seekbar.fill, {width: this.state.seekbarPosition}]}
/>
</View>
<View
style={[styles.seekbar.handle, {left: this.state.seekbarPosition}]}>
<View
style={[
styles.seekbar.circle,
{backgroundColor: '#FFF'},
]}
/>
</View>
</View>
</TouchableWithoutFeedback>
);
}

Step 4: Embed the video player in application page

Now to add the player view with custom control in our page, we can import and use it like:

import VdoPlayerControls from './VdoPlayerControls';

const embedInfo = {otp: 'some-otp', playbackInfo: 'some-playbackInfo'};

// in JSX

<VdoPlayerControls style={styles.player}
embedInfo={embedInfo}
/>

View player in Fullscreen

Now let's create two functions to toggle hidden and shown state of all the components except VdoPlayerControls. Also set the height of VdoPlayerControls as 100% on entering the fullscreen mode and reset it back on exit from the fullscreen.

Here is the sample code to perform fullscreen mode.

// JSX
<VdoPlayerControls style={isFullscreen ? styles.playerFullscreen : styles.player}
embedInfo={embedInfo}
showNativeControls={false}
/>
{ !isFullscreen &&
<Text>
The ui controls for the player are embedded inside the native view
</Text>
}

const styles = StyleSheet.create({
player: {
height: 200,
width: '100%',
},
playerFullscreen: {
height: '100%',
width: '100%',
},
});
  // JS
_onEnterFullscreen = () => {
this.setState({isFullscreen: true});
}

_onExitFullscreen = () => {
this.setState({isFullscreen: false});
}