---
title: "VPE 2.0 React の概要"
slug: "vpe-v2-react-sdk"
updated: 2026-09-17T09:22:05Z
published: 2026-09-17T09:22:05Z
canonical: "guide.ncloud-docs.com/vpe-v2-react-sdk"
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環境で利用できます。

Video Player Enhancement V2(VPE 2.0)は、NAVERクラウドが提供する次世代ウェブビデオプレイヤー SDKです。JSONベースのレイアウトシステムとカスタムコンポーネントの挿入機能をサポートしており、様々なストリーミングプロトコルとの互換性を提供します。

## 主な機能

VPE 2.0 Reactが提供する主な機能は次の通りです。

1. JSONレイアウトシステム: コントロールバー、ボタンの配置、領域の構成を、JSONオブジェクトとして宣言的に定義できます。
2. カスタムコンポーネント: Reactコンポーネントや HTML要素を、プレイヤー内に直接挿入できます。
3. HLSおよび DASHストリーミング: `hls.js`、`dash.js`を外部組込方式で連携させ、バンドルのサイズを最適化します。
4. デバイス別レイアウト: PC、モバイル、全画面表示といった環境ごとに、独立したレイアウトを構成できます。
5. 基本動作のオーバーライド: 再生、一時停止、検索などの基本動作をインターセプトして、カスタムロジックを適用できます。
6. DRMをサポート: Widevine、FairPlay、PlayReadyをサポートし、コンテンツを安全に保護します。

## SDKパッケージ構成

VPE 2.0 Reactが提供する SDKパッケージは次の通りです。

| パッケージ | 説明 |
| --- | --- |
| @sgrsoft/vpe-react-sdk | React、Next.js専用のプレイヤーコンポーネント |

## サポート環境

VPE 2.0 Reactがサポートする環境は次の通りです。

| 環境 | サポートバージョン |
| --- | --- |
| React | 18以上 |
| Next.js | 13以上(App Router) |
| UMD (CDN) | モダンブラウザ(Chrome、Firefox、Safari、Edge) |
| モバイル | iOS Safari 15+, Android Chrome |

## クイックスタート

npmでインストールした後、すぐに使用できます。

```
npm i @sgrsoft/vpe-react-sdk hls.js dashjs
```

```
"use client";

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

export default function Player() {
    return (
        <VpePlayer
            hls={Hls}
            accessKey="YOUR_ACCESS_KEY"
            options={{
                playlist: [{
                    file: "<https://example.com/video/master.m3u8>",
                }],
                autostart: true,
                muted: true,
            }}
        />
    );
}
```