플레이어 UI

플레이어 UI를 구성하고 설정하는 옵션을 안내합니다.

controls

controls 속성으로 컨트롤바 표시 여부를 설정할 수 있습니다.

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playlist: [{
            file: 'https://example.com/video.m3u8',
        }],
        controls: false, // 컨트롤바 숨김
    }}
    onBack={() => navigation.goBack()}
/>

controlBtn

controlBtn 속성으로 개별 버튼의 표시 여부를 설정할 수 있습니다.

TV SDK에서는 fullscreen, pictureInPicture 속성이 없습니다.

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playlist: [{
            file: 'https://example.com/video.m3u8',
        }],
        controls: true,
        controlBtn: {
            play: true,
            progressBar: true,
            volume: true,
            times: true,
            setting: true,
            subtitle: true,
        },
    }}
    onBack={() => navigation.goBack()}
/>

progressBarColor

progressBarColor 속성으로 진행바의 색상을 설정할 수 있습니다.

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playlist: [{
            file: 'https://example.com/video.m3u8',
        }],
        progressBarColor: '#00E0FF',
    }}
    onBack={() => navigation.goBack()}
/>

controlActiveTime

controlActiveTime 속성으로 컨트롤바가 자동으로 숨겨지는 시간을 설정합니다. 기본값은 3000ms(3초)입니다.

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playlist: [{
            file: 'https://example.com/video.m3u8',
        }],
        controlActiveTime: 5000, // 5초 후 자동 숨김
    }}
    onBack={() => navigation.goBack()}
/>

lang

lang 속성으로 UI 언어를 설정할 수 있습니다.

값	언어
`ko`	한국어 (기본값)
`en`	English
`ja`	日本語

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playlist: [{
            file: 'https://example.com/video.m3u8',
        }],
        lang: 'ko',
    }}
    onBack={() => navigation.goBack()}
/>

리모컨 이벤트

TV SDK는 리모컨 D-pad 입력을 자동으로 처리합니다.

이벤트	Apple TV	Android TV	동작
select	O	O	확인/선택
playPause	O	O	재생/일시정지
up/down	O	O	컨트롤바 표시/포커스 이동
left/right	O	O	SeekBar에서 ±10초 시킹
menu	O	X	뒤로가기
rewind/fastForward	X	O	되감기/빨리감기