プレイヤー UI

Classic/VPC環境で利用できます。

プレイヤー 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言語を設定できます。

リモコンイベント

TV SDKは、リモコンの D-pad入力を自動的に処理します。

レイアウトシステム

TV SDKの宣言型レイアウトシステムを使用すると、コントロールバーの UIをカスタマイズできます。

レイアウト構造

5つのセクション(top, upper, center, lower, bottom)と seekbarで構成される宣言型レイアウトです。

使用可能なアイテム

コントロールバーに配置できるアイテムは次の通りです。

TVから除外されたアイテムは FullscreenBtn、PipBtn、ShareBtnであり、レイアウトに含めても無視されます。

カスタムレイアウトのユースケース

<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のバリエーション

VODと 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()}
/>

ランタイムレイアウトの変更

refメソッドを使用すると、ランタイムにレイアウトを変更できます。

const playerRef = useRef<PlayerHandle>(null);

// 部分アップデート(merge=true、デフォルト値)
playerRef.current?.layout(
    { bottom: [{ items: ['PlayBtn'], wrapper: 'Group' }] },
    true
);

// すべて置き換え(merge=false)
playerRef.current?.layout(newLayout, false);

グループオプション

各グループに設定できるプロパティは、次の通りです。