Props 설정

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

이 페이지에서는 플레이어를 구성할 때 사용할 수 있는 속성을 설명합니다.

참고

Android, iOS에 공통으로 적용되는 사항입니다.

devTestAppId

VPE는 앱 아이디 기반 라이선스가 설정됩니다. 개발 환경에서 앱 아이디를 개발 전용으로 설정하여 작업이 가능하도록 도움을 주는 속성입니다.

<VpePlayer
    ...
    devTestAppId={'TEST DEV AppID'} //EXPO GO 대응 , 개발모드에서만 사용됨
    ...
>
</VpePlayer>

accessKey

VPE는 라이선스키를 설정합니다.

<VpePlayer
   ...
   accessKey={'VPE ACCESS KEY'} //AppID 와 일치하는 Access Key
   ...
>
</VpePlayer>

platform

VPE React Native SDK는 민간(pub) / 공공(gov)를 지원합니다. 기본값은 민간(pub) 입니다.

<VpePlayer
   ...
   platform={'pub'} //pub : 민간 , gov : 공공
   ...
>
</VpePlayer>

events

VPE React Native SDK에서 플레이어 이벤트를 바인딩하는 기능을 제공합니다.

<VpePlayer
  ...
  events={{
      ready: () => {
          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);
      },

  }}
  ...
>
</VpePlayer>

이벤트	설명	리턴값
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 플레이어 옵션을 설정합니다.

<VpePlayer
 ...
 options={{
       playlist: [ //재생소스
           {
               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, //자동재생 여부
       muted: true, //음소거 여부
       aspectRatio: '16/9', //화면비
       
   }}
 ...
>
</VpePlayer>

VPE 플레이어 옵션은 별도의 페이지에서 설명합니다.
Video Player Enhancement 옵션 가이드

backButton

VPE 플레이어에 뒤로가기 버튼을 추가합니다.

<VpePlayer
    ...
    backButton={() => { //백버튼 추가
          return (
                  <TouchableOpacity
                          onPress={() => {
                              //뒤로가기 기능 구현
                          }}
                  >
                      <CaretLeftIcon size={22} color={'#ffffff'} />
                  </TouchableOpacity>
          );
      }}
    ...
>
</VpePlayer>

override

VPE 플레이어에 기본 기능을 직접 Override하여 원하는 기능을 구현할 수 있습니다.

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

errorOverride

기본으로 제공되는 에러 화면을 고객사가 원하는 코드로 변경하여 실행할 수 있습니다.
에러 화면을 재정의하면 다음의 변경 화면과 같이 마지막 재생 위치에서 정지(pause) 상태를 유지한 채 플레이어 오버 레이어를 통해 에러 화면을 구현할 수 있습니다.

<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 }}>
            고객센터 문의 : 1588-0001
          </Text>
        </View>
      </>
    );
  }}
  ...
>
</VpePlayer>

커스텀 버튼 추가

customBtns 속성으로 플레이어에 커스텀 버튼을 추가하여 새로운 기능을 제공할 수 있습니다. 커스텀 버튼은 위치와 관계없이 최대 4개까지 추가할 수 있습니다.

position 및 flow 속성 설정별 커스텀 버튼 위치는 다음과 같습니다.

<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>
          );
        },
      },
    ]}
    ...
/>