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' },
});