플레이어 UX 옵션

이 페이지에서는 플레이어 UX를 구성하고 설정하는 옵션을 안내합니다.

touchGestures

touchGestures 속성으로 모바일 UI에서 터치 제스처 기능을 활성화할 수 있습니다.

<VpePlayer
    ...
    options={{
        playlist: [
            {
                file: 'https://CDN도메인/example_video_01.mp4'
            },
        ],
        touchGestures: true // 터치 제스처 사용(기본값)(false: 터치 제스처 사용 안 함)
    }}
    ...
/>

텍스트 워터마크

watermarkText 속성으로 시청자를 추적할 수 있는 워터마크를 원하는 텍스트(유저 아이디 + 사이트명 등)로 설정할 수 있습니다.

이 기능을 사용하려면 콘솔에서 해당 플레이어의 워터마크 설정이 활성화되어 있어야 합니다. 워터마크 텍스트는 스크립트를 통해서만 추가할 수 있습니다.

<VpePlayer
    ...
    options={{
        playlist: [
            {
                file: 'https://CDN도메인/example_video_01.mp4'
            },
        ],
        visibleWatermark: true,
        watermarkText: 'UserId@SiteDomain',
    }}
    ...
/>

텍스트 워터마크 상세 설정

텍스트 워터마크에 사용 시 워터마크 랜덤 위치 활성화 여부에 따라 상세 옵션을 설정할 수 있습니다. 워터마크에 대한 상세 옵션은 네이버 클라우드 플랫폼 콘솔에서도 설정할 수 있습니다.

랜덤 위치 활성화

<VpePlayer
    ...
    options={{
        playlist: [
            {
                file: 'https://CDN도메인/example_video_01.mp4'
            },
        ],
        visibleWatermark: true,
        watermarkText: 'UserId@SiteDomain',
        watermarkConfig: {
            randPosition: true,             // 워터마크 랜덤 위치 활성화(기본값)
            randPositionInterVal: 5000,     // 워터마크 위치 랜덤 변경 시간, 기본값: 3000(3초)
        }
    }}
    ...
/>

랜덤 위치 비활성화

<VpePlayer
    ...
    options={{
        playlist: [
            {
                file: 'https://CDN도메인/example_video_01.mp4'
            },
        ],
        visibleWatermark: true,
        watermarkText: 'UserId@SiteDomain',
        watermarkConfig: {
            randPosition: false,    // 워터마크 위치 고정
            x: 10,                  // 가로 위치 %
            y: 2,                   // 세로 위치 %
            opacity: 0.4            // 투명도 0.1 ~ 1
        }
    }}
    ...
/>

전체화면 모드

전체화면을 모달(Modal) 또는 커스텀 전체화면 중 선택하여 개발할 수 있습니다. 모달 방식 전체화면은 커스텀이 불가하나 기본적인 동작이 실행됩니다. 커스텀 전체화면은 안전영역 및 동작 등을 직접 제어할 수 있습니다.

모달형 전체화면

<VpePlayer
    ...
    options={{
        playlist: [
            {
                file: 'https://CDN도메인/example_video_01.mp4'
            },
        ],
        modalFullscreen: false, //true : 플레이어 모달, false : 커스텀 풀스크린
    }}
    ...
/>

커스텀 전체화면

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={'YOUR_ACCESS_KEY'}
                platform={'pub'}
                events={{
                    fullScreen: (data) => {
                        setIsFullScreen(data.isFullScreen);
                    },
                }}
                options={{
                    playlist: [
                        {
                            file: 'https://CDN도메인/example_video_01.mp4'
                        },
                    ],
                    aspectRatio: '16/9',
                    objectFit: 'contain',
                    modalFullscreen: false, // 커스텀 풀스크린
                }}
            />

            {!isFullScreen && (
                <ScrollView style={{ backgroundColor: '#ffffff' }}>
                    <View style={{ padding: 10 }}>
                        <Text>커스텀 풀스크린 구현 데모</Text>
                    </View>
                </ScrollView>
            )}
        </SafeAreaProvider>
    );
}