이벤트

TV SDK에서 제공하는 플레이어 이벤트 목록과 사용 방법을 안내합니다.

이벤트 사용법

onEvent prop으로 이벤트를 수신합니다.

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{ playlist: [{ file: 'https://example.com/video.m3u8' }] }}
    onEvent={(event) => {
        switch (event.type) {
            case 'ready':
                console.log('플레이어 준비 완료');
                break;
            case 'timeupdate':
                console.log('현재 시간:', event.state.currentTime);
                break;
            case 'ended':
                console.log('재생 종료');
                break;
            case 'error':
                console.log('에러:', event.data);
                break;
        }
    }}
    onBack={() => navigation.goBack()}
/>

이벤트 목록

재생

이벤트설명
ready플레이어 준비 완료
canplay재생 가능
start재생 시작
play재생
playing재생 중
pause일시정지
ended재생 종료
timeupdate시간 업데이트
durationchange길이 변경

버퍼링 / 시킹

이벤트설명
bufferingStart / bufferingEnd버퍼링 시작/종료
loadingStart / loadingEnd로딩 시작/종료
seeking시킹 중
seeked시킹 완료
waiting대기 중

UI / 트랙

이벤트설명
controlbarActive / controlbarDeactive컨트롤바 표시/숨김
stateChange상태 변경
next / nextTrack다음 트랙
prev / prevTrack이전 트랙
skipForward / skipBack±10초 시킹
playlistChange플레이리스트 변경
quality_change화질 변경
volumechange볼륨 변경

광고

이벤트설명
adStart / adStarted광고 시작
adComplete광고 완료
adSkip / adSkipped광고 스킵
adError광고 에러
adLoaded광고 로드
adBreakStart / adBreakEnd광고 브레이크 시작/종료

에러

이벤트설명
error에러 발생

PlayerStateSnapshot

이벤트 콜백의 event.state에서 현재 상태를 확인할 수 있습니다.

type PlayerStateSnapshot = {
    isPlaying?: boolean;
    initPlay?: boolean;
    isFullscreen?: boolean;     // TV: 항상 true
    isEnded?: boolean;
    isLoading?: boolean;
    isWaiting?: boolean;
    isLive?: boolean;
    isDvr?: boolean;
    hasSubtitle?: boolean;
    isSettingModal?: boolean;
    currentTime?: number;
    duration?: number;
};
TV SDK
에러 처리메서드