---
title: "基本的な使い方"
slug: "vpe-tv-getting-started"
updated: 2026-09-17T09:22:05Z
published: 2026-09-17T09:22:05Z
canonical: "guide.ncloud-docs.com/vpe-tv-getting-started"
stale: true
---

> ## 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.

# 基本的な使い方

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

VPE TV SDKの基本的な使い方をご案内します。

## 基本ユースケース

`VpePlayer` コンポーネントを importし、`accessKey`と `options.playlist`を設定して動画を再生します。

```
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',
                        poster: 'https://example.com/poster.jpg',
                        description: {
                            title: '動画タイトル' ,
                            profile_name: 'チャンネル名',
                        },
                    }],
                    autostart: true,
                }}
                onBack={() => {
                    // 戻る処理(例: navigation.goBack())
                }}
                onEvent={(event) => {
                    if (event.type === 'ready') {
                        console.log('Player ready');
                    }
                }}
            />
        </View>
    );
}

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

TV SDKは、**ネイティブビデオエンジン(ExoPlayer/AVPlayer)**を使用して HLS / DASHを直接再生します。別途、ストリーミングライブラリを組み込む必要はありません。

## Props (PlayerProps)

`VpePlayer` コンポーネントがサポートする propは次の通りです。

| Prop | タイプ | デフォルト値 | 説明 |
| --- | --- | --- | --- |
| accessKey | string | - | APIアクセスキー(必須) |
| platform | 'pub' \| 'gov' | 'pub' | 個人/法人向け・公共官公庁向けクラウドプラットフォーム |
| options | PlayerOptions | - | プレイヤーオプション |
| layout | ControlBarLayout | - | レイアウトのカスタマイズ |
| onEvent | (event) => void | - | イベントハンドラ |
| onBack | () => void | - | 戻るコールバック(TV専用) |
| onExit | (info) => void | - | 終了時の再生情報(TV専用) |
| initialPosition | number | - | 開始位置(秒、続きから再生用、TV専用) |
| errorOverride | ReactNode \| Component \| Function | - | カスタムエラー UI |

## 注意事項

TV SDKでは使用できないコードパターンは次の通りですので、ご注意ください。

```
// ❌ 存在しない propを使用
<VpePlayer src="https://..." />
<VpePlayer videoUrl="https://..." />

// ❌ プレイリストなしでファイルを直接転送
<VpePlayer options={{ file: "https://..." }} />

// ❌ ウェブ専用のレイアウトアイテムを使用
layout={{ bottom: [{ items: ["FullscreenBtn", "PipBtn"] }] }}

// ✅ 正しい方法 — ネイティブエンジンが HLS/DASHを直接再生
<VpePlayer options={{ playlist: [{ file: "https://..." }] }} />
```