Props 설정

이 페이지에서는 플레이어를 구성하는 데 사용할 수 있는 속성 목록을 보여줍니다.

devTestAppId

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

AndroidiOS

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

accessKey

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

AndroidiOS

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

platform

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

AndroidiOS

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

events

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

AndroidiOS

<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);
        },
        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
nextTrack	다음 영상으로 이동시 발생	다음 영상 source
prevTrack	이전 영상으로 이동시 발생	이전 영상 source
volumechange	플레이어 볼륨 변경시 발생	음소거 여부
play	재생이 시작될때 발생	-
pause	pause가 실행될때 발생	-
ended	현재 영상이 재생이 완료되었을때 발생	-
controlbarActive	컨트롤 UI가 활성화 되었을때	-
controlbarDeactive	컨트롤 UI가 비활성화 되었을때	-
error	플레이어에 에러가 발생했을때	error_code, error_message

options

VPE 플레이어 옵션을 설정합니다. 플레이어 옵션은 별도의 페이지에서 상세히 설명합니다.

AndroidiOS

<VpePlayer
    ...
    options={{
        playlist: [
            {
                file: 'https://example.com/video/master.m3u8'
            },
        ],
        autostart: true,
        muted: true,
        aspectRatio: '16/9',
    }}
    ...
>
</VpePlayer>

backButton

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

AndroidiOS

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

override

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

AndroidiOS

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

errorOverride

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

AndroidiOS

<VpePlayer
    ...
    errorOverride={(res) => {
        return (
            <>
                <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>

커스텀 버튼 추가

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

position 및 flow 속성으로 버튼 위치를 지정합니다:left-top, right-top, left-bottom, right-bottom

AndroidiOS

<VpePlayer
    ...
    customButton={[
        {
            position: 'right-bottom',
            flow: 'left',
            button: () => {
                return (
                    <TouchableOpacity onPress={() => { Alert.alert('test'); }}>
                        <ChatCircleIcon size={22} color={'#ffffff'} weight={'fill'} />
                    </TouchableOpacity>
                );
            },
        },
        {
            position: 'right-top',
            flow: 'left',
            button: () => {
                return (
                    <TouchableOpacity onPress={() => { Alert.alert('test'); }}>
                        <InfoIcon size={22} color={'#ffffff'} weight={'fill'} />
                    </TouchableOpacity>
                );
            },
        },
    ]}
    ...
/>