플레이어 UX 옵션

Classic/VPC 환경에서 이용 가능합니다.

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

touchGestures

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

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

텍스트 워터마크

watermarkText 속성으로 시청자를 추적할 수 있는 워터마크를 원하는 텍스트(유저 아이디+사이트명 등)로 설정할 수 있습니다.
이 기능을 사용하려면 콘솔에서 해당 플레이어의 워터마크 설정이 활성화되어 있어야 합니다. 워터마크 활성화에 대한 자세한 내용은 플레이어 설정을 참고해 주십시오.
워터마크 텍스트는 스크립트를 통해서만 추가할 수 있습니다.

Video Player Enhancement 옵션 가이드 - 플레이어 설정

<VpePlayer
    ...
    options={{
          playlist: [ //재생소스
              {
                  file: 'https://CDN도메인/example_video_01.mp4'
              },
          ],
          visibleWatermark:true, // 텍스트 워터마크 사용(false(기본값): 텍스트 워터마크 사용 안 함)
          watermarkText:'UserId@SiteDomain', // 워터마크 텍스트, <예시> 시청자를 추적할 수 있는 유저 아이디+사이트명
        }}
    ...
/>

텍스트 워터마크 상세 설정

텍스트 워터마크에 사용 시 워터마크 랜덤 위치 활성화 여부에 따라 상세 옵션을 설정할 수 있습니다.
워터마크에 대한 상세 옵션은 네이버 클라우드 플랫폼 콘솔에서도 설정할 수 있습니다. 자세한 내용은 플레이어 설정을 참고해 주십시오.
랜덤 위치 활성화 및 비활성화에 대한 예제는 다음과 같습니다.

랜덤 위치 활성화

<VpePlayer
    ...
    options={{
          playlist: [ //재생소스
              {
                  file: 'https://CDN도메인/example_video_01.mp4'
              },
          ],
          visibleWatermark:true, // 콘솔에서만 설정 가능(false(기본값): 텍스트 워터마크 사용 안 함)
          watermarkText:'UserId@SiteDomain', // <예시> 시청자를 추적할 수 있는 유저 아이디+사이트명
          watermarkConfig:{
              randPosition: true, // 워터마크 랜덤 위치 활성화(기본값)
              randPositionInterVal: 5000, // 워터마크 위치 랜덤 변경 시간, 기본값: 3000(3초)
          }
        }}
    ...
/>

랜덤 위치 비활성화

<VpePlayer
    ...
    options={{
          playlist: [ //재생소스
              {
                  file: 'https://CDN도메인/example_video_01.mp4'
              },
          ],
          visibleWatermark:true, // 콘솔에서만 설정 가능(false(기본값): 텍스트 워터마크 사용 안 함)
          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={'fe9d753ee708a519716e18a7ed8bd989'}
        platform={'pub'}
        stage={'prod'}
        
        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 }}>
            <View>
              <Text>커스텀 풀스크린 구현 데모</Text>
            </View>
            <View>
              <Text>react-native-safe-area-context 이용 예제</Text>
            </View>
          </View>
        </ScrollView>
      )}
    </SafeAreaProvider>
  );
}