---
title: "VPE 2.0 React の仕様"
slug: "vpe-v2-react-spec"
updated: 2026-09-17T09:22:05Z
published: 2026-09-17T09:22:05Z
canonical: "guide.ncloud-docs.com/vpe-v2-react-spec"
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.

# VPE 2.0 React の仕様

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

## サポート環境

VPEプレイヤーは、再生環境を区別するために、`platform`値を設定する必要があります。プラットフォームの値は、以下の2つです。

- `pub`: 個人/法人向けクラウドプラットフォーム環境
- `gov`: 公共官公庁向けクラウドプラットフォーム環境

## ユースケース

### Reactのユースケース

`platform`は、`VpePlayer` コンポーネントの propsとして渡します。

```
"use client";

import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

export default function PlayerPage() {
    return (
        <VpePlayer
            accessKey="YOUR_ACCESS_KEY"
            platform="pub"
            hls={Hls}
            dashjs={dashjs}
            options={{
                playlist: [
                    {
                        file: "https://CDN_DOMAIN/example_video_01.mp4",
                        poster: "https://CDN_DOMAIN/example_video_01.png",
                    },
                ],
            }}
        />
    );
}
```

### UMDのユースケース

UMD環境では、`platform` propsは使用しません。個人/法人向けや公共官公庁向けは、CDNスクリプトのエンドポイントによって区別されます。

個人/法人向け

```
<script src="https://player.vpe.naverncp.com/v2/ncplayer.js?access_key={YOUR_ACCESS_KEY}"></script>
```

公共官公庁向け

```
<script src="https://player.vpe.gov-ntruss.com/v2/ncplayer.js?access_key={YOUR_ACCESS_KEY}"></script>
```

```
<script>
    const player = new ncplayer("player", {
        playlist: [
            { file: "https://CDN_DOMAIN/example_video_01.mp4" },
        ],
    });
</script>
```

## パッケージインストール

React、Next.jsプロジェクトで、`npm` または `pnpm`で VPE SDKをインストールします。

`npm`を使用する場合:

```
npm i @sgrsoft/vpe-react-sdk
```

`pnpm`を使用する場合:

```
pnpm add @sgrsoft/vpe-react-sdk
```

## peerDependencies

ストリーミングプロトコルに応じて、必要なライブラリを追加でインストールします。バンドルには含まれていないため、必要なプロトコルだけを選択してインストールしてください。

| プロトコル | パッケージ | 説明 |
| --- | --- | --- |
| HLS | hls.js | HLSストリーミング再生(必須) |
| DASH | dashjs | DASHストリーミング再生(オプション) |

```
# HLSストリーミング(必須)
npm i hls.js

# DASHストリーミング(オプション)
npm i dashjs
```

## Next.js設定

Next.jsで使用する場合は、`&quot;use client&quot;` ディレクティブが必要です。VPEコンポーネントはブラウザ APIを使用するため、クライアントコンポーネントとしてレンダリングする必要があります。

```
"use client";

import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

export default function PlayerPage() {
    return (
        <div style={{ maxWidth: "800px", margin: "0 auto" }}>
            <VpePlayer
                hls={Hls}
                accessKey="YOUR_ACCESS_KEY"
                options={{
                    playlist: [{
                        file: "https://example.com/video/master.m3u8",
                    }],
                    autostart: true,
                    muted: true,
                    aspectRatio: "16/9",
                }}
            />
        </div>
    );
}
```

## DASHストリーミングを使用する

DASHプロトコルを使用するには、`dashjs`を動的 importでロードして渡します。

```
"use client";

import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
import { useEffect, useState } from "react";

export default function PlayerPage() {
    const [dashjs, setDashjs] = useState(null);

    useEffect(() => {
        import("dashjs").then((mod) => {
            setDashjs(mod.default ?? mod);
        });
    }, []);

    return (
        <VpePlayer
            hls={Hls}
            dashjs={dashjs}
            accessKey="YOUR_ACCESS_KEY"
            options={{
                playlist: [{
                    file: "<https://example.com/video/stream.mpd>",
                }],
            }}
        />
    );
}
```

## LLMベースのコード作成

VPEプレイヤーの設定をすぐに始めるためのガイドです。`llms.txt`をプロンプトとして提供すると、AIが Next.jsベースのサンプルコードを作成します。

### 概念

`llms.txt`は、VPEプレイヤーの主な使用ルールをまとめた要約文書です。これをまず LLMに読み込ませることで、コード作成時に必須のオプションや推奨される設定を見落とさないようにするのに役立ちます。

### LLM選択

使用中の LLM(例: ChatGPT、Claude、Copilot、Cursorなど)に、以下のプロンプトをそのまま貼り付けます。

### プロンプト入力

```
https://developer.vpe.naverncp.com/llms.txtを読んで、Reactのサンプルコードを作成して
```

### ガイド

- レスポンスコード内の `accessKey`、`playlist` URLは、プロジェクト環境に合わせて置き換えます。
- HLSを使用する場合は、`hls.js`の組み込みが必要かどうか確認します。
- 結果が長すぎる場合は、「必要な部分だけを要約して」と追加でリクエストできます。