Player UX options

Available in Classic and VPC

This page describes the options for configuring and setting up the player UX.

touchGestures

Use the touchGestures property to enable touch gestures in the mobile UI.

<VpePlayer
    ...
    options={{
          playlist: [ //Playback source
              {
                  file: 'https://CDNdomain/example_video_01.mp4'
              },
          ],
          touchGestures: true // Enable touch gestures (default) (false: Disable touch gestures)
        }}
    ...
/>

Text watermark

Use the watermarkText property to set the watermark text for tracking viewers (e.g., user ID + site name).
To use this feature, you must enable the player's watermark settings in the console. For details on enabling watermarks, see Set up player.
Watermark text can only be added via script.

Video Player Enhancement option guide - set up player

<VpePlayer
    ...
    options={{
          playlist: [ //Playback source
              {
                  file: 'https://CDNdomain/example_video_01.mp4'
              },
          ],
          visibleWatermark:true, // Enable text watermark (false (default): Disable text watermark)
          watermarkText:'UserId@SiteDomain', // Watermark text (e.g., user ID + site name for tracking viewers)
        }}
    ...
/>

Detailed settings for text watermark

When using text watermarks, you can configure detailed options depending on whether the random position is enabled.
The detailed options for the watermark can be configured in the NAVER Cloud Platform console. For more information, see Set up player.
The examples for enabling and disabling random position are as follows:

Enable random position

<VpePlayer
    ...
    options={{
          playlist: [ //Playback source
              {
                  file: 'https://CDNdomain/example_video_01.mp4'
              },
          ],
          visibleWatermark:true, // Only configurable in the console (false (default): Disable text watermark)
          watermarkText:'UserId@SiteDomain', // Example: User ID + site name for tracking viewers
          watermarkConfig:{
              randPosition: true, // Enable watermark random position (default)
              randPositionInterVal: 5000, // Watermark position random change interval, default: 3000 (3 seconds)
          }
        }}
    ...
/>

Disable random position

<VpePlayer
    ...
    options={{
          playlist: [ //Playback source
              {
                  file: 'https://CDNdomain/example_video_01.mp4'
              },
          ],
          visibleWatermark:true, // Only configurable in the console (false (default): Disable text watermark)
          watermarkText:'UserId@SiteDomain', // Example: User ID + site name for tracking viewers
          watermarkConfig:{
              randPosition: false, // Fixed watermark position
              x: 10, // Horizontal position %
              y: 2, // Vertical position %
              opacity: 0.4 // Transparency 0.1-1
          }
        }}
    ...
/>

Full screen mode

You can enable full-screen mode using either the Modal or Custom full screen option.
The modal full screen is not customizable but supports basic behaviors.
The custom full screen mode allows direct control over safe areas, behaviors, etc.

Modal full screen

<VpePlayer
    ...
    options={{
          playlist: [ //Playback source
              {
                  file: 'https://CDNdomain/example_video_01.mp4'
              },
          ],
          modalFullscreen: false, //true: Player modal, false: Custom full screen
        }}
    ...
/>

Custom full screen

import { View, StatusBar, ScrollView, TouchableOpacity, Text } from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { VpePlayer } from 'vpe-react-native';
import React, { useRef, useState } from 'react';
import { useNavigation } from '@react-navigation/native';

export default function App() {
  const navigation = useNavigation();

  const [isFullScreen, setIsFullScreen] = useState(false);
  const playerRef = useRef(null);

  return (
    <SafeAreaProvider>
      <SafeAreaView edges={isFullScreen ? ['none'] : ['top', 'left', 'right', '']} />
      <StatusBar barStyle={'dark-content'} hidden={isFullScreen ? true : false} />

      <VpePlayer
        ref={playerRef}
        devTestAppId={'com.vpereactnative.example'}
        accessKey={'fe9d753ee708a519716e18a7ed8bd989'}
        platform={'pub'}
        stage={'prod'}
        
        events={{
          fullScreen: (data) => {
            setIsFullScreen(data.isFullScreen);
          },
        }}
        options={{
          playlist: [
                    { 
                      file: 'https://CDNdomain/example_video_01.mp4'
                    },
          ],
          aspectRatio: '16/9',
          objectFit: 'contain',

          modalFullscreen: false, // Custom full screen
        }}
      />

      {!isFullScreen && (
        <ScrollView style={{ backgroundColor: '#ffffff' }}>
          <View style={{ padding: 10 }}>
            <View>
              <Text>Custom full screen implementation demo</Text>
            </View>
            <View>
              <Text>Example of using react-native-safe-area-context</Text>
            </View>
          </View>
        </ScrollView>
      )}
    </SafeAreaProvider>
  );
}