Player UI

Available in Classic and VPC

This guide introduces the options for configuring the player UI and the declarative layout system.

controls

You can set to display the control bar with the controls property.

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playlist: [{ file: 'https://example.com/video.m3u8' }],
        controls: false, // Hide the control bar
    }}
    onBack={() => navigation.goBack()}
/>

controlBtn

You can set to display individual buttons with the controlBtn property. In TV SDK, the properties of fullscreen and pictureInPicture are not available.

<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

You can set the color of the progress bar using the progressBarColor property.

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

controlActiveTime

• You can set the time for the control bar to automatically hide using the controlActiveTime property. The default value is 3000 ms (3 seconds).

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playlist: [{ file: 'https://example.com/video.m3u8' }],
        controlActiveTime: 5000, // Automatically hides after 5 seconds
    }}
    onBack={() => navigation.goBack()}
/>

lang

You can configure the UI language with the lang property.

Remote controller event

TV SDK automatically processes remote controller D-pad inputs.

Layout system

You can customize the control bar UI by using the declarative layout system of the TV SDK.

Layout structure

It is a declarative layout composed of 5 sections (top, upper, center, lower, and bottom) and seekbar.

Available items

Items that can be placed in the control bar are as follows:

Items removed from TV are FullscreenBtn, PipBtn, and ShareBtn, and they will be ignored even if included in the layout.

Custom layout example

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{ playlist: [{ file: 'https://example.com/video.m3u8' }] }}
    layout={{
        top: [
            { items: ['BackBtn'], wrapper: 'Group' },
            { items: ['MetaDesc'] },
            { wrapper: 'Blank', items: [] },
        ],
        center: [
            { items: ['BigPlayBtn'], align: 'center' },
        ],
        lower: [
            { wrapper: 'Blank', items: ['SeekBar'], align: 'center' },
        ],
        bottom: [
            { items: ['PlayBtn'], wrapper: 'Group' },
            { items: ['NextPrevBtn'], wrapper: 'Group' },
            { items: ['MuteBtn'], wrapper: 'Group' },
            { items: ['TimeBtn'], wrapper: 'Group' },
            { wrapper: 'Blank', items: [] },
            { items: ['SubtitleBtn', 'SettingBtn'], wrapper: 'Group' },
        ],
    }}
    onBack={() => navigation.goBack()}
/>

VOD/Live variation

You can use different layouts for VOD and Live.

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{ playlist: [{ file: 'https://example.com/video.m3u8' }] }}
    layout={{
        vod: {
            bottom: [
                { items: ['PlayBtn'], wrapper: 'Group' },
                { items: ['TimeBtn'], wrapper: 'Group' },
                { wrapper: 'Blank', items: [] },
                { items: ['SettingBtn'], wrapper: 'Group' },
            ],
        },
        live: {
            bottom: [
                { items: ['PlayBtn'], wrapper: 'Group' },
                { items: ['TimeBtn'], wrapper: 'Group' },
                { wrapper: 'Blank', items: [] },
                { items: ['MuteBtn'], wrapper: 'Group' },
            ],
        },
    }}
    onBack={() => navigation.goBack()}
/>

Runtime layout change

You can change the layout at runtime through the ref method.

const playerRef = useRef<PlayerHandle>(null);

// Partial update (merge=true, default)
playerRef.current?.layout(
    { bottom: [{ items: ['PlayBtn'], wrapper: 'Group' }] },
    true
);

// Total replacement (merge=false)
playerRef.current?.layout(newLayout, false);

Group option

Properties that can be set for each group are as follows: