Documentation Index

Fetch the complete documentation index at: https://guide.ncloud-docs.com/llms.txt

Use this file to discover all available pages before exploring further.

TV SDK の概要

Prev Next

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

Video Player Enhancement TV SDKは、Android TV / Apple TV(tvOS) / Fire TV専用の React Nativeビデオプレイヤー SDKです。

TV専用コンポーネント

@sgrsoft/vpe-reactnative-tv-sdkは、react-native-tvosベースの TV専用ビデオプレイヤー SDKです。ウェブ SDK(vpe-react-sdk)と同じ APIを提供し、プラットフォーム間で一貫した開発体験をサポートします。

主な機能

TV SDKが提供する主な機能は次の通りです。

  • HLS / DASH / MP4のネイティブ再生(ExoPlayer / AVPlayer)
  • DRMをサポート(Widevine + FairPlay)
  • IMA広告(Google Interactive Media Ads)
  • プレイリスト(自動次曲再生)
  • 字幕(VTT / SMI、EUC-KR自動デコード)
  • 宣言型レイアウトのカスタマイズ
  • ライブストリーム + LL-HLS低遅延モード
  • 多言語(ko / en / ja)
  • 続けて観る(onExit + initialPosition)
  • D-pad / リモコンナビゲーション
  • キャプチャ防止

ウェブ SDKとの違い

ウェブ SDKと TV SDKの主な違いは次の通りです。

項目 ウェブ SDK TV SDK
プラットフォーム ブラウザ(React/Next.js) Android TV / tvOS / Fire TV
ストリーミングエンジン ブラウザの MSEベース ネイティブエンジン(ExoPlayer / AVPlayer)
フルスクリーン requestFullscreen() 常時全画面表示(no-op)
PiP requestPictureInPicture() 未対応(no-op)
ボリューム スライダー UI システムボリューム(MuteBtn = ミュートトグル)
入力 マウス/キーボード リモコン D-pad
広告 IMA IMA
TV専用 props - onBack, onExit, initialPosition

言語サポート

デバイスの言語設定を検知し、韓国語(ko)、英語(en)、日本語(ja)をサポートします。

バージョン互換性

TV SDKのバージョンごとの互換性情報は次の通りです。

項目 最小 推奨
react-native-tvos 0.83.1-1 0.84.0-0
React 19.x 19.2.x
Node.js 22.11+ 22.x LTS
tvOS 15.1+ 16.0+
Android API 24 (7.0) 28+
TypeScript 5.0+ 5.8.x

クイックスタート

次のサンプルコードを使用すると、プレイヤーを素早く設定できます。

import React, { useRef } from 'react';
import { View, StyleSheet } from 'react-native';
import { VpePlayer } from '@sgrsoft/vpe-reactnative-tv-sdk';
import type { PlayerHandle } from '@sgrsoft/vpe-reactnative-tv-sdk';

export default function PlayerScreen() {
    const playerRef = useRef<PlayerHandle>(null);

    return (
        <View style={styles.container}>
            <VpePlayer
                ref={playerRef}
                accessKey="YOUR_ACCESS_KEY"
                options={{
                    playlist: [{
                        file: 'https://example.com/video.m3u8',
                        description: { title: '動画タイトル' },
                    }],
                    autostart: true,
                }}
                onBack={() => {
                    // 戻る処理
                }}
                onEvent={(event) => {
                    if (event.type === 'ready') {
                        console.log('Player ready');
                    }
                }}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    container: { flex: 1, backgroundColor: '#000' },
});