---
title: "基本的な使い方"
slug: "vpe-react-getting-started"
updated: 2026-09-17T09:22:05Z
published: 2026-09-17T09:22:05Z
canonical: "guide.ncloud-docs.com/vpe-react-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環境で利用できます。

React/Next.js環境で VPEプレイヤーを使用する方法について説明します。

## React/Next.js

`VpePlayer` コンポーネントを importし、必須の propsを渡します。

`app/player/page.tsx`

```
"use client";
import Hls from "hls.js";
import { VpePlayer, type PlayerHandle } from "@sgrsoft/vpe-react-sdk";
import { useRef } from "react";

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

  return (
    <div style={{ maxWidth: "800px", margin: "0 auto" }}>
      <VpePlayer
        ref={playerRef}
        hls={Hls}
        accessKey="YOUR_ACCESS_KEY"
        options={{
          playlist: [
            {
              file: "https://example.com/video/master.m3u8",
              poster: "https://example.com/poster.jpg",
              description: {
                title: "動画タイトル",
                profile_name: "チャンネル名",
              },
            },
          ],
          autostart: true,
          muted: true,
          aspectRatio: "16/9",
        }}
      />
    </div>
  );
}
```

### 必須 Props

| Prop | タイプ | 説明 |
| --- | --- | --- |
| `hls` | `typeof Hls` | hls.jsモジュール(HLS再生時に必須) |
| `accessKey` | `string` | NAVERクラウドプラットフォーム Access Key |
| `options` | `PlayerOptions` | プレイヤーオプションオブジェクト |

### オプション Props

| Prop | タイプ | 説明 |
| --- | --- | --- |
| `ref` | `Ref&lt;PlayerHandle&gt;` | プレイヤー制御ハンドル(メソッド呼び出し用) |
| `dashjs` | `typeof dashjs` | dashjsモジュール(DASH再生時) |
| `layout` | `LayoutConfig` | カスタムレイアウト設定 |
| `platform` | `string` | プラットフォームの区分(`&quot;pub&quot;`など) |

## レイアウトのカスタマイズ

`layout` propでプレイヤー UIをカスタマイズできます。レイアウトは `pc`、`mobile`、`fullscreen` 環境ごとに個別に定義されます。

```
{
  "pc": {
    "vod": {
      "order": ["top", "upper", "center", "lower", "bottom"],
      "top": [
        { "items": ["MetaDesc"] },
        { "wrapper": "Blank", "items": [], "align": "left" },
        { "items": ["ShareBtn"] }
      ],
      "center": [
        { "items": ["BigPlayBtn"], "align": "center" }
      ],
      "bottom": [
        { "items": ["ProgressBar"] },
        { "items": ["PlayBtn", "VolumeBtn", "TimeDisplay"], "align": "left" },
        { "items": ["SettingBtn", "PIPBtn", "FullscreenBtn"], "align": "right" }
      ]
    }
  }
}
```

レイアウト JSONは、[UI Editor](https://vpe-player-editor.web.app/)で視覚的に編集することもできます。