---
title: "Props 설정"
slug: "vpe-props-setting"
updated: 2026-09-17T09:08:00Z
published: 2026-09-17T09:08:00Z
canonical: "guide.ncloud-docs.com/vpe-props-setting"
stale: true
---
> ## Documentation Index
> Fetch the complete documentation index at: https://guide.ncloud-docs.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Props 설정
Classic/VPC 환경에서 이용 가능합니다.
이 페이지에서는 플레이어를 구성할 때 사용할 수 있는 속성을 설명합니다.
참고
Android, iOS에 공통으로 적용되는 사항입니다.
## devTestAppId
VPE는 앱 아이디 기반 라이선스가 설정됩니다. 개발 환경에서 앱 아이디를 개발 전용으로 설정하여 작업이 가능하도록 도움을 주는 속성입니다.
```
```
## accessKey
VPE는 라이선스키를 설정합니다.
```
```
## platform
VPE React Native SDK는 민간(pub) / 공공(gov)를 지원합니다. 기본값은 민간(pub) 입니다.
```
```
## events
VPE React Native SDK에서 플레이어 이벤트를 바인딩하는 기능을 제공합니다.
```
{
console.log('player ready')
},
fullScreen: (data) => {
setIsFullScreen(data.isFullScreen);
},
timeupdate: (data) => {
console.log('영상 전체 길이 (duration) : ', data.duration);
console.log('현재 재생 위치 (currentTime) : ', data.currentTime);
console.log('현재 재생 퍼센트 (percent) : ', data.percent);
console.log('누적 재생 시간 (viewingTime) : ', data.viewingTime);
console.log('재생소스 타입 (sourceType) : ', data.sourceType); // 재생소스 타입(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);
},
}}
...
>
```
| 이벤트 | 설명 | 리턴값 |
| --- | --- | --- |
| ready | 플레이어 로드 완료 | - |
| fullScreen | 전체화면 실행 시 발생 | data.isFullScreen == true , false |
| timeupdate | 재생 시 발생 | - duration: 영상 전체 길이 - currentTime : 현재 재생 위치 - percent : 현재 재생 퍼센트 - viewingTime : 누적 재생 시간 - sourceType : 재생소스 타입(vod, live) |
| nextTrack | 다음 영상으로 이동 시 발생 | 다음 영상 source |
| prevTrack | 이전 영상으로 이동 시 발생 | 이전 영상 source |
| volumechange | 플레이어 볼륨 변경 시 발생 | 음소거 여부 |
| play | 재생이 시작될 때 발생 | - |
| pause | pause가 실행될 때 발생 | - |
| ended | 현재 영상이 재생이 완료되었을 때 발생 | - |
| controlbarActive | 컨트롤 UI가 활성화 되었을 때 | - |
| controlbarDeactive | 컨트롤 UI가 비활성화 되었을 때 | - |
| error | 플레이어에 오류가 발생했을때 | - error_code: 에러코드 - error_message: 에러 메시지 |
## options
VPE 플레이어 옵션을 설정합니다.
```
```
- VPE 플레이어 옵션은 별도의 페이지에서 설명합니다.
[Video Player Enhancement 옵션 가이드](/docs/vpe-play-option)
## backButton
VPE 플레이어에 뒤로가기 버튼을 추가합니다.
```
{ //백버튼 추가
return (
{
//뒤로가기 기능 구현
}}
>
);
}}
...
>
```
## override
VPE 플레이어에 기본 기능을 직접 Override하여 원하는 기능을 구현할 수 있습니다.
```
{
Alert.alert(`nextSource`);
},
prevSource: () => {
Alert.alert(`prevSource`);
},
fullscreen: () => {
Alert.alert(`fullscreen`);
},
}}
...
>
```
## errorOverride
기본으로 제공되는 에러 화면을 고객사가 원하는 코드로 변경하여 실행할 수 있습니다. 에러 화면을 재정의하면 다음의 변경 화면과 같이 마지막 재생 위치에서 정지(pause) 상태를 유지한 채 플레이어 오버 레이어를 통해 에러 화면을 구현할 수 있습니다.
```
{
return (
<>
⚠️
{res.error.title}
({res.error.desc})
고객센터 문의 : 1588-0001
);
}}
...
>
```
## 커스텀 버튼 추가
customBtns 속성으로 플레이어에 커스텀 버튼을 추가하여 새로운 기능을 제공할 수 있습니다. 커스텀 버튼은 위치와 관계없이 최대 4개까지 추가할 수 있습니다.
position 및 flow 속성 설정별 커스텀 버튼 위치는 다음과 같습니다.
```
{
return (
{
Alert.alert('test11');
}}
>
);
},
},
{
position: 'right-top',
flow: 'left',
button: () => {
return (
{
Alert.alert('test11');
}}
>
);
},
},
]}
...
/>
```