Props configuration

Available in Classic and VPC

This page describes the properties available for configuring the player.

devTestAppId

VPE is configured with an app ID-based license. This property allows you to work in the development environment by setting a development-only app ID.

<VpePlayer
    ...
    devTestAppId={'TEST DEV AppID'} //For EXPO GO. Used only in development mode
    ...
>
</VpePlayer>

accessKey

Sets the VPE license key.

<VpePlayer
   ...
   accessKey={'VPE ACCESS KEY'} //Access key matching the AppID
   ...
>
</VpePlayer>

platform

The VPE React Native SDK supports public (pub) and government (gov) platforms. The default is public (pub).

<VpePlayer
   ...
   platform={'pub'} //pub: Public, gov: Government
   ...
>
</VpePlayer>

events

The VPE React Native SDK provides features to bind player events.

<VpePlayer
  ...
  events={{
      ready: () => {
          console.log('player ready')
      },
      fullScreen: (data) => {
          setIsFullScreen(data.isFullScreen);
      },
      timeupdate: (data) => {
          console.log('Total duration of the video (duration): ', data.duration);
          console.log('Current playback position (currentTime): ', data.currentTime);
          console.log('Current playback percentage (percent): ', data.percent);
          console.log('Accumulated playback time (viewingTime): ', data.viewingTime);
          console.log('Playback source type (sourceType): ', data.sourceType); // Playback source type (vod, live)
      },
      nextTrack: (data) => {
          console.log(data);
      },
      prevTrack: (data) => {
          console.log(data);
      },
      volumechange: (data) => {
          console.log(data);
      },
      play: () => {
          console.log('play');
      },
      pause: () => {
          console.log('pause');
      },
      ended: () => {
          console.log('ended');
      },
      controlbarActive: () => {
          console.log('controlbarActive');
      },
      controlbarDeactive: () => {
          console.log('controlbarDeactive');
      },
      error: (data) => {
        console.log('error', data);
      },

  }}
  ...
>
</VpePlayer>

options

Sets VPE player options.

<VpePlayer
 ...
 options={{
       playlist: [ //Playback source
           {
               file: 'https://m4qgahqg2249.edge.naverncp.com/hls/a4oif2oPHP-HlGGWOFm29A__/endpoint/sample/221027_NAVER_Cloud_intro_Long_ver_AVC_,FHD_2Pass_30fps,HD_2Pass_30fps,SD_2Pass_30fps,.mp4.smil/master.m3u8',
               
           },
       ],
       autostart: true, //Whether to enable Autoplay
       muted: true, //Whether to mute the audio
       aspectRatio: '16/9', //Aspect ratio
       
   }}
 ...
>
</VpePlayer>

• VPE player options are described on a separate page.
  Video Player Enhancement option guide

backButton

Adds a Back button to the VPE player.

<VpePlayer
    ...
    backButton={() => { //Add back button
          return (
                  <TouchableOpacity
                          onPress={() => {
                              //Implement back feature
                          }}
                  >
                      <CaretLeftIcon size={22} color={'#ffffff'} />
                  </TouchableOpacity>
          );
      }}
    ...
>
</VpePlayer>

override

Overrides the basic features of the VPE player to implement the desired features.

<VpePlayer
    ...
    override={{
    nextSource: () => {
      Alert.alert(`nextSource`);
    },
    prevSource: () => {
      Alert.alert(`prevSource`);
    },
    fullscreen: () => {
      Alert.alert(`fullscreen`);
    },
  }}
    ...
>
</VpePlayer>

errorOverride

You can replace the default error screen with your own code.
When overriding the error screen, it can be implemented through the player overlay, maintaining the pause at the last playback position as in the following modified screen:

<VpePlayer
  ...
  errorOverride={(res) => {
    return (
      <>
        <View>
          <Text style={{ color: '#ffffff', fontSize: 30 }}>⚠️</Text>
        </View>
        <View>
          <Text style={{ color: '#ffffff', fontSize: 16, paddingVertical: 8 }}>
            {res.error.title}
          </Text>
        </View>
        <View>
          <Text style={{ color: '#ffffff', fontSize: 12, opacity: 0.8 }}>({res.error.desc})</Text>
        </View>
        <View>
          <Text style={{ color: '#ffffff', fontSize: 12, opacity: 0.8, paddingTop: 10 }}>
            Customer center: 1588-0001
          </Text>
        </View>
      </>
    );
  }}
  ...
>
</VpePlayer>

Add custom buttons

Use the customBtns property to add a custom button to the player and provide a new feature. You can add up to 4 custom buttons regardless of the position.

The positions of the custom buttons are based on the settings of the position and flow properties:

<VpePlayer
    ...
    customButton={[
      {
        position: 'right-bottom',
        flow: 'left',
        button: () => {
          return (
            <TouchableOpacity
              onPress={() => {
                Alert.alert('test11');
              }}
            >
              <ChatCircleIcon size={22} color={'#ffffff'} weight={'fill'} />
            </TouchableOpacity>
          );
        },
      },
    
      {
        position: 'right-top',
        flow: 'left',
        button: () => {
          return (
            <TouchableOpacity
              onPress={() => {
                Alert.alert('test11');
              }}
            >
              <InfoIcon size={22} color={'#ffffff'} weight={'fill'} />
            </TouchableOpacity>
          );
        },
      },
    ]}
    ...
/>